JSFiddle - React, Tailwind, and code Playground

by mblenton

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="log_book_discrepancy" style="width:100%; height:340px;"></div>
<div id="bunkers_found" style="width:100%; height:340px;"></div>

JavaScript

google.load("visualization", "1.1", {packages:["bar"]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
	    var data1 = new google.visualization.arrayToDataTable([
		    ['Metric Tonnes', 'HSFO', 'LSFO', 'MGO'],
		    ['BULK CARRIER', 30, 40, 40],
		    ['OIL TANKER', 60, 40, 45]
	    ]);
	    var data2 = new 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,
        },
        bars: 'horizontal' // Required for Material Bar Charts.
      };
      var options2 = {
      title: 'Bunkers Found',
        chartArea: {width: '50%'},
        hAxis: {
          title: 'HSFO, LSFO, and MGO',
          minValue: 0,
        },
        bars: 'horizontal' // Required for Material Bar Charts.
      };    
     var chart1 = new google.charts.Bar(document.getElementById('log_book_discrepancy'));
     var chart2 = new google.charts.Bar(document.getElementById('bunkers_found'));
        doSetTimeOutDrawChart(chart1, data1, options1, 1);
		doSetTimeOutDrawChart(chart2, data2, options2, 100);
    }

function doSetTimeOutDrawChart(chart, data, options, delay){
    setTimeout(function () { 
        chart.draw(data, google.charts.Bar.convertOptions(options));
    }, delay);
}