Monday, March 21, 2011

HW9: JSON and Charts

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.

  1. 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.
  2. 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.
    1. The title of the bar chart should be the question text and the choices should be labelled with the appropriate choice text.
    2. 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



  2. The idea is to return the same information in different formats. For example, delicious does this, using a url path instead of a parameter:



  3. Please remember that everything after the ? in the URL is part of the query string (a bunch of field=value pairs, separated by &)

    As in

    And remember that you get these values using self.request.get('fieldname') on the server side.

  4. Here is a simple example of an ajax request using jquery;