Despite all it’s great features, Google Charts also has some limitations. One of those is the ability to save charts to images, preferably in it’s current state. Kind of frustrating to see that Google does use it themselves on http://www.thinkwithgoogle.com/mobileplanet/en/, but it’s not featured in the API.

So, why don’t you use Google Image Charts?

Image Charts was a great way to accomplish this, but unfortunately Google deprecated this as of April 20, 2012. Although it should stay continue to work, I couldn’t get it to work with my Google Charts data anymore.

As Riccardo entails, the main trick to make ‘image serialization’ work is to first convert the SVG chart into a canvas element and extract its contents as base64 encoded image using canvas.toDataURL.

Summarizing Riccardo’s solution:

Extract the svg code for the chart you want to serialize

Using the canvg svg-to-canvas converter, you transform the svg instructions into a canvas rendering

Extract the image data (as a base64 encoded string) and send it to the browser so it can be downloaded

This all seems very technical but if you look at the sample page it all becomes clear.

Great!

The only problem is that the download which it generated doesn’t have a user-friendly name and extensions, which make them unusable for normal users. Fortunately I found this blogpost by Jonathan Greene in which he explains his solution to offer the download in a user-friendly way, rather than this: