Menu
I am making an application in which I would need to save the google chart as an image . All I am using is tomcat, servlets and javascript. Is there a way to save the following generated chart as an image? (refer to code at the end of post). The idea is that user would see this chart and then would have the option of uploading it to his facebook profile. I am not sure if this will be uploadable to facebook in its native format or will be needed to be saved as a jpg.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addRows(4);
data.setValue(0, 0, ''+2004);
data.setValue(0, 1, 1000);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 860);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030.5);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, title: 'Company Performance',hAxis: {title: "X", titleTextStyle: {color: "green"}}});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
714
It looks like this feature was recently1 added as:
chart.getImageURI()
See the documentation.
1It appears to have been added in the Jan 29, 2014 release.
56
Example solution from Riccardo Govoni as seen on the issues page of google charts. The idea is to convert the SVG to Canvas element.
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
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
