jays112
Posts: 4
Joined: Thu Mar 10, 2011 4:14 pm

Export to PNG/JPEG/BMP: It can be done in PURE JavaScript!!!

Wed Mar 16, 2011 12:11 pm

Hello everyone! Here i'll show you how you can export your chart using PURE JavaScript code. :D
First of all, download the attachment files and place them in your ../js/ folder of highcharts (where highcharts.js is).
Important notice: these files contain code owned by their respective authors. All credits for their part of the code belong to them.

Follow these steps as is:
1) Include the JS files you downloaded in your highchart file's <head>:

Code: Select all

		<script type="text/javascript" src="../js/rgbcolor.js"></script>
		<script type="text/javascript" src="../js/canvg.js"></script>
		<script type="text/javascript" src="../js/base64.js" type="text/javascript"></script>
		<script type="text/javascript" src="../js/canvas2image.js" type="text/javascript"></script>

2) Add this function inside the <script type="text/javascript"> of highcharts code, right above the highcharts code (before the $(document).ready(function() { ... }):

Code: Select all

		function saveCanvas(pCanvas, strType) {
				var bRes = false;
				if (strType == "PNG")
					bRes = Canvas2Image.saveAsPNG(pCanvas);
				if (strType == "BMP")
					bRes = Canvas2Image.saveAsBMP(pCanvas);
				if (strType == "JPEG")
					bRes = Canvas2Image.saveAsJPEG(pCanvas);
				if (!bRes) {
					alert("This browser is not capable of saving " + strType + " files!");
					return false;
				}
		}

3) Add this code in your <body> area of the html document:

Code: Select all

				<button class="button" id="thebutton">PNG</button>
and (change width and heigh according to your chart)

Code: Select all

		<canvas id="mycanvas" width="600px" height="400px" style="display:none;"></canvas> 

4) Add this code inside your highcharts javascript function (it's code for the event of a button click):

Code: Select all

				$('#thebutton').click(function() { 
					var mysvg = chart.getSVG();
					var c = document.getElementById('mycanvas');
					canvg(c, mysvg, { ignoreMouse: true, ignoreAnimation: true });
					saveCanvas(c, "PNG");
				});

5) Of course, instead of a button you can use anything you like, as long as you use the function you included.
For a PNG choose "PNG". For a JPEG choose "JPEG". For BMP choose "BMP". Now when you click on the button, a new window will open that will contain your image file.


6) For those who want to force the browser to display the "Save as..." dialog, you will have to change the MIME type inside the canvas2image.js file to "image/octet-stream", but this way the downloaded file will have no extension by default. This can be solved with a simple php script, where all you have to do in get the base64 data and open a new window with the right headers set. See the links for what I mean:

http://php.net/manual/en/function.readfile.php
http://apptools.com/phptools/force-download.php
http://www.ryboe.com/tutorials/php-head ... e-download

7) For those who want to send these data to the server, so they can save the file instead of display it on the browser, read the comments of people who have done this here:
http://blog.nihilogic.dk/2008/04/saving ... -file.html

Finally: Request for the Development Team:
Can you try to modify the svg file according to the zoom level a user is viewing the chart??? This would make the most out of the image generation functions.

I hope you will find this useful.
Thanks
Attachments
export-files.rar
Place these files in ../js/ directory
(22.39 KiB) Downloaded 286 times

benfyvie
Posts: 5
Joined: Mon Mar 21, 2011 5:12 pm

Re: Export to PNG/JPEG/BMP: It can be done in PURE JavaScript!!!

Mon Mar 21, 2011 5:34 pm

In regards to your "Request to the Developement Team" I believe what you are trying to do is already possible by leveraging the options that you can pass to getSVG

Here is an example of what you should be able to do to limit your SVG to your current zoom level:

Code: Select all

var mysvg = chart.getSVG(
  {
    xAxis:{
      min: this.xAxis[0].getExtremes().min,
      max: this.xAxis[0].getExtremes().max
    },
    yAxis:{
      min: this.yAxis[0].getExtremes().min,
      max: this.yAxis[0].getExtremes().max
    }
  }
);

jays112
Posts: 4
Joined: Thu Mar 10, 2011 4:14 pm

Re: Export to PNG/JPEG/BMP: It can be done in PURE JavaScript!!!

Tue Mar 22, 2011 12:44 am

Thanks for the code contribution benfyvie, but i've tried that and it doesnt work. If you have some other ideas on how to do this it would be great.

macsig
Posts: 8
Joined: Tue May 10, 2011 6:25 am

Re: Export to PNG/JPEG/BMP: It can be done in PURE JavaScript!!!

Thu May 19, 2011 12:29 pm

Hello benfyvie,
I'm trying to implement your solution but I'm running in some issues.
You may find all the details here:
http://highslide.com/forum/viewtopic.ph ... &sk=t&sd=a

Am I missing something?

Thanks for your help and have a nice day.

Sig

Return to “Highcharts Usage”