title: Displaying multiple Google charts on same page
body: <p>I have looked into <a href="https://stackoverflow.com/questions/11408636/multiple-google-charts-api-on-same-web-page">multiple google charts api, on same web page</a> and couple of other URLs but invain. I am not able to load multiple / even single google chart on my page. Single chart would come easily but as soon as I enter other charts all of them will go. My google chart is inside the php script. The values are pulled successfully from the database, however google charts won't load. Dont know the error. Any help is appreciated. The code is as below:</p>
  
  <pre><code>&lt;script type='text/javascript' src='https://www.google.com/jsapi'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
  google.load('visualization', '1', {packages:'gauge','table', 'corechart']});
  &lt;/script&gt;
  
  &lt;script type='text/javascript'&gt;
  google.setOnLoadCallback(initialize);
  function initialize()   
  {
  
   function drawVisualization() {
              drawA();
              drawB();
          drawC();
                          } 
  
  function drawA() {
      var data_PUE = google.visualization.arrayToDataTable([
            ['Label', 'Value'],
            ['PUE',&lt;?php echo $r_PUE['PUE']; ?&gt; ]  ]);
  
  var options_PUE =   {
            width : 800,
            height :  240,
            redFrom: 2.5, redTo: 5,
            yellowFrom:1.5, yellowTo: 2.5,
            greenFrom:0, greenTo: 1.5,
            minorTicks: 1,
            max:5
                  };
  var chart = new google.visualization.Gauge(document.getElementById('chart_div'));   
  chart.draw(data_PUE, options_PUE);
          }
  
  function drawB() {  
      var data_CEC = google.visualization.arrayToDataTable([
            ['Label', 'Value'],
            ['CEC',&lt;?php echo $r_EDF_CEC['CEC']; ?&gt; ]   ]);
  
  var options_CEC =   {
            width : 120,
            height :  120,
            redFrom: 1, redTo: 3,
            yellowFrom:.5, yellowTo: 1,
            greenFrom:0, greenTo: .5,
            minorTicks: .5,
            max:3
                  };
      var chart1 = new google.visualization.Gauge(document.getElementById('chart_div1')); 
      chart1.draw(data_CEC, options_CEC);
          }
  
  function drawC() {
      var data_LEC = google.visualization.arrayToDataTable([
            ['Label', 'Value'],
            ['LEC',&lt;?php echo $r_EDF_LEC['LEC']; ?&gt; ]   ]);
  
  var options_LEC =   {
            width : 120,
            height :  120,
            redFrom: .05, redTo: .1,
            yellowFrom:.01, yellowTo: .05,
            greenFrom:0, greenTo: .01,
            minorTicks: .01,
            max:.05
                  };
      var chart2 = new google.visualization.Gauge(document.getElementById('chart_div2'));    
      chart2.draw(data_LEC,options_LEC);
          }
  }
  
      &lt;/script&gt;
  
  &lt;div id="chart_div" style="width: 200px; height: 150px;"&gt;&lt;/div&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;div id="chart_div" style="width: 200px; height: 150px;"&gt;&lt;/div&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;div id="chart_div" style="width: 200px; height: 150px;"&gt;&lt;/div&gt;
  &lt;p&gt;&lt;/p&gt;
  </code></pre>