An important feature you’d consider when comparing javascript chart libraries is the ability to export your charts in any given scenario – server-side, client-side, and every permutation and combination in between. This is one reason why our customers love FusionCharts Suite XT. It allows you to export your charts server-side, client-side, in batch mode, using a JavaScript function, or without even rendering in a browser using FCimg, wkhtmltoimage, or PhantomJS. Whew!
While all these options would take care of most use cases, we still get a few requests from users who want to allow their end users to export charts on client side without sending a request to server. This may come in handy if your users save charts frequently, and you want to reduce cost on server, or avoid private data being transferred across network. Also, allowing your users to save charts locally on their machine in a hassle-free way, could mean a world of a difference to them. Though not a heavily requested feature, we decided to make it possible, even if not with a perfect solution, at least with one that works.
Live Example:
Here’s a live example of how this is intended to work:
Requirements:
For this, we would use the canvg JavaScript library that converts SVG to HTML5 canvas. This conversion is required as our implementation makes use of the additional image-generation API of element to output the charts as images.
Implementation:
There are three steps to the process (or 123 if you look at it from Jim Carrey’s perspective!):
canvg("myCanvasElementId", myChartInstance.getSVGString());
We are assuming that you have a canvas element in your page with the id “myCanvasElement”. The canvg library would replicate the chart on this canvas. For your implementation you may even choose to keep this canvas hidden by setting its css visibility
to none. In case you need more guidance in working with events raised by FusionCharts, check out the documentation sample “Using Rendered Event“..toDataURL()
API of canvas for converting this canvas to an image. There are multiple methods to export canvas to image as reflected by a handful of StackOverflow submissions. The method we used here is well described in the article user-friendly image saving to Canvas.A Caveat for the Geeks!
Exporting charts using this method works in all major browsers that support the element. Oddly, the exported image file, when saved using the method in this demo, may not have a filename extension such as “png” or “jpg” (perils of new technology!). However, once the chart is duplicated on the canvas, you could swap this canvas-to-image step with an alternative approach that better suits your implementation.
Feel free to play around with the fiddle, and let us know if you have ideas to further improve this.
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…
View Comments
From what I can tell this does not work. It only renders the chart template and not any of the actual data series or legend.
Hey Scott,
If you are targeting some new browsers, you can try listening to the rendered event and try something like this.
"events": {
"rendered": function () {
var image = new Image(),
canvasElem = document.getElementById("tempCanvas");
if (!canvasElem) {
canvasElem = document.createElement('canvas');
canvasElem.id = "tempCanvas";
canvasElem.width = width;
canvasElem.height = height;
document.getElementsByTagName("body")[0].appendChild(canvasElem);
}
image.src = 'data:image/svg+xml;base64,'+window.btoa(chartInstance.getSVGString());
canvasElem.getContext("2d").drawImage(image, 0, 0);
}
}
chartInstance being the FusionCharts Instance. It just happen to work for me. :)