谷歌图表 API 问题

Question

I'm using PHP to make a call to Yahoo Finance's API for various financial markers. I've been graphing these using Google's Chart API. I have 4 charts which have always shown up until a few days ago. I can't figure out what's going on. It will only show one graph at a time. All of the data is being loaded successfully for all 4 graphs, but only show one graph. Any advice would be appreciated!

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<br>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Stock Index(%)');


  data.addRows([
    <?=$stockIndex?>
  ]);

  var options = {
    chart: {
      title: 'Stock Index',
    },
    width: 1100,
    height: 900
  };
  var chart = new google.charts.Line(document.getElementById('stocks'));
  chart.draw(data, options);
  }
  </script>



<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Stock Index(%)');
  data.addColumn('number', '12-Day EMA');  
  data.addColumn('number', '26-Day EMA');   

  data.addRows([
    <?=$stockTwelveTwentySix?>
  ]);

  var options = {
    chart: {
      title: 'Stock Index w/12-day and 26-day EMA',
    },
      width: 1100,
    height: 900
  };
  var chart = new google.charts.Line(document.getElementById('twelvetwentysixday'));
  chart.draw(data, options);
}
</script>

 <script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Stock Index(%)');
  data.addColumn('number', '12-Day EMA');    

  data.addRows([
    <?=$stockTwelve?>
  ]);

  var options = {
    chart: {
      title: 'Stock Index w/12-day EMA',
    },
     width: 1100,
    height: 900
  };
  var chart = new google.charts.Line(document.getElementById('twelvetwentyday'));
  chart.draw(data, options);
}
</script>

<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Stock Index(%)');
  data.addColumn('number', 'Lower BB');
  data.addColumn('number', 'Upper BB');    

  data.addRows([
    <?= $bb ?>
  ]);

  var options = {
    chart: {
      title: 'Stock Index w/Bollinger Band Comparisons',
    },
     width: 1100,
    height: 900
  };
  var chart = new google.charts.Line(document.getElementById('Bollinger'));
  chart.draw(data, options);
}

 </script>


<div id="stocks"></div>
<br>
<div id="twelvetwentyday"></div>
<br>
<div id="twelvetwentysixday"></div>
<br>
<div id="Bollinger"></div>

Answer 1

Solution is easy U will make only one callback.Dont write function for every chart. do it all in one function.

    google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Stock Index(%)');
  data.addRows([
    <?=$stockIndex?>
  ]);

  var options = {
    chart: {
      title: 'Stock Index',
    },
    width: 1100,
    height: 900
  };
  var chart = new google.charts.Line(document.getElementById('stocks'));
  chart.draw(data, options);


  var data2 = new google.visualization.DataTable();
  data2.addColumn('number', 'Day');
  data2.addColumn('number', 'Stock Index(%)');
  data2.addColumn('number', '12-Day EMA');  
  data2.addColumn('number', '26-Day EMA');   

  data2.addRows([
    <?=$stockTwelveTwentySix?>
  ]);

  var options2 = {
    chart: {
      title: 'Stock Index w/12-day and 26-day EMA',
    },
      width: 1100,
    height: 900
  };

  var chart2 = new google.charts.Line(document.getElementById('twelvetwentysixday'));
  chart2.draw(data2, options2);



  var data3 = new google.visualization.DataTable();
  data3.addColumn('number', 'Day');
  data3.addColumn('number', 'Stock Index(%)');
  data3.addColumn('number', '12-Day EMA');    

  data3.addRows([
    <?=$stockTwelve?>
  ]);

  var options3 = {
    chart: {
      title: 'Stock Index w/12-day EMA',
    },
     width: 1100,
    height: 900
  };
  var chart3 = new google.charts.Line(document.getElementById('twelvetwentyday'));
  chart3.draw(data3, options3);


  var data4 = new google.visualization.DataTable();
  data4.addColumn('number', 'Day');
  data4.addColumn('number', 'Stock Index(%)');
  data4.addColumn('number', 'Lower BB');
  data4.addColumn('number', 'Upper BB');    

  data4.addRows([
    <?= $bb ?>
  ]);

  var options4 = {
    chart: {
      title: 'Stock Index w/Bollinger Band Comparisons',
    },
     width: 1100,
    height: 900
  };
  var chart4 = new google.charts.Line(document.getElementById('Bollinger'));
  chart.draw(data4, options4);
  }

do it somthing like that .