13

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>
Toby Allen
  • 10,997
  • 11
  • 73
  • 124
Kashif
  • 131
  • 1
  • 1
  • 3
  • is you application integrated with facebook and can upload photos to the facebook account via the api? if not, the user has to use the facebook upload to do it. in which case they have to right click on the chart image, do save as, and then upload to facebook. – Mark At Ramp51 Mar 28 '11 at 23:21
  • if you run fiddler while that is loading, you will see that it just loads an image from google. Having your server make an http request to that same image url will allow your server to download the image directly from google and do whatever it likes with it. – Mark At Ramp51 Mar 28 '11 at 23:22
  • For anyone still looking for the answer, see: https://gist.github.com/1333906 – undsoft Jun 21 '12 at 11:31
  • There is an answer here that is up to date and is what you are looking for, might be worth marking as accepted http://stackoverflow.com/a/22024466/6244 – Toby Allen Mar 02 '14 at 10:39

7 Answers7

12

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.

mgilson
  • 300,191
  • 65
  • 633
  • 696
7

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

Kosio
  • 94
  • 1
  • 4
  • 4
    It looks like there is a working version in this [jsfiddle](http://jsfiddle.net/SCjm8/1/) – mgilson Sep 19 '13 at 17:08
  • Here's how to set the file name and extension: http://stackoverflow.com/questions/7717851/save-file-javascript-with-file-name – Owen Oct 31 '13 at 13:40
4

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

Oshan Wisumperuma
  • 1,808
  • 1
  • 18
  • 32
1

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.

john
  • 41
  • 1
1

Your simplest option is to regenerate a static image version of the chart using the Google Chart API

RSG
  • 7,013
  • 6
  • 36
  • 51
  • 6
    This API was deprecated on April 20, 2012. (After this answer was posted). There is a new charting API but it does not support static images. https://developers.google.com/chart/ – dana Oct 01 '12 at 21:29
0

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")

    });
}
afxentios
  • 2,502
  • 2
  • 21
  • 24
Fahem Idir
  • 127
  • 2
0

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" },
            },
          }}
        />
vishal rathod
  • 187
  • 2
  • 5