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>