All geek questions in one place

Can Google Render: Print a PIG Chart on a PNG Image?

The Google Visualization API can draw a pie chart on a website using javascript. Can a chart be displayed as a PNG image file?

Thanks.

+6
source share
3 answers

Of course, just use the static image of the Google Chart API

At least you can until April 20, 2015 :(

+5
source

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

The solution, originally described by Riccardo Govoni in a remarkable 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:

  • Set the chartArea variable to work with the Google visualization API version 1.32 (September 24, 2012) and later ( source )
  • Use canvg.js r157 as a workaround for 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>
+8
source

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

It seems that it uses canvas for clients, converts data to SVG / PNG, which will print.

0
source

Source: https://habr.com/ru/post/892552/

More articles:


All Articles