Simple javascript question - 2 of same chart type on page

13 views
Skip to first unread message

RealEstateTecg

unread,
Sep 6, 2011, 11:59:45 AM9/6/11
to Google Visualization API
If I use JS I can put one of each chart type on the page without a
problem. But whenever I try to code a second chart of same type as
one of the other ones on the page nothing renders. Here's a sample of
what I'd look for.


<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is
loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Area');
data.addColumn('number', 'Place');
data.addRows([
['A', 4],
['B', 2],
['C', 1],
['Colington Harbour', 1],
['D', 6],

]);
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'Number of Bedrooms');
data2.addColumn('number', 'Bedrooms');
data2.addRows([
['2 Bedsroom', 5],
['3 Bedrooms', 7],
['4 Bedrooms', 6],
['5 Bedrooms', 9],

]);

var options = {'title':'New',
'width':550,
'height':350};


var options2 = {'title':'Number',
'legend':'none',
'is3d':'true',
'width':550,
'height':350};

var chart = new
google.visualization.PieChart(document.getElementById('chart_div'));
var chart2 = new
google.visualization.PieChart(document.getElementById('chart_div2'));

chart.draw(data, options);
chart2.draw(data2, options2);

}
</script>

<div id="chart_div"></div>
<div id="chart_div2"></div>

asgallant

unread,
Sep 6, 2011, 12:43:50 PM9/6/11
to google-visua...@googlegroups.com
Your code renders both charts in Chrome and Firefox 6 just fine for me.  IE 8 and 9 throw an error about the trailing commas in the arrays you pass to addRows, but once I fixed them both render the charts fine.  Is there any other code on your page that could be interfering?
Reply all
Reply to author
Forward
0 new messages