benw2/wezm.net
1
0
Fork 0
forked from wezm/wezm.net
Code Pull requests Activity

Add rain charts to weather page

Browse source
This commit is contained in:
Wesley Moore 2010-10-16 19:52:38 +11:00
parent cd35c78029
commit 386607fc4b
3 changed files with 75 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
content/screen.sass
View file

@ -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,11 +437,12 @@ body.weather
.chart
clear: both
.canvas
width: 100%
height: 320px
section.rain
margin-top: 2em
small
display: block
font-size: smaller

30
content/weather.html
View file

@ -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">
<!--><button id="year">Year</button>
<button id="month">Month</button>
<button id="day">Day</button>-->
<div class="canvas"></div>
</div>
<div class="loading"><img src="/images/spinner.gif" width="64" height="64" alt="Loading" /> Loading</div>
<!-- <h2>Rainfall</h2>
<div class="rainfall chart"></div> -->
<div class="temperature 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>

78
output/js/weather.js
View file

@ -68,13 +68,11 @@ function timeString(date) {
].join(':')
}
jQuery(function() {
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]);
}
//function newUTCDate()
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 self = this;
var options = {
var count = data.history.length;
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"
}
};
});
jQuery.plot(self, data.history, options);
// Rain
var total_rain_today = 0;
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)
/*
$("#year").click(function () {
$.plot(self, data.history, {
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",
minTickSize: [1, "month"] //,
// min: (new Date("1990/01/01")).getTime(),
// max: (new Date()).getTime()
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)),
}
});
});
$("#month").click(function () {
$.plot(self, data.history, {
jQuery.plot(".rainfall.week.chart", [data.rain.history], {
series: {
bars: {
show: true,
barWidth: 1000 * 60 * 60 * 24 // 1 day
}
},
xaxis: {
// min: 0,
// max: 24
mode: "time",
min: (new Date("2010/08/21")).getTime(),
max: (new Date()).getTime()
minTickSize: [1, "day"]
}
});
});
$("#day").click(function () {
$.plot(self, data.history, {
xaxis: {
mode: "time",
min: (new Date("2010/09/21 00:00")).getTime(),
max: (new Date()).getTime()
}
});
});
*/
});
});
});