Hi, Thank you for the advice, much appreciated.
Regards, Matt On Mar 19, 12:43 pm, robinhowlett <[email protected]> wrote: > Your code is all over the place and doesn't make sense. > > JavaScript variable declarations have function-scope. You can't > declare the variable 'query' inside drawVisualization() and then try > to use it outside the function. And you are trying to use 'data' > without even declaring it or assigning anything to it. You also seem > to trying to create two Motion Charts - I can't figure out why. > > Lastly, you have to read the Visualization API documentation; look at > the docs for Query Language and the google.visualization.Query > reference. In your code you are trying to use a published spreadsheet > page in HTML format as the Query source - you don't do that. Use the > raw Spreadsheet data itself by pointing to the URL of the spreadsheet. > The Data Source Request example mentioned below will show you how. > > What you are trying to do is quite simple. Rather than just giving you > the solution, you should be able to figure it out by: > > Go to the Google Code Playground and look at > i) the HTML view of Visualization > Data Source Requests > Data Source > Requests -http://code.google.com/apis/ajax/playground/#data_source_request > ii) replace the IntensityMap instantiation with MotionChart (it's in > your sample but also in Visualization > Basic > Motion Charts > -http://code.google.com/apis/ajax/playground/#motion_chart) > > On Mar 17, 3:16 pm, Matt <[email protected]> wrote: > > > > > Hi everyone, > > > I am trying to build a motion chart visualization that uses Google > > Spreadsheets as a data source. I have pasted my code below. Could > > anyone make any suggestions on how to make it display properly? > > > Thanks! > > > Regards, > > Matt > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > > <html xmlns="http://www.w3.org/1999/xhtml";> > > <head> > > <meta http-equiv="content-type" content="text/html; charset=utf-8"/ > > > <title> > > Google Visualization API Sample > > </title> > > <script type="text/javascript" src="http://www.google.com/jsapi";></ > > script> > > <script type="text/javascript"> > > google.load('visualization', '1', {packages: ['motionchart']}); > > </script> > > <script type="text/javascript"> > > var visualization; > > > function drawVisualization() { > > // To see the data that this visualization uses, browse to > > //http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ > > var query = new google.visualization.Query( > > 'http://spreadsheets.google.com/pub?key=taExbkdYGXKWoQ- > > BzwFPYtw&output=html'); > > > var motionchart = new google.visualization.MotionChart( > > document.getElementById('visualization')); > > motionchart.draw(data, {'width': 800, 'height': 400}); > > } > > > google.setOnLoadCallback(drawVisualization); > > > // 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 motionchart = new google.visualization.MotionChart( > > document.getElementById('visualization')); > > motionchart.draw(data, {'width': 800, 'height': 400}); > > } > > > google.setOnLoadCallback(drawVisualization); > > //} > > > </script> > > </head> > > <body style="font-family: Arial;border: 0 none;"> > > <div id="visualization" style="height: 400px; width: 400px;"></ > > div> > > </body> > > </html> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. 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.
