Hello!
I am attempting to draw eight Google bar charts on one page: two per row,
with four rows.
I was able to draw two charts on one row, but I cannot figure out how to
add additional rows of the same type of chart. When I attempted to add
additional rows of charts, all charts disappeared.
Here is my code for the two bar charts on one row (Note I'm a total
beginner at all of this):
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js";></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var query1= new
google.visualization.Query("https://docs.google.com/spreadsheets/d/1fftN5LIwU-xvaZKLCO5WMJu_Sy9CxPceZ1vmucqm8TU/edit#gid=0?range=A1:C10";);
query1.send(handleQueryResponse1);
var query2 = new
google.visualization.Query("https://docs.google.com/spreadsheets/d/1SrF-uFSspEsdTWow6kAstEcOvB0bPUa7WPEF2lJdYQk/edit#gid=0?range=A1:C10";);
query2.send(handleQueryResponse2);
}
function handleQueryResponse1(response) {
var data = response.getDataTable();
var chart = new
google.visualization.BarChart(document.getElementById('student_chart1'));
var options = {
isStacked: 'percent',
title: 'School Year 2016-17 Baseline: pre-SBRI',
curveType: 'function',
legend: { position: 'bottom' },
colors: ['red', 'green'],
pointSize: 20,
series: {
vAxis: {format: 'percent'},
hAxis: { minValue: '2012-13', maxValue: '2016-17' }
}
};
chart.draw(data, options);
}
function handleQueryResponse2(response) {
var data = response.getDataTable();
var chart = new
google.visualization.BarChart(document.getElementById('student_chart2'));
var options = {
isStacked: 'percent',
title: 'School Year 2017-18 Year one of SBRI',
curveType: 'function',
legend: { position: 'bottom' },
colors: ['red', 'green'],
pointSize: 20,
series: {
vAxis: {format: 'percent'},
hAxis: { minValue: '2012-13', maxValue: '2016-17' }
}
};
chart.draw(data, options);
}
</script>
</head>
<body>
<table class="columns">
<tr>
<td><div id="student_chart1" style="width: 700px; height:
700px"></div></td>
<td><div id="student_chart2" style="width: 700px; height:
700px"></div></td>
</tr>
</table>
</body>
</html>
Thank you!
--
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 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/a9caac2d-6030-4cb1-a387-f8601ecb6b6f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
