Sunday, February 12, 2012

Step Nine: The Front End - Flot, Bootstrap and Templates

To start, we'll use the below 'hello world' example of flot:



As you can see, this example creates two flot objects for Temperature and Humidity. We can use the Google App Engine templating engine to populate the flot data - we'll do this in the example below:



Here, you can see that we iterate through the list of weather entries backwards to account for query selecting entries by date desc (newest first). For flot, we want to plot the points with newest last. Additionally, there is some funky-time handling present because Flot accepts time in ms.

To re-iterate, notice how the format of entries is stored in Google App Engine in a way that makes it super-simple to use with Flot. This is certainly not the most useful format for the data, but works and keeps within the free quota limits (a requirement for this project).

2 comments:

  1. cool! do you have a demo gae site that I can check out?:D

    ReplyDelete
    Replies
    1. Here you are: http://feb10yarf.appspot.com/w

      Last plugged in during March - so you can see my heater cycling on/off.

      I should really make a job that only stores daily averages per hour (or just day) for historical data (you can see just how much data is captured by viewing the source on the 5d option).

      Delete