Converting Google Chart into Image

Question

I\'m trying convert a Google Chart into a image like this link but I don\'t understand about the line

var chartArea = chartContainer.getElementsByTagName(\'if

Answer 1

This can be done by following the steps on this page. Note that the code in the article is based on an old version of Google Visualization which used iframes, and will not work as posted. However, you can do the same using the following code (found in the comments):

var svg = $(chartContainer).find('svg').parent().html();
var doc = chartContainer.ownerDocument;
var canvas = doc.createElement('canvas');
canvas.setAttribute('style', 'position: absolute; ' + '');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL("image/png");
canvas.parentNode.removeChild(canvas);
return imgData; 

Note: I did not create this code, it was originally created by the author of the above site (Riccardo Govoni) and updated in the comments section by user Thomas.

Answer 2

You can get a PNG version of your chart using chart.getImageURI() like following:

Needs to be after the chart is drawn, so in the ready event!

var my_div = document.getElementById('my_div');
var my_chart = new google.visualization.ChartType(chart_div);

google.visualization.events.addListener(my_chart, 'ready', function () {
  my_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
});

my_chart.draw(data);