Multiple Google Charts in one weebly page (embedded in different areas)

Andrew F.

unread,

Mar 4, 2014, 7:48:11 PM3/4/14

to google-visua...@googlegroups.com

I have five pieces of code that I'd like to display on one web page in different areas. Unfortunately, only the last two entered will show up at any given time. Could anyone help with ideas for a fix? I'd be very grateful!

1)

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

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Beer', '%'],

['J. Marie', 2],

['River North White', 2],

['Anniversary Ale 2', 3],

['Hello, Darkness', 1],

['BPR', 2],

['Avarice', 1],

]);

var options = {

tooltip: { text:'percentage' },

title: 'Beers Sampled',

pieHole: 0.4,

};

var chart = new google.visualization.PieChart(document.getElementById('donutchart'));

chart.draw(data, options);

}

</script>

2)

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

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Category', 'Average', 'Median', 'Mode'],

['Visual Appeal', 3.9, 4, 3.5],

['Aromatic Appeal', 3.8, 4, 4.5],

['Taste/Flavor', 4.2, 4, 5],

['Overall Appeal', 4, 4, 4.5]

]);

var options = {

title: 'Voting Results',

legend: { position: 'bottom'},

vAxis: {title: 'Areas of Interest', titleTextStyle: {color: 'black'}}

};

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

chart.draw(data, options);

}

</script>

3)

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

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Beer', '%'],

['Avalanche Amber Ale', 10]

]);

var options = {

tooltip: { text:'percentage' },

title: 'Beers Sampled',

pieHole: 0.4,

};

var chart = new google.visualization.PieChart(document.getElementById('donutchart'));

chart.draw(data, options);

}

</script>

4)

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

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Category', 'Average', 'Median', 'Mode'],

['Visual Appeal', 3.8, 4, 4],

['Aromatic Appeal', 2.9, 2.5, 2.5],

['Taste/Flavor', 3.5, 4, 4],

['Overall Appeal', 3.1, 3, 3]

]);

var options = {

title: 'Voting Results',

legend: { position: 'bottom'},

vAxis: {title: 'Areas of Interest', titleTextStyle: {color: 'black'}}

};

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

chart.draw(data, options);

}

</script>

5)

<html>

<head>

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

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Category', 'Visual', 'Aromatic', 'Flavor/Taste', 'Overall',

{ role: 'annotation' } ],

['River North', 3.9, 3.8, 4.2, 4, ''],

['Breckenridge', 3.8, 2.9, 3.5, 3.1, ''],

]);

var options = {

title: 'Contest Results',

width: 408,

height: 306,

legend: { position: 'top', maxLines: 3 },

bar: { groupWidth: '75%' },

isStacked: true,

};

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

Daniel LaLiberte

unread,

Mar 4, 2014, 9:23:23 PM3/4/14

to google-visua...@googlegroups.com

Hi Andrew,

Here is the short and quick answer.

1. You should avoid calling google.load() more than one time, and you should only need to call it one time.

2. You can call google.setOnLoadCallback() more than once, but the function you give it, drawChart in your calls, needs to be different for each chart.

3. Your drawChart function definitions all are named the same, so each definition will replace the previous definition. You're lucky to get the last two charts drawn.

4. Your div element must have a unique id, one for each chart. You have 3 chart_divs and 2 donutcharts.

Fix those problems and you should get some better results. Hope that helps.

--
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/groups/opt_out.

--

Daniel LaLiberte - 978-394-1058

dlaliberte@Google.com 5CC, Cambridge MA

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

Andrew F.

unread,

Mar 4, 2014, 9:42:51 PM3/4/14

to google-visua...@googlegroups.com

Thanks Daniel!

Changing the div element ids corrected the problem at least temporarily. You've made my evening.

Cheers,

Andrew

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@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/groups/opt_out.

--
Daniel LaLiberte - 978-394-1058

dlali...@Google.com 5CC, Cambridge MA

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

Pedro V Teixeira

unread,

Jul 28, 2017, 7:09:42 AM7/28/17

to Google Visualization API

THANK YOU!!

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@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/groups/opt_out.

--
Daniel LaLiberte - 978-394-1058

dlali...@Google.com 5CC, Cambridge MA

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

Daniel LaLiberte

unread,

Jul 28, 2017, 9:05:23 AM7/28/17

to Google Visualization API

Upgrade to the new loader while you are at it: https://developers.google.com/chart/interactive/docs/basic_load_libs#update-library-loader-code

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@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/groups/opt_out.

--
Daniel LaLiberte - 978-394-1058

dlali...@Google.com 5CC, Cambridge MA

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

--
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-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/eb4744a6-3b7f-49be-b987-1fbfcda2baaf%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com 5CC, Cambridge MA

Reply all

Reply to author

Forward