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.
Here’s a live example of how this is intended to work:
element to output the charts as images.
There are three steps to the process (or 123 if you look at it from Jim Carrey’s perspective!):
- Include the three canvg scripts as mentioned in canvg usage documentation in your page right before including FusionCharts.js
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
visibilityto none. In case you need more guidance in working with events raised by FusionCharts, check out the documentation sample “Using Rendered Event“.
- Use the standard
.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.