Home / Questions / 22889
Accepted
Alan
Asked: 2020-09-08 07:12:21 +0800 CST 2020-09-08 07:12:21 +0800 CST

How to get the dataUrl (png) of a chart with Google Charts?

  • 772

I try to get the dataUrl (something similar to what this page link does ) of a graph generated with Google Charts and save it in a variable, the graph is generated as follows:

    var result;
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['Ciudad', 'Poblacion'],
        ['Tulua', 12312 ],
        ['Bogota', 22222 ]
      ]);

      var options = {
        title: "Max Poblacion",
      };

      var chart_div = document.getElementById('chart_div');
      var chart = new google.visualization.PieChart(chart_div);

      
      google.visualization.events.addListener(chart, 'ready', function () {
        chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
        console.log(chart.getImageURI());
        result = chart.getImageURI();
      });
      
      chart.draw(data, options);
  }
console.log(result);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id='chart_div'></div>

I can show what I need but I can't save it in a variable, because when I try to do it it shows me that it is undefined.

Is it necessary to display the chart in a div to get its dataUrl chart.getImageURI()?

javascript

1 Answers

  1. Best Answer

    The problem is thatyou have a Career Condition: the console.log(result)is executing before the variable with the dataUrl is filled.

    Place the console.log(result)on the line following a result = chart.getImageURI();and you will see that the variable is being saved. You can also try this:

    setTimeout(function(){console.log(result)}, 3000)

    Now, I guess what you need to do is do something after the graph is generated, like send the image via ajax to the server, or show it in a new window, etc. for this, you must call the function that executes that operation from within the event readyof the chart:

    google.visualization.events.addListener(chart, 'ready', function () {
  chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
  console.log(chart.getImageURI());
  result = chart.getImageURI();
  enviarAlServidor(result);//En este punto ya tienes el valor en la variable.
});

    Update

    As @rnd indicates, it's not really a Race Condition, because by definition it refers to access to a shared resource from different processes/threads, and Javascript handles asynchronous calls (events, setTimeout...) in a single thread ( the event loop ): the event readyof chartwill not fire, at least, until the function has finished drawChart.

    • 2