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>
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