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>
2 Answers
Reset to default 3There 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>
:-)