How to use multiples google charts so they can be used in a cell of a dynamic table

Question

I was trying to use multiple google charts on tables cells but I get that only once instance can be used. More info. Im using this code

...looping so I get and set percentFromtable JS value
    <tr>
  <td>
    <script type="text/javascript"     src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['percent',     percentFromtable],
          ['REst',     100 - percentFromtable],              
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new  google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>

<div id="donutchart" style="width: 900px; height: 500px;"></div>

......

but I get only one chart, on the others cells I get a empty space. Probably I have to declare an array of data but want to check with the community for the proper way. Thanks, if more details its needed just tell.

I answered this question yesterday http://stackoverflow.com/a/37822007/4233593 — Jeff Puckett, Jun 15 '16 at 12:32

score 0 · Answer 1 · answered Jun 15 '16 at 12:27

couple things...

google.charts.load and setOnLoadCallback should only be called once per page load
not multiple times...
Each chart div should have a unique id

recommend separating the html from the javascript
maybe try building out the table first, then draw the charts when the page loads

something like this...

google.charts.load('current', {
  callback: function () {
    var percentFromtable = 0;
    Array.prototype.forEach.call(document.getElementById('chartTable').rows, function(row, index) {
      percentFromtable += 33;
      var data = google.visualization.arrayToDataTable([
        ['Task',     'Hours per Day'],
        ['Percent',  percentFromtable],
        ['Rest',     100 - percentFromtable],
      ]);
      new google.visualization.PieChart(document.getElementById('donutchart' + index)).draw(data, {
        title: 'My Daily Activities',
        pieHole: 0.4,
      });
    });
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<table id="chartTable">
  <tr>
    <td>
      <div id="donutchart0"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="donutchart1"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="donutchart2"></div>
    </td>
  </tr>
</table>

How to use multiples google charts so they can be used in a cell of a dynamic table

1 Answers1