Google live chart, Multiple charts on one page not drawn

Question

I want to show 2 line charts on the same page. However, only one is shwon. Can anyone have a look what I did wrong? If I remove either on of the lines chart24.draw or chart15.draw, the remaining charts is shown. When both should be shown, only the last one is appearing...

My code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> 
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />    
    <link rel="shortcut icon" href="./favicon.ico"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="http://www.google.com/jsapi"></script>        

<script type="text/javascript">

function drawCharts() {
    var data15 = google.visualization.arrayToDataTable([
      ['Minutes', 'Temperature', 'Wind','Rain'],
      [1,18,0,0],
      [2,18,2.5,1],
      [3,18,0,2],
      [4,18,0,0],
      [5,18,0,2],
      [6,18,0,2],
      [7,18,0,2],
      [8,18,0,5],
      [9,18,0,0],
      [10,18,0,5],
      [11,18,0,1],
      [12,18,0,1],
      [13,18,0,4],
      [14,18,0,0],
      [15,18,5,5] 
 ]);

   var options15 = {
    chart: {
      title: 'Data of the last 15 minutes',
    },
    backgroundColor: '#000000',
    width: 800,
    height: 300
  };


  var data24 = google.visualization.arrayToDataTable([
      ['Hours', 'Temperature', 'Wind','Rain'],
      [1,17,6,116],
      [2,17,4,156],
      [3,17,0,155],
      [4,17,0,108],
      [5,17,0,126],
      [6,17,53,113],
      [7,17,0,92],
      [8,17,2,99],
      [9,17,2,117],
      [10,17,5,115],
      [11,17,22,115],
      [12,18,2,115],
      [13,18,4,127],
      [14,18,8,104],
      [15,18,74,101],
      [16,19,107,79],
      [17,20,0,141],
      [18,21,27,157],
      [19,21,0,153],
      [20,21,3,110],
      [21,21,5,113],
      [22,21,10,155],
      [23,21,16,152],
      [24,20,9,109] 
 ]);

  var options24 = {
    chart: {
      title: 'Data of the last 24 Hours',
    },
    backgroundColor: '#000000',
    width: 800,
    height: 300
  };

  var chart24 = new google.charts.Line(document.getElementById('linechart24'));
  var chart15 = new google.charts.Line(document.getElementById('linechart15'));
  chart24.draw(data24, google.charts.Line.convertOptions(options24));
  chart15.draw(data15, google.charts.Line.convertOptions(options15));      
}

google.setOnLoadCallback(drawCharts);
google.load('visualization', '1', {'packages':['line']});
</script>
</head><body><center>
<div id="linechart15">15</div>
<div id="linechart24">24</div>
</center></body></html>

Answer 1

I think this is problem with material charts, you can use 'corechart' package or try this with delay:

google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawCharts);

function drawCharts() {
var data15 = google.visualization.arrayToDataTable([
  ['Minutes', 'Temperature', 'Wind','Rain'],
  [1,18,0,0],
  [2,18,2.5,1],
  [3,18,0,2],
  [4,18,0,0],
  [5,18,0,2],
  [6,18,0,2],
  [7,18,0,2],
  [8,18,0,5],
  [9,18,0,0],
  [10,18,0,5],
  [11,18,0,1],
  [12,18,0,1],
  [13,18,0,4],
  [14,18,0,0],
  [15,18,5,5] 
]);

var options15 = {
chart: {
  title: 'Data of the last 15 minutes',
},          
backgroundColor: '#000000',
width: 800,
height: 300
};


var data24 = google.visualization.arrayToDataTable([
  ['Hours', 'Temperature', 'Wind','Rain'],
  [1,17,6,116],
  [2,17,4,156],
  [3,17,0,155],
  [4,17,0,108],
  [5,17,0,126],
  [6,17,53,113],
  [7,17,0,92],
  [8,17,2,99],
  [9,17,2,117],
  [10,17,5,115],
  [11,17,22,115],
  [12,18,2,115],
  [13,18,4,127],
  [14,18,8,104],
  [15,18,74,101],
  [16,19,107,79],
  [17,20,0,141],
  [18,21,27,157],
  [19,21,0,153],
  [20,21,3,110],
  [21,21,5,113],
  [22,21,10,155],
  [23,21,16,152],
  [24,20,9,109] 
]);

var options24 = {
chart: {
  title: 'Data of the last 24 Hours',
},    
backgroundColor: '#000000',
width: 800,
height: 300
};


  var chart24 = new google.charts.Line(document.getElementById('linechart24'));
 doSetTimeOutDrawChart(chart24, data24, options24, 1);
  var chart15 = new google.charts.Line(document.getElementById('linechart15'));
 doSetTimeOutDrawChart(chart15, data15, options15, 50); 

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

https://jsfiddle.net/mblenton/ps9j3wwx/1/

Google live chart, Multiple charts on one page not drawn

Question

1 answers

solution1
0 2015-10-19 10:25:20

Google live chart, Multiple charts on one page not drawn

Question

1 answers

solution1 0 2015-10-19 10:25:20

solution1
0 2015-10-19 10:25:20