In this homework you will be adding charts that show the number of answers given to each survey question choice (how many voted for which). You will be doing this by first providing the answer data in JSON format, so maybe a third-party can use that data in their own visualization, and then using that data yourself along with the google visualization API to draw your own chart. Specifically, you will implement the following extensions to your webapp.
- You will change your python code such that a
GET /1234?fmt=json
will return the text and choices of question 1234, along with the number of answers given for each choice, in JSON format. You are free to choose the specific format of your JSON object. - You will use the Google visualization API to show a chart of the answers given thus far on the pages where you show the answers. That is, when either the owner or someone who has already answered question 1234 goest to
/1234
they will see the question and answer choices, as before, but also a bar chart showing how many people have chosen each choice.- The title of the bar chart should be the question text and the choices should be labelled with the appropriate choice text.
- You will get the data for this chart by first doing a ajax call back to
/1234?fmt=json
to get the data in JSON format. You will use this JSON data to populate the chart. The advantage of this approach is that it will easy then to embed this chart, using an iframe, in any other website. (You don't need to provide the 'embed' button, but you can if you feel up to it. I would suggest having/1234?fmt=chart
return just the HTML+JS for showing the chart, then iframe that.)
This homework is due Monday, March 28 @11am. You can turn it in here. Remember to add a URL to you published webapp in the comments at the top of your file.
Required Reading
- Parsing JSON in JavaScript.
- Using JSON in Firefox: this is the ECMAScript 5 compliant version, which is implemented by all(?) modern browsers.
- How do I parse JSON in the app engine?
- Google Visualization API documentation.
http://code.google.com/appengine/articles/rpc.html
ReplyDeleteThe idea is to return the same information in different formats. For example, delicious does this, using a url path instead of a parameter:
ReplyDeleteJSON: http://feeds.delicious.com/v2/json
RSS: http://feeds.delicious.com/v2/rss
And, here's twitter:
ReplyDeleteJSON: http://api.twitter.com/1/statuses/public_timeline.json
XML: http://api.twitter.com/1/statuses/public_timeline.xml
RSS: http://api.twitter.com/1/statuses/public_timeline.rss
ATOM: http://api.twitter.com/1/statuses/public_timeline.atom
Please remember that everything after the ? in the URL is part of the query string (a bunch of field=value pairs, separated by &)
ReplyDeleteAs in http://www.google.com/search?q=what+is+a+url+query+string
And remember that you get these values using self.request.get('fieldname') on the server side.
Here is a simple example of an ajax request using jquery;
ReplyDeletehttp://jsfiddle.net/jmvidal/QBnFm/