Last Updated: February 25, 2016
·
2.185K
· darkelda

Open Google Chart V3 in a new window as an image

I use jQuery to do the job:
http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

Import CanVG librairies:
http://canvg.googlecode.com/svn/trunk/rgbcolor.js
http://canvg.googlecode.com/svn/trunk/canvg.js

After creating an empty canvas and a button, you just have to catch the event (click) to execute this function:

jQuery('#chart_div_button').click(function(){
    canvg(document.getElementById('chart_div_canvas'), jQuery('#chart_div div div').html());
    jQuery('#chart_div').hide();
    var canvas = document.getElementById('chart_div_canvas');
    var img = canvas.toDataURL("image/png");
    window.open(img);
});

More information: https://gist.github.com/4000635

1 Response
Add your response

great post! i'm new to this and receive
"TypeError: target.getContext is not a function
var ctx = target.getContext('2d');"
or
"TypeError: target.childNodes is undefined
if (!(target.childNodes.length == 1 && target.childNodes[0].nodeName == 'OBJECT'..."
with latest canvg.

Nevertheless it works when using canvg() parameterless :)

over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside