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 <http://jsfiddle.net/asgallant/hHNLX/>). 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>
>
>
--
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/-/eh3WCQiFzyQJ.
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.
