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>

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, Jun 16 '17 at 15:12
@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, Jun 16 '17 at 15:16
I made a JSFiddle. It works fine for me: https://jsfiddle.net/asoe1o1x/ screencap: http://imgur.com/a/V8SkJ — Halcyon, Jun 16 '17 at 15:18
@Halcyon I just created a jsfiddle and it works there so the issue must be something else on my page. — Flatlyn, Jun 16 '17 at 15:27
@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, Jun 16 '17 at 15:45
@WhiteHat There is a couple of other scripts actually. One is using document.Ready. — Flatlyn, Jun 16 '17 at 20:29
@WhiteHat I tried changing it to put the other stuff in a separate function and call that function from the drawChart() one the callback calls but it doesn't make a difference — Flatlyn, Jun 16 '17 at 20:43
@Halcyon Solved it via – https://stackoverflow.com/questions/32944886/google-charts-stops-drawing-after-first-chart — Flatlyn, Jun 16 '17 at 20:51

score 1 · Accepted Answer · answered Jun 16 '17 at 21:04

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>

The chart draw function(s) can be called more than one at a time. There should not be any interference between the multiple drawings unless, possibly, you are sharing data or options, which you are not. Others have said they could get your example to work in jsfiddle, so I don't know why you should need to chain them. Maybe it is something about your html, or other things on the page. By the way, the ScatterChart is a 'corechart', so you don't need to load 'scatter' for it. — dlaliberte, Jun 16 '17 at 23:31
@dlaliberte it seems to be a time issue. You can call more than one chart.draw() but it doesn't like it if the first isn't finished before the second one. The server is fairly slow and bandwidth limits are fairly low so I think that may have been causing the issue as when I run the same code on a faster server it works fine. — Flatlyn, Jun 16 '17 at 23:40

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

1 Answers1