Sparklines... and how to add them to your webpage(s)
Posted: Fri 14 Feb 2014 8:48 pm
I decided to have a crack at adding "sparklines" to my main page - see here for all the background on these inline graphic ornamentations.
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.
(you may have a different jquery version on your site/in your page, it just needs to be version 1.4.3 or better). The jquery.sparkline.js file needs to be in the same folder as your html page or you need to include the path to the file in the script src. You can download the file from the above site.
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:
In this example we start by creating a variable recent_outside_temp and assigning the desired values to it in an array, inside the "[" and "]". I've used the Cumulus recent history webtag <#RecentOutsideTemp> 12 times, to give an array of data at 5 minute intervals from the time when the page is processed by Cumulus. Each value in the array must be separated by a comma.
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
where "temperature" (in this example) is the name of the tag defined in the script above. Note the addition of the text "Loading" which will appear in the sparkline display position whilst the sparkline is being displayed - usually only momentarily.
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.
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.
thanks again, regards Tony.