Google Charts API - Only one chart rendered on page with two charts

Question

I'm trying to include 2 charts in a page. One is a line chart, the other is a scatter. I've followed the guide on the Google Charts' API for implementing multiple charts on a single page, using a single call-back function however at any given time only one of the charts will appear. The really strange part is that it's the left line chart that appears on Safari and the right Scatter chart that appears on Chrome.

The code for the chart creation in the head section is as follows.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script>
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var dataLine = google.visualization.arrayToDataTable([
      ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
      ['15:00', 728, 1065, 112, 73 , 12, 134],
      ['16:00', 943, 1056, 122, 112 , 9, 116],
      ['17:00', 1280, 1069, 156, 99 , 26, 196],
      ['18:00', 1276, 1277, 154, 134 , 9, 204],
      ['19:00', 1235, 984, 84, 109 , 10, 134],
      ['20:00', 1133, 1028, 83, 74 , 20, 73],
      ['21:00', 938, 1018, 191, 49 , 33, 66],
      ['22:00', 1038, 952, 163, 72 , 27, 79],
      ['23:00', 851, 807, 156, 57 , 11, 79],
      ['00:00', 390, 455, 89, 24 , 9, 41],
      ['01:00', 195, 270, 13, 13 , 5, 13],
      ['02:00', 92, 140, 18, 2 , 0, 7],
      ['03:00', 86, 73, 7, 2 , 1, 2],
      ['04:00', 136, 49, 8, 3 , 1, 8],
      ['05:00', 99, 86, 10, 3 , 0, 5],
      ['06:00', 230, 200, 15, 8 , 5, 12],
      ['07:00', 531, 461, 49, 39 , 4, 40],
      ['08:00', 605, 683, 152, 67 , 13, 96],
      ['09:00', 528, 800, 111, 78 , 17, 53],
      ['10:00', 716, 885, 75, 68 , 14, 76],
      ['11:00', 1102, 768, 66, 50 , 15, 46],
      ['12:00', 1015, 695, 41, 47 , 18, 49],
      ['13:00', 856, 624, 52, 95 , 18, 73],
      ['14:00', 779, 524, 32, 30 , 21, 70]
    ]);

    var optionsLine = {
      title: '',
      curveType: 'function',
      legend: { position: 'bottom' },
      colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
      theme: 'material',
      vAxis: {
      viewWindow: {
        min: 0
      }
    },
    };

    var dataScatter = google.visualization.arrayToDataTable([
      ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
      ['15:00', 0.158333, 0.186111, 0.191667, 0.0708333 , 0.1625, 0.202827],
      ['16:00', 0.0194444, 0.155417, 0.199306, 0.183333 , 0.5, 0.15],
      ['17:00', 0.147917, 0.161146, 0.227083, 0.154861 , 0.120833, 0.178393],
      ['18:00', -0.003125, 0.151515, 0.123214, 0.234524 , 0.388333, 0.228571],
      ['19:00', 0.125, 0.179762, 0.116667, 0.207292 , -0.075, 0.207143],
      ['20:00', 0.125, 0.183333, 0.171591, 0.179167 , 0.45, 0.114881],
      ['21:00', 0.110795, 0.2, 0.200379, 0.15625 , 0.18925, 0.198611],
      ['22:00', 0.105787, 0.175, 0.233333, 0.179167 , 0.0171131, 0.1625],
      ['23:00', 0.0146465, 0.183333, 0.159091, 0 , 0.0680556, 0.202313],
      ['00:00', 0.0675, 0.176736, 0.113021, 0.166667 , 0.350758, 0.187946],
      ['01:00', 0.0162698, 0.158333, 0.251711, -0.227778 , -0.3625, 0.0964286],
      ['02:00', 0.145, 0.215625, 0.24375, -0.0729167 , 0, 0.447619],
      ['03:00', 0.145509, 0.22128, 0.159091, 0 , -0.2, 0],
      ['04:00', 0.104167, 0.158333, 0.16875, 0.35 , 0, 0.111111],
      ['05:00', 0.0127946, 0.05, -0.426042, 0.325 , 0, 0.0638889],
      ['06:00', 0.146875, 0.0708333, -0.221429, 0.05 , 0, 0.273214],
      ['07:00', 0.1125, 0.184722, -0.0253472, 0.258333 , -0.35, 0.161354],
      ['08:00', 0.133333, 0.190972, 0.141667, 0.244048 , 0.358929, 0.186458],
      ['09:00', 0.128355, 0.188988, 0.13, 0.181061 , 0.0425, 0.257552],
      ['10:00', 0.1, 0.196875, 0.147112, -0.0464286 , -0.161458, 0.26875],
      ['11:00', 0.136364, 0.174826, 0.285714, 0.290476 , 0.31875, 0.275],
      ['12:00', -0.00357143, 0.172222, 0.199657, 0.1625 , 0.215, 0.159375],
      ['13:00', -0.1, 0.2, 0.195312, 0.0791667 , -0.246296, 0.183333],
      ['14:00', -0.00357143, 0.180303, 0.11125, 0.35 , 0.0081229, 0.19881]
    ]);

    var optionsScatter = {
      title: '',
      vAxis: { minValue: -1.0, maxValue: 1.0},
      colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
      theme: 'material',
      legend: {position: 'bottom'}
    };


var chartLine = new google.visualization.LineChart(document.getElementById('chart_1'));

chartLine.draw(dataLine, optionsLine);

var chartScatter = new google.visualization.ScatterChart(document.getElementById('chart_2'));

chartScatter.draw(dataScatter, optionsScatter);
}
</script>

Answer 1

It would appear the chart.draw function can only be called one at a time but since it's asynchronous it returns instantly and tried to call the second one straight away. The answer is to use the google.visualization.events.addOneTimeListener() to call the second chart.draw after the first.

Finished Code:

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

  function drawChart() {
    var dataLine = google.visualization.arrayToDataTable([
      ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
      ['21:00', 938, 1018, 191, 49 , 33, 66],
      ['22:00', 1038, 952, 163, 72 , 27, 79],
      ['23:00', 851, 807, 156, 57 , 11, 79],
      ['00:00', 390, 455, 89, 24 , 9, 41],
      ['01:00', 195, 270, 13, 13 , 5, 13],
      ['02:00', 92, 140, 18, 2 , 0, 7],
      ['03:00', 86, 73, 7, 2 , 1, 2],
      ['04:00', 136, 49, 8, 3 , 1, 8],
      ['05:00', 99, 86, 10, 3 , 0, 5],
      ['06:00', 230, 200, 15, 8 , 5, 12],
      ['07:00', 531, 461, 49, 39 , 4, 40],
      ['08:00', 605, 683, 152, 67 , 13, 96],
      ['09:00', 528, 800, 111, 78 , 17, 53],
      ['10:00', 716, 885, 75, 68 , 14, 76],
      ['11:00', 1102, 768, 66, 50 , 15, 46],
      ['12:00', 1015, 695, 41, 47 , 18, 49],
      ['13:00', 856, 624, 52, 95 , 18, 73],
      ['14:00', 779, 524, 32, 30 , 21, 70],
      ['15:00', 587, 533, 30, 161 , 19, 46],
      ['16:00', 580, 566, 59, 78 , 13, 56],
      ['17:00', 1041, 658, 23, 67 , 13, 39],
      ['18:00', 1835, 807, 22, 72 , 7, 65],
      ['19:00', 1603, 630, 35, 116 , 9, 126],
      ['20:00', 1898, 614, 26, 135 , 11, 110]
    ]);

    var optionsLine = {
      title: '',
      curveType: 'function',
      legend: { position: 'bottom' },
      colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
      theme: 'material',
      vAxis: {
      viewWindow: {
        min: 0
      }
    },
    };

    var dataScatter = google.visualization.arrayToDataTable([
      ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
      ['21:00', 0.110795, 0.2, 0.200379, 0.15625 , 0.18925, 0.198611],
      ['22:00', 0.105787, 0.175, 0.233333, 0.179167 , 0.0171131, 0.1625],
      ['23:00', 0.0146465, 0.183333, 0.159091, 0 , 0.0680556, 0.202313],
      ['00:00', 0.0675, 0.176736, 0.113021, 0.166667 , 0.350758, 0.187946],
      ['01:00', 0.0162698, 0.158333, 0.251711, -0.227778 , -0.3625, 0.0964286],
      ['02:00', 0.145, 0.215625, 0.24375, -0.0729167 , 0, 0.447619],
      ['03:00', 0.145509, 0.22128, 0.159091, 0 , -0.2, 0],
      ['04:00', 0.104167, 0.158333, 0.16875, 0.35 , 0, 0.111111],
      ['05:00', 0.0127946, 0.05, -0.426042, 0.325 , 0, 0.0638889],
      ['06:00', 0.146875, 0.0708333, -0.221429, 0.05 , 0, 0.273214],
      ['07:00', 0.1125, 0.184722, -0.0253472, 0.258333 , -0.35, 0.161354],
      ['08:00', 0.133333, 0.190972, 0.141667, 0.244048 , 0.358929, 0.186458],
      ['09:00', 0.128355, 0.188988, 0.13, 0.181061 , 0.0425, 0.257552],
      ['10:00', 0.1, 0.196875, 0.147112, -0.0464286 , -0.161458, 0.26875],
      ['11:00', 0.136364, 0.174826, 0.285714, 0.290476 , 0.31875, 0.275],
      ['12:00', -0.00357143, 0.172222, 0.199657, 0.1625 , 0.215, 0.159375],
      ['13:00', -0.1, 0.2, 0.195312, 0.0791667 , -0.246296, 0.183333],
      ['14:00', -0.00357143, 0.180303, 0.11125, 0.35 , 0.0081229, 0.19881],
      ['15:00', 0.1375, 0.180556, 0.0840909, 0.183333 , -0.01875, 0.0875],
      ['16:00', 0.131548, 0.19375, -0.25, 0.175 , 0.189286, 0.0375],
      ['17:00', 0.118182, 0.146429, 0.0878472, 0.325 , 0.199107, 0.205],
      ['18:00', 0.1, 0.165057, 0.338542, 0.0277778 , -0.1125, 0.275],
      ['19:00', -0.00793651, 0.0125654, 0.119444, 0.266667 , 0.0309722, 0.3],
      ['20:00', -0.0166667, 0.196044, 0.239583, 0.373295 , 0.00625, 0.4375]
    ]);

    var optionsScatter = {
      title: '',
      vAxis: { minValue: -1.0, maxValue: 1.0},
      colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
      theme: 'material',
      legend: {position: 'bottom'}
    };


    var chartScatter = new google.visualization.ScatterChart(document.getElementById('chart_2'));

    google.visualization.events.addOneTimeListener(chartScatter, 'ready', function(){
         //render chart2 once chart1 is rendered
         var chartLine = new google.visualization.LineChart(document.getElementById('chart_1'));

         chartLine.draw(dataLine, optionsLine);
    });


    chartScatter.draw(dataScatter, optionsScatter);

}
</script>