Re: Problem with loading multiple charts - inconsistent order every refresh

[asgallant]

The AJAX calls to google docs are not returned in any specific order, so you are never going to get them to line up using the method you built.  If you map x (from your for loop) to another variable via a closure and then pass that back to the handleQueryResponse function, you can probably get what you want (see here).  Using the for (var x in sources) method to loop over the array can give you problems, too, though.  Not all browsers support this method, and those that do are not guaranteed to iterate over all members of the array in the same order.  You also end up iterating over the methods and properties of array objects, which does you no good.  It is much safer to use for (var x = 0; x < sources.length; x++) as that will always iterate the same way in all browsers.

On Friday, August 31, 2012 1:21:37 AM UTC-4, X-Legs wrote:

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>

[X-Legs]

Thanks for the help. That did the trick.