Thanks for the help. That did the trick. On Friday, August 31, 2012 8:59:57 AM UTC-7, asgallant wrote: > > 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/-/HFpu04R4gVUJ. 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.
