Making Google Charts API Images Saveable

The google chart API is rather lovely. The problem I have faced with it is that the javascript it runs on the client side generates SVG in the browser which then cannot be copied and pasted into documents. This is problematic for my purposes.

Longer-term it might be nice to be able to run the API server-side and generate documents, but that’s another story.

While I could find another API which generates images, the fact that Google’s charts are active and respond to mouse-over to provide nice extra information is a reason to keep them. They also look nice for not much configuration.

After a bit of Googling, it seems you can kind of solve this problem:

  • If the SVG is converted into canvas then there’s something you can do with the canvas
  • If the canvas is converted to a dataurl in PNG format, then this is innately copy/pasteable/saveable as image
  • If the dataurl is written to a fresh window’s DOM, then the window will be usable by the user as an image they can play with

It requires a few libraries, but turns out quite simple.

 

<script>
function popupGraphImage() {
// jquery to find the svg element inside the div google put my chart in, which has the ID “chart_div”
var svgElement = $(‘#chart_div svg’);

svgElement.get(0).toDataURL(“image/png”, {
callback: function(data) {
var w=window.open(‘about:blank’,’image from canvas’);
w.document.write(“<img src='”+data+”‘ alt=’graph’/>”);
}
});
}
</script>
<a title=”Open as image” href=”#”>Pop up my chart</a>

 

So which libraries? Well, jQuery’s in there because finding the right svg tag is easier that way. The main library you need is SVG.toDataURL which also requires canvag. It works on HTML5 compatible browsers pretty well.

Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s