Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Using sparklines to show previous day's air status. Using progressive…

… enhancement to show a table to users with no JS, and sparklines to those users who do have JS.
  • Loading branch information...
commit 7df6276a27dfd4f6a84355287a07fcb14b8b7a73 1 parent 495567d
@mpdaugherty authored
Showing with 31 additions and 14 deletions.
  1. +2 −2 js/main.js
  2. +0 −4 js/main.js~
  3. +24 −8 main.py
  4. +5 −0 stylesheets/main.css
View
4 js/main.js
@@ -1,4 +1,4 @@
$(document).ready(function () {
- $('h2').hide();
- $('h2').show(500);
+ $('.pollutantHistory').hide();
+ $('.sparkline').show().sparkline('html');
});
View
4 js/main.js~
@@ -1,4 +0,0 @@
-function a()
-{
- alert("hi");
-}
View
32 main.py
@@ -23,6 +23,7 @@ def get(self):
self.response.out.write('<link rel="stylesheet" href="stylesheets/main.css" type="text/css" />');
self.response.out.write("<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js\" type=\"text/javascript\"></script>");
self.response.out.write("<script src=\"js/main.js\" type=\"text/javascript\"></script>");
+ self.response.out.write("<script src=\"js/jquery.sparkline.min.js\" type=\"text/javascript\"></script>");
self.response.out.write("</head>")
self.response.out.write("<body>")
@@ -38,7 +39,8 @@ def getCurrentPollutantHTML(self, pollutant):
pm2Query.order("-date")
pm2Query.filter("type = ", pollutant)
pm2Status = pm2Query.get()
-
+ lastDayStatuses = pm2Query.fetch(24)
+
htmlReturnValue = '<h2><span class="pollutantName">'
htmlReturnValue += pollutant
htmlReturnValue += "</span>"
@@ -46,25 +48,39 @@ def getCurrentPollutantHTML(self, pollutant):
htmlReturnValue += str(pm2Status.date)
htmlReturnValue += ')</span>'
htmlReturnValue += "</h2><div><em>"+pm2Status.description+"</em></div>"
- htmlReturnValue += "<div>Concentration: <span>"+str(pm2Status.concentration)+"</span></div>"
- htmlReturnValue += "<div>AQI: <span>"+str(pm2Status.aqi)+"</span></div>"
- # Next, add a table with the data on this pollutant from the last 24 hours.
- lastDayStatuses = pm2Query.fetch(24)
+ htmlReturnValue += "<div>Concentration: <span>"+str(pm2Status.concentration)+"</span>"
+ htmlReturnValue += '<span class="sparkline">'
+ for status in reversed(lastDayStatuses):
+ htmlReturnValue += str(status.concentration) + ','
+ # Cut off the last, extra comma and continue
+ htmlReturnValue = htmlReturnValue[:-1] + '</span>'
+ htmlReturnValue += '</div>'
+
+ htmlReturnValue += "<div>AQI: <span>"+str(pm2Status.aqi)+"</span>"
+ htmlReturnValue += '<span class="sparkline">'
+ for status in lastDayStatuses):
+ htmlReturnValue += str(status.aqi) + ','
+ # Cut off the last, extra comma and continue
+ htmlReturnValue = htmlReturnValue[:-1] + '</span>'
+ htmlReturnValue += '</div>'
+ # Next, add a table with the data on this pollutant from the last 24 hours.
+ # If people don't have javascript enabled, this will show up for them instead of
+ # the sparklines.
htmlReturnValue += '<table class="pollutantHistory"/>'
htmlReturnValue += '<tr><td></td>'
- for status in lastDayStatuses:
+ for status in reversed(lastDayStatuses):
htmlReturnValue += '<th>' + str(status.date) + '</th>'
htmlReturnValue += '</tr>'
htmlReturnValue += '<tr><th>Concentration</th>'
- for status in lastDayStatuses:
+ for status in reversed(lastDayStatuses):
htmlReturnValue += '<td>' + str(status.concentration) + '</td>'
htmlReturnValue += '</tr>'
htmlReturnValue += '<tr><th>AQI</th>'
- for status in lastDayStatuses:
+ for status in reversed(lastDayStatuses):
htmlReturnValue += '<td>' + str(status.aqi) + '</td>'
htmlReturnValue += '</tr>'
htmlReturnValue += '</table>'
View
5 stylesheets/main.css
@@ -18,4 +18,9 @@ h2
.lastUpdatedTime
{
font-size:smaller;
+}
+
+.sparkline
+{
+ display:none;
}
Please sign in to comment.
Something went wrong with that request. Please try again.