Start networking and exchanging professional insights

Register now or log in to join your professional community.

Follow

Is there a way to save Google Chart as an image?

I am using Google Chart from https://developers.google.com/chart/interactive/docs/gallery. It is working perfectly fine but I want to save my chart as an image. Any idea how can I do this?

user-image
Question added by Muhammad Majid Saleem , Senior PHP Developer / Project Manager , SwaamTech
Date Posted: 2013/05/03
Zaid Rabab'a
by Zaid Rabab'a , Technical Team Lead , ESKADENIA Software

I found this through web search check it maybe this gana help 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 it was searching for an iframe bla bla to get the svg.
To automatically save the image, you can just let the method being invoked programmatically.
document.body.addEventListener("load", function() { saveAsImg( document.getElementById("pie_div")); // or your ID }, false ); For saving images serverside, this post could be helpful save a PNG image server-side Update Posting images to 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

Faizan Ahmad
by Faizan Ahmad , Software Engineer , cardekho.com

Hope this will help you Links: Tutorial : http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html Example page: http://www.battlehorse.net/attach/topics/charts/google_charts_to_image.html

Ali Raza Syed
by Ali Raza Syed , Virtual Assistant (Online) , PIDC-LC

I am sure this article and links provided there would surely help you...
https://groups.google.com/forum/?fromgroups=#!topic/google-visualization-api/LhMIMdNPTSg

mukhtar ahmed Ibrahim
by mukhtar ahmed Ibrahim , Software Engineer , the norwegian tax administration (skatteetaten)
مصطفى كمال
by مصطفى كمال , مصمم بنرات ولوجوهات و مونتاج فيديوهات , جريدة شعب مصر

i know code if you type it it 'll save outo in google but i don't remember it now :S

islam khalil
by islam khalil , Technical Manager , iCloudit

you can use curl to fetch image and save it on the server: OR check this

More Questions Like This