I'm not entirely sure of the value of this feature , and have been puzzled by the bizarre values shown on the ones included on wunderground.com. Nevertheless I wanted to show that it could be done and this is what the result looks like: These show the recent history (using the associated webtags) for the item shown e.g. temperature over the previous hour. I've created sparklines for temperature, dewpoint, humidity, pressure and windspeed but of course you could create a sparkline for any item for which you have data. Each sparkline also has a tooltip which pops-up when you mouseover the graph (which I couldn't get my Windows7 snipping tool to include in my screen grabs).
This uses javascript and the jquery library. Details of the plugin can be found here. The documentation is reasonably clear to follow. To add sparklines to your page you need to put the following in the <head> section of your page i.e. between the <head> and </head> tags.
Code: Select all
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.sparkline.js"></script>
You then need to construct the script to create the sparkline itself: the script needs to be in the <head> section of your html page. There are four sparkline kinds, two "in line" and two "dynamic" - see the documentation for more information. I have only used the dynamic line type, like this:
Code: Select all
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
/* temperature sparkline() function */
var recent_outside_temp = [<#RecentOutsideTemp h=0 m=61>,<#RecentOutsideTemp h=0 m=56>,<#RecentOutsideTemp h=0 m=51>,<#RecentOutsideTemp h=0 m=46>,
<#RecentOutsideTemp h=0 m=41>,<#RecentOutsideTemp h=0 m=36>,<#RecentOutsideTemp h=0 m=31>,<#RecentOutsideTemp h=0 m=26>,
<#RecentOutsideTemp h=0 m=21>,<#RecentOutsideTemp h=0 m=16>,<#RecentOutsideTemp h=0 m=11>,<#RecentOutsideTemp h=0 m=6>];
$('.temperature').sparkline(recent_outside_temp, {
type: "line",
tooltipSuffix: " <#tempunit>",
width: 60,
tooltipChartTitle: 'Temperatures in the period<br/><#RecentTS h=0 m=61 format=hh:mm> to <#RecentTS h=0 m=6 format=hh:mm>'
});
// Insert a second/subsequent sparkline function here
});
/* ]]> */
</script>
The next part of the script defines the tag to display the sparkline result, starting with $('.temperature').sparkline(recent_outside_temp, {... The '.temperature' is the name of the tag that will display the sparkline elsewhere in our page, whilst the recent_outside_temp reads the values from the data array created above.
The styling of the sparkline is defined inside the {}. Type defines the type of sparkline; tooltipSuffix defines the data unit using, in this case the appropriate cumulus unit webtag (if you want other text, simply put the text inside the quote marks); the width of the sparkline (60 pixels in my case); and finally the tooltipChartTitle. For a full list of the styling options, just open the jquery.sparkline.js file with Notepad++ or a similar editor. It's worth having a read of this anyway as it helps explain much of the default behaviours of the feature such as width, height, colour attributes and so on.
Finally, having created the script and tag above, you need to place the tag to display the result in the required place in your html page, somewhere between the <body> and </body> tags. The display tag looks like this
Code: Select all
<span class="temperature">Loading..</span>
That's it, you're done!
I hope the above is of some use. You can see the full implementation on my home page, link below.