Can Google Visualization: Pie Chart output to a PNG image?

Question

Google Visualization API can draw the pie chart in the website with javascript. Can the chart be output as a PNG image file?

Thanks.

I have the same problem, only the old-style Image Chart is **not** suitable for my need. — msanford, Jan 11 '12 at 22:54
This tutorial show how transform the charts generated by google charts in a image, i hope it helps: http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html — , Jul 25 '12 at 17:08

score 8 · Answer 1 · edited May 23 '17 at 12:00

Yes. This is no longer natively supported in the Google Visualization API, but it only requires a few lines of JavaScript, below.

The solution, originally, described by Riccardo Govoni in the wonderful Battlehorse tutorial, converts SVG to Canvas and then to PNG, which can then be displayed or saved.

The tutorial code no longer works, but I added two fixes to it:

Set the chartArea variable to work with Google Visualization API version 1.32 (Sept 24, 2012) and later (source)
Use canvg.js r157 as a workaround for a regression identified by nverba

.

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script type="text/javascript" src="https://canvg.googlecode.com/svn-history/r157/trunk/canvg.js"></script>
<script>
  function getImgData(chartContainer) {
    var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
    var svg = chartArea.innerHTML;
    var doc = chartContainer.ownerDocument;
    var canvas = doc.createElement('canvas');
    canvas.setAttribute('width', chartArea.offsetWidth);
    canvas.setAttribute('height', chartArea.offsetHeight);

    canvas.setAttribute(
        'style',
        'position: absolute; ' +
        'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
        'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
    doc.body.appendChild(canvas);
    canvg(canvas, svg);
    var imgData = canvas.toDataURL("image/png");
    canvas.parentNode.removeChild(canvas);
    return imgData;
  }

  function saveAsImg(chartContainer) {
    var imgData = getImgData(chartContainer);

    // Replacing the mime-type will force the browser to trigger a download
    // rather than displaying the image in the browser window.
    window.location = imgData.replace("image/png", "image/octet-stream");
  }

  function toImg(chartContainer, imgContainer) { 
    var doc = chartContainer.ownerDocument;
    var img = doc.createElement('img');
    img.src = getImgData(chartContainer);

    while (imgContainer.firstChild) {
      imgContainer.removeChild(imgContainer.firstChild);
    }
    imgContainer.appendChild(img);
  }
</script>

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    // Pie chart
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours per Day');
    data.addRows(5);
    data.setValue(0, 0, 'Work');
    data.setValue(0, 1, 11);
    data.setValue(1, 0, 'Eat');
    data.setValue(1, 1, 2);
    data.setValue(2, 0, 'Commute');
    data.setValue(2, 1, 2);
    data.setValue(3, 0, 'Watch TV');
    data.setValue(3, 1, 2);
    data.setValue(4, 0, 'Sleep');
    data.setValue(4, 1, 7);

    var chart = new google.visualization.PieChart(document.getElementById('google_visualization_div'));
    chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
  }
</script>
</head>
<body>
<div id="google_visualization_div"></div>

<button onclick="saveAsImg(document.getElementById('google_visualization_div'));">Save as PNG Image</button>
<button onclick="toImg(document.getElementById('google_visualization_div'), document.getElementById('img_div'));">Convert to image</button>
<hr>
<div id="img_div">
  Image will be placed here
</div>
</body>
</html>

in IE8 im facing trouble in chartContainer.getElementsByTagName('svg')[0].parentNode; how can i resolve it — Hariprasath, Oct 24 '13 at 06:46

Paul Dixon · Accepted Answer · 2013-03-13T15:35:12.163

5

Sure, just use the static image Google Chart API

At least, you can until 20 Apr 2015 :(

edited Mar 13 '13 at 15:35

answered Jul 12 '11 at 06:56

Paul Dixon

295,876
54
310
348

Thanks. I found the image pie chart which is suitable in my case. – Tatming Jul 15 '11 at 01:57
The new JSAPI is very attractive but the HTML codes are in tags. Is there any way we can convert that cool output(https://google-developers.appspot.com/chart/interactive/docs/quick_start) into image? – Jonas T Jun 29 '12 at 13:37
Sorry to say, but the old image API is now deprecated - ttl = 2015: https://developers.google.com/chart/terms – zeroasterisk Mar 13 '13 at 15:28
One quick question: will the whole google chart api be only available until 20 Apr 2015? Or just the static chart generator? -- Never mind, just read it on the site: "Important: The Image Charts portion of Google Chart Tools has been officially deprecated as of April 20, 2012. It will continue to work as per our deprecation policy." – Andres SK Apr 30 '14 at 16:30

score 0 · Answer 3 · answered Mar 13 '13 at 15:29

0

I found this, but have not yet tested it: https://gist.github.com/battlehorse/1333906

Looks like it uses canvas to clientside convert the data into SVG/PNG, which will print.

answered Mar 13 '13 at 15:29

zeroasterisk

2,199
1
23
28

This does not work since the update where they removed iframes over half a year ago. See comments here for solution. http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html – IAmGroot Mar 21 '13 at 15:25

Can Google Visualization: Pie Chart output to a PNG image?

3 Answers3

Linked