Save Google Charts as Image

Question

So, after several hours of searching on the Internet, searching on Google and overflows, I cannot find a solution to my problem.

I have a line chart from google charts. I want to convert it to PNG, save it on the server and paste it into the MySQL database.

It sounds simple, but I can't get it to work. the script from this site no longer works (at least here) http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html → Does not work.

The second option is the old option:

$imageData = file_get_contents('http://chart.apis.google.com/chart... etc'); 

I can’t use this because it is no longer supported and can’t get decent quality.

Is there anyone here who can give a good tutorial or help with my problem?

EDIT:

I used the code from Battlehorse in combination with the code from EriC.

So now I got this job to show the diagram as an image in a DIV. I want to save this image on the server and update mysql to use it in the future, to use it in PDF files.

Answer 1

When you visit the site, paste it into the console (overwriting the faulty function).

  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; } 

In JS, he searched for iframe bla bla to get svg.

To automatically save an image, you can simply let the program call programmatically.

 document.body.addEventListener("load", function() { saveAsImg( document.getElementById("pie_div")); // or your ID }, false ); 

To save serveride images this post may be useful to save the image server to PNG

Update
Posting images in PHP (index.js)

 function saveToPHP( imgdata ) { var script = document.createElement("SCRIPT"); script.setAttribute( 'type', 'text/javascript' ); script.setAttribute( 'src', 'save.php?data=' + imgdata ); document.head.appendChild( script ); } function save() { var canvas = document.getElementById("canvas"), // Get your canvas imgdata = canvas.toDataURL(); saveToPHP( imgdata ); } function drawOnCanvas() { var canvas = document.getElementById("canvas"), // Get your canvas ctx = canvas.getContext("2d"); ctx.strokeStyle = "#000000"; ctx.fillStyle = "#FFFF00"; ctx.beginPath(); ctx.arc(100,99,50,0,Math.PI*2,true); ctx.closePath(); ctx.stroke(); ctx.fill(); } drawOnCanvas(); // Test save(); 

save.php

 <?php // Get the request $data = $_GET['data']; // Save to your DB. ?> 

Answer 2

You can use the grChartImg library. It is a cross-browser solution and even supports older versions of IE (8 and earlier). It has many functions, such as uploading an image, uploading to a server, displaying an image in a dialog box, etc.

See http://www.chartstoimage.eu for more details.

I hope to help you.

Answer 3

This is actually not an answer, but there may be one in the future, and it is simple if you just want to return this function. The following URL shows all current issues and feature requests for the visualization API.

https://code.google.com/p/google-visualization-api-issues/issues/list?can=2&q=&sort=-stars+id&colspec=ID%20Type%20Status%20Priority%20Milestone%20Owner%20Summary%20Stars

The more votes / votes this request receives, the higher the likelihood that they will look at it.

Answer 4

I have the same problem - save google charts as image on server. None of the answers here work for me. Finally, I get a solution, but with some errors (only works in the Chrome browser). As a base, I used a script from here https://gist.github.com/mpetherb/7085315 I made some changes to my project. I use jquery to import the generated graphic image to my server. This is a graph that I want to convert to an image and save an example google graph id = "ex0"

Script to convert to image and import to server

 <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 toImg(chartContainer, imgContainer) { var doc = chartContainer.ownerDocument; var img = doc.createElement('img'); var myimg=img.src = getImgData(chartContainer); //Here I am using jquery for importing decoded image to hidden.php on my server $.ajax({ method: "POST", url: "hidden.php", data: { name: myimg } }); while (imgContainer.firstChild) { imgContainer.removeChild(imgContainer.firstChild); } imgContainer.appendChild(img); } </script> <button onclick="toImg(document.getElementById('ex0'), document.getElementById('ex0'));" type="button" <Convert to image and upload on server></button> // ex0 - div id of this type of google graph. If you using another type of google graph - you should change it 

Remember to include jquery in your code.

and php hidden script to receive data from POQ jquery method and save it on server

hidden.php file

 <?php if(isset($_POST['name'])) { $data = $_POST['name']; list($type, $data) = explode(';', $data); list(, $data) = explode(',', $data); file_put_contents('graph_temp.png', base64_decode($data)); 

I will notice again - it only works in the Chrome browser. Firefox also creates an image file on the server, but without any content (it looks like firefox does not support base64 encoded data)