Two google bar charts not working in one page

Question

I am not able to show two bar charts in one page. I have tried both ways, implementing these in two different <script> sections in and in one <script> section also. If one is shown if I make changes to <div> id, another is not shown and vice versa but both of them not shows at one time. I have also tried with visualization version change. When I see page source, there I see all the data for both graphs, but only graph is not created. What might be the problem. I have tried a lot, but not able to debug, in last I am here. Below is my code.

<script type="text/javascript">
  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['bar']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
 function drawChart() {

// Create the data table.
var data1 = google.visualization.arrayToDataTable([
['Metric Tonnes', 'HSFO', 'LSFO', 'MGO'],
    <?php 
       foreach ($log_book_discrepancy as $log_book)
        {
          ?>
            ["<?php echo trim($log_book->type_of_vessel); ?>", <?php echo trim($log_book->fuel_hsfo); ?>, <?php echo trim($log_book->fuel_lsfo); ?>, <?php echo trim($log_book->fuel_mgo); ?> ],
          <?php
        }
    ?>
]);
// Create the data table.
var data2 = google.visualization.arrayToDataTable([
['Metric Tonnes', 'HSFO', 'LSFO', 'MGO'],
    <?php 
    foreach ($bunker_found as $bunker)
        {
            ?>
                ["<?php echo trim($bunker->type_of_vessel); ?>", <?php echo trim($bunker->fuel_hsfo); ?>, <?php echo trim($bunker->fuel_lsfo); ?>, <?php echo trim($bunker->fuel_mgo); ?> ],
            <?php
        }
    ?>
]);

// Set chart options
var options1 = {
    chart: {
      title: 'Log Book Discrepancy',
      subtitle: 'HSFO, LSFO, and MGO',
    }
  };
// Set chart options
var options2 = {
        chart: {
          title: 'Bunkers Found',
          subtitle: 'HSFO, LSFO, and MGO',
        }
      };

// Instantiate and draw our chart, passing in some options.
var chart1 = new  
google.charts.Bar(document.getElementById('log_book_discrepancy'));
chart1.draw(data1, options1);
var chart2 = new     
google.charts.Bar(document.getElementById('bunkers_found'));
chart2.draw(data2, options2);  
  }
</script>

<div id="log_book_discrepancy" style="width:100%; height:340px;"></div>
<div id="bunkers_found" style="width:100%; height:340px;"></div>

And my both arrays become like: $log_book_discrepancy is like:

Array
(
[0] => stdClass Object
    (
        [type_of_vessel] => BULK CARRIER
        [fuel_hsfo] => 30
        [fuel_lsfo] => 40
        [fuel_mgo] => 40
    )

[1] => stdClass Object
    (
        [type_of_vessel] => OIL TANKER
        [fuel_hsfo] => 60
        [fuel_lsfo] => 40
        [fuel_mgo] => 45
    )

)

And $bunker_found array is like:

Array
(
[0] => stdClass Object
    (
        [type_of_vessel] => BULK CARRIER
        [fuel_hsfo] => 10
        [fuel_lsfo] => 40
        [fuel_mgo] => 40
    )

[1] => stdClass Object
    (
        [type_of_vessel] => CHEMICAL TANKER
        [fuel_hsfo] => 50
        [fuel_lsfo] => 40
        [fuel_mgo] => 55
    )

)

Answer 1

This is solution without PHP with the given data, first chart with option: "isStacked: true":

google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data1 = google.visualization.arrayToDataTable([
        ['Metric Tonnes', 'HSFO', 'LSFO', 'MGO'],
        ['BULK CARRIER', 30, 40, 40],
        ['OIL TANKER', 60, 40, 45]
    ]);
    var data2 = google.visualization.arrayToDataTable([
        ['Metric Tonnes', 'HSFO', 'LSFO', 'MGO'],
        ['BULK CARRIER', 10, 40, 40],
        ['CHEMICAL TANKER', 50, 40, 55]
    ]);
  var options1 = {
  title: 'Log Book Discrepancy',
    chartArea: {width: '50%'},
    isStacked: true,
    hAxis: {
      title: 'HSFO, LSFO, and MGO',
      minValue: 0,
    },
  };
  var options2 = {
  title: 'Bunkers Found',
    chartArea: {width: '50%'},
    hAxis: {
      title: 'HSFO, LSFO, and MGO',
      minValue: 0,
    },
  };    
  var chart1 = new google.visualization.BarChart(document.getElementById('log_book_discrepancy'));
  chart1.draw(data1, options1);
  var chart2 = new google.visualization.BarChart(document.getElementById('bunkers_found'));
  chart2.draw(data2, options2);
}

https://jsfiddle.net/mblenton/pmeh4hr9/2/

or with MaterialChart:

https://jsfiddle.net/mblenton/gp12p37w/2/

Answer 2

Try this:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  // Load the Visualization API and the piechart package.
  google.load('visualization', '1', {packages: ['corechart', 'bar']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
 function drawChart() {

// Create the data table.
var data1 = google.visualization.arrayToDataTable([
['Metric Tonnes', 'HSFO', 'LSFO', 'MGO'],
    <?php 
       foreach ($log_book_discrepancy as $log_book)
        {
          ?>
            ["<?php echo trim($log_book->type_of_vessel); ?>", <?php echo trim($log_book->fuel_hsfo); ?>, <?php echo trim($log_book->fuel_lsfo); ?>, <?php echo trim($log_book->fuel_mgo); ?> ],
          <?php
        }
    ?>
]);
// Create the data table.
var data2 = google.visualization.arrayToDataTable([
['Metric Tonnes', 'HSFO', 'LSFO', 'MGO'],
    <?php 
    foreach ($bunker_found as $bunker)
        {
            ?>
                ["<?php echo trim($bunker->type_of_vessel); ?>", <?php echo trim($bunker->fuel_hsfo); ?>, <?php echo trim($bunker->fuel_lsfo); ?>, <?php echo trim($bunker->fuel_mgo); ?> ],
            <?php
        }
    ?>
]);

// Set chart options
var options1 = {
    chart: {
      title: 'Log Book Discrepancy',
      subtitle: 'HSFO, LSFO, and MGO',
    }
  };
// Set chart options
var options2 = {
        chart: {
          title: 'Bunkers Found',
          subtitle: 'HSFO, LSFO, and MGO',
        }
      };

// Instantiate and draw our chart, passing in some options.
var chart1 = new google.visualization.BarChart(document.getElementById('log_book_discrepancy'));
chart1.draw(data1, options1);
var chart2 = new google.visualization.BarChart(document.getElementById('bunkers_found'));
chart2.draw(data2, options2);  
  }
</script>

<div id="log_book_discrepancy" style="width:100%; height:340px;"></div>
<div id="bunkers_found" style="width:100%; height:340px;"></div>