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

0
votes

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>
1
javascriptgoogle-visualization
Do you get any errors in the console. What happens if you add a 3rd chart (a copy of one of the other two)? - Halcyon
@Halcyon No errors in the console. If I add a third, and fourth for that matter, it still only displays 1. Even stranger though is that if I add a third now chrome displays only the line chart as well. - Flatlyn
I made a JSFiddle. It works fine for me: jsfiddle.net/asoe1o1x screencap: imgur.com/a/V8SkJ - Halcyon
@Halcyon I just created a jsfiddle and it works there so the issue must be something else on my page. - Flatlyn
@Halcyon I've just tested it further and it seems whatever chart.draw() comes first will render and the other won't. It doesn't seem to be an issue on JsFiddle though. - Flatlyn

1 Answers

1
votes

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>