Export Chart as Image on Client Side, without Hitting the Server

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!):

1. Include the three canvg scripts as mentioned in canvg usage documentation in your page right before including FusionCharts.js
2. Render your chart in JavaScript renderer mode. Once rendering is complete (subscribe to the “rendered” event of the chart to detect this), pass the SVG string of the chart to the canvg library by calling: 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“.
3. 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.