I am not a programmer, so apologies for any poor code. bar3 doesn't load, but the two gauge charts work fine, and update with animation. I would like the same animation delay for the bar chart, but first i would like the bar chart to appear :-) Thanks in advance.
<html xmlns="http://www.w3.org/1999/xhtml";> <head> <script type="text/javascript" src="http://www.google.com/jsapi";></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['gauge']}); google.load("visualization", '1', {packages:['corechart']}); </script> <script type="text/javascript"> var gauge; var gaugeData; var gaugeOptions; function drawGauge() { gaugeData = new google.visualization.DataTable(); gaugeData.addColumn('number', 'Engine'); gaugeData.addColumn('number', 'Torpedo'); gaugeData.addRows(2); gaugeData.setCell(0, 0, 120); gaugeData.setCell(0, 1, 80); gauge = new google.visualization.Gauge(document.getElementById('gauge')); gaugeOptions = { min: 0, max: 280, yellowFrom: 200, yellowTo: 250, redFrom: 250, redTo: 280, minorTicks: 5 }; gauge.draw(gaugeData, gaugeOptions); } var bar3; var barData3; var barOptions3; function drawBar3() { barData3 = new google.visualization.DataTable(); barData3.addColumn('String','Lab'); barData3.addColumn('Number','perce'); barData3.addRows(3); barData3.setCell(0, 'Att1', 8); barData3.setCell(0, 'Att2', 8); barData3.setCell(0, 'Att3', 8); bar3 = new google.visualization.BarChart(document.getElementById('bar3')); barOptions3 = { width:900, height:500 }; bar3.draw(barData3, barOptions3); } var gauge2; var gaugeData2; var gaugeOptions2; function drawGauge2() { gaugeData2 = new google.visualization.DataTable(); gaugeData2.addColumn('number', 'Engine'); gaugeData2.addColumn('number', 'Torpedo'); gaugeData2.addRows(2); gaugeData2.setCell(0, 0, 120); gaugeData2.setCell(0, 1, 80); gauge2 = new google.visualization.Gauge(document.getElementById('gauge2')); gaugeOptions2 = { min: 0, max: 280, yellowFrom: 200, yellowTo: 250, redFrom: 250, redTo: 280, minorTicks: 5 }; gauge2.draw(gaugeData2, gaugeOptions2); } function changeTemp0() { gaugeData.setValue(0, 0, 150); gaugeData.setValue(0, 1, 150); gauge.draw(gaugeData, gaugeOptions); gaugeData2.setValue(0, 0, 150); gaugeData2.setValue(0, 1, 150); gauge2.draw(gaugeData2, gaugeOptions2); barData3.setValue(0, 8); barData3.setValue(0, 9); barData3.setValue(0, 10); bar3.draw(barData3, barOptions3); } function changeTemp1() { gaugeData.setValue(0, 0, 150); gaugeData.setValue(0, 1, 150); gauge.draw(gaugeData, gaugeOptions); gaugeData2.setValue(0, 0, 150); gaugeData2.setValue(0, 1, 150); gauge2.draw(gaugeData2, gaugeOptions2); barData3.setValue(0, 8); barData3.setValue(0, 9); barData3.setValue(0, 10); bar3.draw(barData3, barOptions3); } function changeTemp2() { gaugeData.setValue(0, 0, 199); gaugeData.setValue(0, 1, 200); gauge.draw(gaugeData, gaugeOptions); gaugeData2.setValue(0, 0, 199); gaugeData2.setValue(0, 1, 202); gauge2.draw(gaugeData2, gaugeOptions2); barData3.setValue(0, 9); barData3.setValue(0, 10); barData3.setValue(0, 11); bar3.draw(barData3, barOptions3); } google.setOnLoadCallback(drawGauge); google.setOnLoadCallback(drawGauge2); google.setOnLoadCallback(drawBar3); </script> </head> <body > <input type="button" value="S1" onclick="changeTemp1();" /> <input type="button" value="S2" onclick="changeTemp2()" /> <table> <tr> <td><div id="gauge" style="width: 300px; height: 300px;"></div></td> </tr> <tr> <td><div id="bar3" style="width: 300px; height: 300px;"></div></td> </tr> <tr> <td><div id="gauge2" style="width: 300px; height: 300px;"></div></td> </tr> </table> </body> </html> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
