Add rain charts to weather page

content/screen.sass

@@ -422,7 +422,6 @@ table
 body.weather
 
   #current > .temperature
-    //margin-left: 1em
   
     .temperature
       font-family: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif
@@ -438,10 +437,11 @@ body.weather
 
   .chart
     clear: both
+    width: 100%
+    height: 320px
 
-    .canvas
+  section.rain
-      width: 100%
+    margin-top: 2em
-      height: 320px
 
   small
     display: block

content/weather.html

@@ -1,15 +1,25 @@
-<h2>Temperature</h2>
+<p><strong>Note:</strong> The times on this page are currently wrong.</p>
 
-<div class="loading"><img src="/images/spinner.gif" width="64" height="64" alt="Loading" /> Loading</div>
+<section class="temperature">
+  <h2>Temperature</h2>
 
-<div class="temperature chart">
+  <div class="loading"><img src="/images/spinner.gif" width="64" height="64" alt="Loading" /> Loading</div>
-  <!--><button id="year">Year</button>
-  <button id="month">Month</button>
-  <button id="day">Day</button>-->
-  <div class="canvas"></div>
-</div>
 
-<!-- <h2>Rainfall</h2>
+  <div class="temperature chart"></div>
-<div class="rainfall chart"></div> -->
+</section>
+
+<section class="rain">
+  <h2>Rainfall</h2>
+
+  <h3>Today</h3>
+
+  <p>Total: <span class="total rain">--</span> mm</p>
+
+  <div class="rainfall today chart"></div>
+
+  <h3>Last 7 Days</h3>
+
+  <div class="rainfall week chart"></div>
+</section>
 
 <small>Forecast icons by <a href="http://lavana.deviantart.com/art/Flat-Weather-Icons-32021664">LavAna</a></small>

output/js/weather.js

@@ -68,13 +68,11 @@ function timeString(date) {
   ].join(':')
 }
 
-jQuery(function() {
+//function newUTCDate()
-  jQuery.getJSON("/weather.json", function(data, status) {
-    var count = data.history.length;
-    for(var i = 0; i < count; i++) {
-      data.history[i][0] = new Date(data.history[i][0]);
-    }
 
+jQuery(function() {
+  var now = new Date();
+  jQuery.getJSON("/weather.json", function(data, status) {
     // Populate the current conditions
     var current = {
       temperature: data.current.temperature_out,
@@ -105,50 +103,56 @@ jQuery(function() {
     $('.loading').replaceWith(current_div)
 
     // Populate the charts
-    $('.temperature.chart .canvas').each(function() {
+    var count = data.history.length;
-      var self = this;
+    for(var i = 0; i < count; i++) {
+      data.history[i][0] = new Date(data.history[i][0] - (now.getTimezoneOffset() * 60 * 1000));
+    }
+    jQuery.plot('.temperature.chart', data.history, {
+      xaxis: {
+        mode: "time"
+      }
+    });
 
-      var options = {
+    // Rain
-        xaxis: {
+    var total_rain_today = 0;
-          mode: "time"
+    jQuery.each(data.rain.today, function(idx, reading) {
+      total_rain_today += reading[1];
+      reading[0] = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), reading[0]));
+    });
+    $("section.rain .total").html(Math.round(total_rain_today * 10) / 10)
+
+    jQuery.each(data.rain.history, function(idx, reading) {
+      var date = reading[0].split("-")
+      reading[0] = new Date(Date.UTC(date[0], date[1] - 1, date[2]));
+    });
+
+    jQuery.plot(".rainfall.today.chart", [data.rain.today], {
+      series: {
+        bars: {
+          show: true,
+          barWidth: 1000 * 60 * 60 // 1 hour
         }
-      };
+      },
+      xaxis: {
+        mode: "time",
+        min: new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())),
+        max: new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), 23, 59, 59)),
+      }
+    });
 
-      jQuery.plot(self, data.history, options);
+    jQuery.plot(".rainfall.week.chart", [data.rain.history], {
-
+      series: {
-      /*
+        bars: {
-      $("#year").click(function () {
+          show: true,
-          $.plot(self, data.history, {
+          barWidth: 1000 * 60 * 60 * 24 // 1 day
-            xaxis: {
+        }
-                mode: "time",
+      },
-                minTickSize: [1, "month"] //,
+      xaxis: {
-                // min: (new Date("1990/01/01")).getTime(),
+        // min: 0,
-                // max: (new Date()).getTime()
+        // max: 24
-            }
+        mode: "time",
-
+        minTickSize: [1, "day"]
-          });
+      }
-      });
-
-      $("#month").click(function () {
-          $.plot(self, data.history, {
-              xaxis: {
-                  mode: "time",
-                  min: (new Date("2010/08/21")).getTime(),
-                  max: (new Date()).getTime()
-              }
-          });
-      });
-
-      $("#day").click(function () {
-          $.plot(self, data.history, {
-              xaxis: {
-                  mode: "time",
-                  min: (new Date("2010/09/21 00:00")).getTime(),
-                  max: (new Date()).getTime()
-              }
-          });
-      });
-      */
     });
   });
 });