CODEWITHSUNDEEP
javascriptimagesavecharts
Kashif
Kashif

Reputation: 131

Is it possible to save a google chart as an image?

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>

Upvotes: 13

Views: 40990

Answers (7)

vishal rathod
vishal rathod

Reputation: 197

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" },
            },
          }}
        />

Upvotes: 0

Fahem Idir
Fahem Idir

Reputation: 127

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

    });
}

Upvotes: 0

Oshan Wisumperuma
Oshan Wisumperuma

Reputation: 1948

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

Upvotes: 4

mgilson
mgilson

Reputation: 309821

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.

Upvotes: 12

john
john

Reputation: 41

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.

Upvotes: 1

Kosio
Kosio

Reputation: 94

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

Upvotes: 7

RSG
RSG

Reputation: 7123

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

Upvotes: 1

Related Questions