Displaying multiple Google charts on same page

Question

I have looked into multiple google charts api, on same web page 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:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:'gauge','table', 'corechart']});
</script>

<script type='text/javascript'>
google.setOnLoadCallback(initialize);
function initialize()   
{

 function drawVisualization() {
            drawA();
            drawB();
        drawC();
                        } 

function drawA() {
    var data_PUE = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['PUE',<?php echo $r_PUE['PUE']; ?> ]  ]);

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',<?php echo $r_EDF_CEC['CEC']; ?> ]   ]);

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',<?php echo $r_EDF_LEC['LEC']; ?> ]   ]);

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);
        }
}

    </script>

<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>
<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>
<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>

Answer 1

There is an error here:

<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>
<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>
<div id="chart_div" style="width: 200px; height: 150px;"></div>

I'm pretty sure you mean chart_div, chart_div1, chart_div2

Debugging in firebug brings another error:

google.load('visualization', '1', {packages:'gauge','table', 'corechart']});

It should be

google.load('visualization', '1', {packages:['gauge','table', 'corechart']});

And lastly, the function initialize() will do nothing because there is another function called drawVisualization() that was made which would do the drawing for you. Either call drawVisualization() or just remove that function declaration.

http://jsbin.com/xerewuva/1/edit

Answer 2

Your div id's at the bottom of your code are all called "chart_div" but your document.getElementById's are set to:

document.getElementById('chart_div')
document.getElementById('chart_div1')
document.getElementById('chart_div2')

change your div id's to match:

<div id="chart_div" style="width: 200px; height: 150px;"></div>
<div id="chart_div1" style="width: 200px; height: 150px;"></div>
<div id="chart_div2" style="width: 200px; height: 150px;"></div>

:-)