wezm/wezm.net
1
0
Fork 1
mirror of https://github.com/wezm/wezm.net.git synced 2024-12-19 02:39:54 +00:00
Code Issues Projects Releases Packages Wiki 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 body.weather
#current > .temperature #current > .temperature
//margin-left: 1em
.temperature .temperature
font-family: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif font-family: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif
@ -438,11 +437,12 @@ body.weather
.chart .chart
clear: both clear: both
.canvas
width: 100% width: 100%
height: 320px height: 320px
section.rain
margin-top: 2em
small small
display: block display: block
font-size: smaller font-size: smaller

26
content/weather.html
View file

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

86
output/js/weather.js
View file

@ -68,13 +68,11 @@ function timeString(date) {
].join(':') ].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 // Populate the current conditions
var current = { var current = {
temperature: data.current.temperature_out, temperature: data.current.temperature_out,
@ -105,50 +103,56 @@ jQuery(function() {
$('.loading').replaceWith(current_div) $('.loading').replaceWith(current_div)
// Populate the charts // 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));
var options = { }
jQuery.plot('.temperature.chart', data.history, {
xaxis: { xaxis: {
mode: "time" 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)
/* jQuery.each(data.rain.history, function(idx, reading) {
$("#year").click(function () { var date = reading[0].split("-")
$.plot(self, data.history, { reading[0] = new Date(Date.UTC(date[0], date[1] - 1, date[2]));
xaxis: { });
mode: "time",
minTickSize: [1, "month"] //, jQuery.plot(".rainfall.today.chart", [data.rain.today], {
// min: (new Date("1990/01/01")).getTime(), series: {
// max: (new Date()).getTime() bars: {
show: true,
barWidth: 1000 * 60 * 60 // 1 hour
} }
},
});
});
$("#month").click(function () {
$.plot(self, data.history, {
xaxis: { xaxis: {
mode: "time", mode: "time",
min: (new Date("2010/08/21")).getTime(), min: new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())),
max: (new Date()).getTime() max: new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), 23, 59, 59)),
}
});
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",
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()
}
});
});
*/
});
});
}); });