javascript - Displaying multiple Google charts on same page - Stack Overflow

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 e 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=''></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>

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 e 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./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>

• javascript
• php
• google-visualization

Share Improve this question Follow edited May 23, 2017 at 12:17 CommunityBot 111 silver badge asked Mar 29, 2014 at 3:49 rishi jainrishi jain 1,64022 gold badges2121 silver badges2727 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./xerewuva/1/edit

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>

:-)