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.
