Google Charts - Column & Table chart to display in same page

Question

im trying to display both column and Table chart in same page. but only column chart is displaying properly...but, Table chart is not displaying just empty div

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart','table']});
google.charts.setOnLoadCallback(drawChart);
google.charts.setOnLoadCallback(drawTable);

function drawChart() {
var count = ${fn:length(columnChartDataList)};
    var data = google.visualization.arrayToDataTable([
     ['Genere','Beverage', 'Food', 'Industrial', 'Un-Filled', { role: 'annotation' } ],
     <c:forEach items="${columnChartDataList}" var="entry">
        [ '${entry.key}', ${entry.value1}, ${entry.value2}, ${entry.value3}, ${entry.value4}, '' ],
      </c:forEach>
   ]);              
var options = {
 title: "Tank Consumptions by Locations as on Today",
 width: 720,
 height: 500,
 legend: { position: 'top', maxLines: 2 },
 bar: { groupWidth: '70%' },
 isStacked: true,
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}


function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike',  {v: 10000, f: '$10,000'}, true],
    ['Jim',   {v:8000,   f: '$8,000'},  false],
    ['Alice', {v: 12500, f: '$12,500'}, true],
    ['Bob',   {v: 7000,  f: '$7,000'},  true]
  ]);
  var table = new google.visualization.Table(document.getElementById('chart_div1'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>

<div id="chart_div"></div>
<div id="chart_div1"></div>

how can i show both charts for my dashboard. as well as shall i bind the same data for both chart...

WhiteHat WhiteHat · Accepted Answer · 2020-03-05T12:48:31

I've seen issues in the past when using two calls to--> setOnLoadCallback
but this should be fixed.

anyway, you can use the promise the load statement returns instead.

google.charts.load('current', {
  packages: ['corechart','table']
}).then(function () {
  drawChart();
  drawTable();
});

see following working snippet...

google.charts.load('current', {
  packages: ['corechart','table']
}).then(function () {
  drawChart();
  drawTable();
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Genere', 'Beverage', 'Food', 'Industrial', 'Un-Filled', { role: 'annotation' } ],
    ['Test', 5, 10, 15, 20, '20']
  ]);
  var options = {
    title: "Tank Consumptions by Locations as on Today",
    width: 720,
    height: 500,
    legend: { position: 'top', maxLines: 2 },
    bar: { groupWidth: '70%' },
    isStacked: true,
  };
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}


function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike',  {v: 10000, f: '$10,000'}, true],
    ['Jim',   {v:8000,   f: '$8,000'},  false],
    ['Alice', {v: 12500, f: '$12,500'}, true],
    ['Bob',   {v: 7000,  f: '$7,000'},  true]
  ]);
  var table = new google.visualization.Table(document.getElementById('chart_div1'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="chart_div1"></div>

Google Charts - Column & Table chart to display in same page

1 Answers