I have a google spreadsheet with 10 pie charts worth of data. I want to
draw all of them on the same page. I have code that does this, but the
charts never appear in a consistent order. (A different chart loads into
the same div each time). This is because (I imagine) data is fetched
asynchronously. I am not too experienced with JS, but is there a way to
make the charts load so that sources[0] loads into <div id="chart1"> and so
on.
*Relevant JS - Charts draw in different order each time
load() is called from HTML file*
----------------------------------------------------------------------------------
function load() {
// 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(initialize);
}
function initialize() {
// Replace the data source URL on next line with your data source URL.
// Specify that we want to use the XmlHttpRequest object to make the query.
var sources = [
'https://docs.google.com/spreadsheet/tq?range=A2%3AB21&key=0Ap-OUO6w-ZMhdC15aElBNzNxNk1JSlNhRzhOd000NGc&gid=1',
'https://docs.google.com/spreadsheet/tq?range=A23%3AB42&key=0Ap-OUO6w-ZMhdC15aElBNzNxNk1JSlNhRzhOd000NGc&gid=1',
'https://docs.google.com/spreadsheet/tq?range=A44%3AB63&key=0Ap-OUO6w-ZMhdC15aElBNzNxNk1JSlNhRzhOd000NGc&gid=1',
'https://docs.google.com/spreadsheet/tq?range=A65%3AB84&key=0Ap-OUO6w-ZMhdC15aElBNzNxNk1JSlNhRzhOd000NGc&gid=1',
'https://docs.google.com/spreadsheet/tq?range=A86%3AB105&key=0Ap-OUO6w-ZMhdC15aElBNzNxNk1JSlNhRzhOd000NGc&gid=1',
'https://docs.google.com/spreadsheet/tq?range=A106%3AB125&key=0Ap-OUO6w-ZMhdC15aElBNzNxNk1JSlNhRzhOd000NGc&gid=1',
'https://docs.google.com/spreadsheet/tq?range=A127%3AB146&key=0Ap-OUO6w-ZMhdC15aElBNzNxNk1JSlNhRzhOd000NGc&gid=1',
'https://docs.google.com/spreadsheet/tq?range=A148%3AB167&key=0Ap-OUO6w-ZMhdC15aElBNzNxNk1JSlNhRzhOd000NGc&gid=1',
'https://docs.google.com/spreadsheet/tq?range=A169%3AB188&key=0Ap-OUO6w-ZMhdC15aElBNzNxNk1JSlNhRzhOd000NGc&gid=1',
'https://docs.google.com/spreadsheet/tq?range=A190%3AB209&key=0Ap-OUO6w-ZMhdC15aElBNzNxNk1JSlNhRzhOd000NGc&gid=1'
];
for (var x in sources) {
var query = new google.visualization.Query(sources[x]);
// Send the query with a callback function.
query.send(handleQueryResponse);
}
}
function handleQueryResponse(response) {
if ( typeof handleQueryResponse.counter == 'undefined' ) {
// It has not... perform the initilization
handleQueryResponse.counter = 1;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var id = "chart" + handleQueryResponse.counter;
handleQueryResponse.counter++;
var data = response.getDataTable();
var chart = new google.visualization.PieChart(document.getElementById(id));
chart.draw(data, {width: 400, height: 240, is3D:
true,backgroundColor:'transparent'});
}
*Relevant HTML - located at bottom of page*
---------------------------------------
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<div id="chart4"></div>
<div id="chart5"></div>
<div id="chart6"></div>
<div id="chart7"></div>
<div id="chart8"></div>
<div id="chart9"></div>
<div id="chart10"></div>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi";></script>
<script type="text/javascript" src="js/charts.js"></script>
<script type="text/javascript">load();</script>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/VCNYZTjZAfkJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
