Thanks very much. I'll give that a go.
> On 17 Jan 2015, at 17:27, 'Daniel LaLiberte' via Google Visualization API > <[email protected]> wrote: > > Hi Paul, > > Inspecting your code, it looks like the main problem is that you are calling > google.load twice, and after the first one finishes, your onLoadCallback > functions will all be called, but the bar chart code has not yet been loaded. > Combine them in to one google.load call, and you should be good. > > google.load('visualization', '1', {packages: ['corechart', 'gauge']}); > > >> On Fri, Jan 16, 2015 at 6:04 PM, PJ <[email protected]> wrote: >> 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. > > > > -- > Daniel LaLiberte - 978-394-1058 > [email protected] 5CC, Cambridge MA > [email protected] 9 Juniper Ridge Road, Acton MA > -- > You received this message because you are subscribed to a topic in the Google > Groups "Google Visualization API" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/google-visualization-api/FPat3Fn-B64/unsubscribe. > To unsubscribe from this group and all its topics, 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. -- 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.
