Convert Google Geochart to image (JPEG, PNG, etc.) Or PDF in a browser

Question

I use Google GeoCharts (https://developers.google.com/chart/interactive/docs/gallery/geochart#Overview) to dynamically create color maps in a browser. Geochart api draws maps using javascript / svg ... any tips for creating an exported image file? (pdf, bitmap, etc.)

Can this be done with gooch geocharts? If not, is there any other service that you can recommend?

* Earlier we used GeoMaps, but the resolution was not suitable.

Answer 1

This can be done by following the steps on this page . Please note that the code in the article is based on an old version of Google Visualization, which uses iframes and will not work as published. 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 aforementioned site (Riccardo Govoni) and was updated in the comment section by Thomas.

Answer 2

It is very good; I do this using SVG for the image converter from Highcharts. You just find the svg code on the page and the POST for the large chart export server along with a type parameter (like image / jpeg), width and file name to save it as.

The only drawback: IE does not transmit SVG, but VML for Google visualization. There is no solution yet, but it seems that Highcharts also has difficulties converting IE and VML to SVG. So I'm out of luck, I'm afraid.

 <form method="post" action="http://export.highcharts.com/" id="imageGetForm"> <input type="hidden" name="filename" value="savedFromGoogleVisualization" /> <input type="hidden" name="type" id="imageGetFormTYPE" value="" /> <input type="hidden" name="width" value="900" /> <input type="hidden" name="svg" value="" id="imageGetFormSVG" /> </form> 

and run the following script:

 var svg=document.getElementById('chart_div').getElementsByTagName('svg')[0].parentNode.innerHTML; $('#imageGetFormTYPE').val('image/jpeg');//eg image/jpeg application/pdf etc $('#imageGetFormSVG').val(svg); $('#imageGetForm').submit(); 

A working example is here: http://jsfiddle.net/P6XXM/