After building a jsfiddle based on your code, I noticed two things: 1) the URL is incorrect for querying the spreadsheet; you need to make a few minor changes (change "pub" to "tq" and remove everything after the key value) 2) the spreadsheet isn't published, so users who aren't logged in to google docs and have read access cannot query the spreadsheet; you have to publish the sheet
Here's the fiddle with the corrections: http://jsfiddle.net/asgallant/HUrHE/ On Tuesday, June 4, 2013 5:34:56 PM UTC-4, asgallant wrote: > > If I read what your problem is correctly, you are trying to hook up your > existing code to a google spreadsheet, right? If so, then assuming the > rest of your code works, all you need to do is replace the manually > constructed DataTable with the one returned by the query. > > On Tuesday, June 4, 2013 4:55:29 PM UTC-4, [email protected]: >> >> Thank you for your help- would you mind elaborating a bit? not sure what >> you mean >> >> On Tuesday, June 4, 2013 3:51:35 PM UTC-4, [email protected]: >>> >>> I am trying to create a stepped area chart that changes view window >>> (i.e. next, previous and zoom buttons) which is doable, but Instead of the >>> data being in the code I'm trying to link the code to a google spreadsheet >>> through a query and query language, code does'nt seem to work though. It >>> would really help if an expert could check it out and let me know what's >>> wrong: >>> >>> function drawVisualization() { >>> var query = new google.visualization.Query( >>> ' >>> https://docs.google.com/spreadsheet/pub?key=0AuDNshaENLWidEhnZzhZUm43bDhFQzk4akNsa0pCS1E&single=true&gid=0&output=html' >>> ); >>> >>> // Apply query language. >>> query.setQuery("SELECT AC,AD WHERE AC >= date '2006-12-31' and AC <= >>> date '2013-4-30' ORDER BY AC"); >>> >>> // Send the query with a callback function. >>> query.send(handleQueryResponse); >>> } >>> >>> function handleQueryResponse(response) { >>> if (response.isError()) { >>> alert('Error in query: ' + response.getMessage() + ' ' + >>> response.getDetailedMessage()); >>> return; >>> } >>> >>> >>> var options = { >>> width: 400, >>> height: 240, >>> animation: { >>> duration: 1000, >>> easing: 'in' >>> }, >>> hAxis: {viewWindow: {min:0, max:5}} >>> }; >>> >>> var chart = new google.visualization.SteppedAreaChart( >>> document.getElementById('visualization')); >>> var data = new google.visualization.DataTable(); >>> data.addColumn('string', 'x'); >>> data.addColumn('number', 'y'); >>> var MAX = 10; >>> for (var i = 0; i < MAX; ++i) { >>> data.addRow([i.toString(), Math.floor(Math.random() * 100)]); >>> } >>> var prevButton = document.getElementById('b1'); >>> var nextButton = document.getElementById('b2'); >>> var changeZoomButton = document.getElementById('b3'); >>> function drawChart() { >>> // Disabling the button while the chart is drawing. >>> prevButton.disabled = true; >>> nextButton.disabled = true; >>> changeZoomButton.disabled = true; >>> google.visualization.events.addListener(chart, 'ready', >>> function() { >>> prevButton.disabled = options.hAxis.viewWindow.min <= 0; >>> nextButton.disabled = options.hAxis.viewWindow.max >= MAX; >>> changeZoomButton.disabled = false; >>> }); >>> chart.draw(data, options); >>> } >>> >>> prevButton.onclick = function() { >>> options.hAxis.viewWindow.min -= 1; >>> options.hAxis.viewWindow.max -= 1; >>> drawChart(); >>> } >>> nextButton.onclick = function() { >>> options.hAxis.viewWindow.min += 1; >>> options.hAxis.viewWindow.max += 1; >>> drawChart(); >>> } >>> var zoomed = false; >>> changeZoomButton.onclick = function() { >>> if (zoomed) { >>> options.hAxis.viewWindow.min = 0; >>> options.hAxis.viewWindow.max = 5; >>> } else { >>> options.hAxis.viewWindow.min = 0; >>> options.hAxis.viewWindow.max = MAX; >>> } >>> zoomed = !zoomed; >>> drawChart(); >>> } >>> drawChart(); >>> >> -- 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 http://groups.google.com/group/google-visualization-api?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
