Bar chart not drawing - when using function called from button clicks

PJ

unread,

Jan 16, 2015, 6:04:41 PM1/16/15

to google-visua...@googlegroups.com

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.

<head>

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

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

</script>

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 >

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Daniel LaLiberte

unread,

Jan 17, 2015, 12:27:23 PM1/17/15

to google-visua...@googlegroups.com

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

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
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

dlaliberte@Google.com 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Paul Jackson

unread,

Jan 17, 2015, 5:07:18 PM1/17/15

to google-visua...@googlegroups.com

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 google-visualizati...@googlegroups.com.

Paul Jackson

unread,

Jan 17, 2015, 5:07:50 PM1/17/15

to google-visua...@googlegroups.com

Thanks very much. I'll give that a go.

On 17 Jan 2015, at 17:27, 'Daniel LaLiberte' via Google Visualization API <google-visua...@googlegroups.com> wrote:

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 google-visualizati...@googlegroups.com.

Reply all

Reply to author

Forward