Is it possible to save a google chart as an image?
Question
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>
7 answers
solution1
12 2014-02-25 19:39:47
It looks like this feature was recently 1 added as:
chart.getImageURI()
See the documentation .
1 It appears to have been added in the Jan 29, 2014 release.
solution2
7 2012-02-25 14:03:44
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
solution3
4 2015-01-01 05:36:30
This is what i do
http://danml.com/#/download.html
download(chart.getImageURI(), 'fileName.png', "image/png");
if 3kb script is too much use http://www.closure-compiler.appspot.com/home
solution4
1 2013-05-14 22:14:05
Use the grChartImg library. It's a cross browser solution from George Risvas. Supports all the browsers including older versions of IE and provides you with many auto procedures like convert a chart to image,download,show a chart to a dialog,upload it to a server etc.
For more info look at www.chartstoimage .
I hope help you.
solution5
1 2011-03-28 23:27:05
您最简单的选择是使用Google Chart API重新生成图表的静态图像版本
solution6
0 2017-04-19 08:53:44
First, download this library :
http://danml.com/download.html
and after you have just to add an events listener inside your chart
function:
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var chart = new google.visualization.ComboChart(document.getElementById('chart_tickets'));
google.visualization.events.addListener(chart, 'ready', function () {
$("#GraphDownloadTickets").click(function() {
download(chart.getImageURI(), 'fileName.png', "image/png")
});
}
solution7
0 2021-11-12 09:48:26
this is the react js example. You can get base64 image from the react-google-charts and I have converted it to a png/jpg file
import { Chart } from "react-google-charts";
const [imageUri, setImageUri] = useState("");
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
const file = dataURLtoFile(imageUri, "image.jpg");
<Chart
chartType="LineChart"
data={graphData}
width="100%"
height="500px"
legendToggle
chartEvents={[
{
eventName: "ready",
callback: (Chart) => {
setImageUri(Chart.chartWrapper.getChart().getImageURI());
},
},
]}
options={{
hAxis: {
title: "Time",
},
vAxis: {
title: "Threshold",
format: "decimal",
},
series: {
1: { curveType: "function" },
},
}}
/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.