Please read the posts in the Announcements section about the current status of Cumulus development now that I have retired

Please read this post before posting

Latest Cumulus release v1.9.4 (build 1099) - Nov 28 2014
Latest Cumulus MX release - v3.0.0 build 3043 Jan 20 2017. See this post for download

Sparklines... and how to add them to your webpage(s)

Other discussion about creating web sites for Cumulus that doesn't have a specific subforum

Moderators: daj, TNETWeather

User avatar
mikechristelow
Posts: 163
Joined: Wed Feb 01, 2012 9:33 pm
Weather Station: Watson W8681 (solar)
Operating System: Windows XP SP3
Location: Crewe, Cheshire
Contact:

Sparklines... and how to add them to your webpage(s)

Postby mikechristelow » Fri Feb 14, 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:
sparklines.PNG

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 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:

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>      


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

Code: Select all

<span class="temperature">Loading..</span>

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.
You do not have the required permissions to view the files attached to this post.
http://www.christelow.co.uk
“It's snowing still," said Eeyore gloomily.
"So it is."
"And freezing."
"Is it?"
"Yes," said Eeyore. "However," he said, brightening up a little, "we haven't had an earthquake lately.”


uncle_bob
Posts: 471
Joined: Wed Aug 17, 2011 2:58 pm
Weather Station: WeatherDuino Pro2
Operating System: 2008
Location: Canberra

Re: Sparklines... and how to add them to your webpage(s)

Postby uncle_bob » Sat Feb 15, 2014 12:17 pm

Hey those are pretty cool!

User avatar
mcrossley
Posts: 5148
Joined: Thu Jan 07, 2010 9:44 pm
Weather Station: Davis VP2
Operating System: Stretch Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Sparklines... and how to add them to your webpage(s)

Postby mcrossley » Sat Feb 15, 2014 5:20 pm

Bookmarked - to come back to when I have more time!
Just working on making the 'new record' indicators independent of the Cumulus flags as I keep resetting them by accident, and I wanted the cancellation automatic (and enabling for monthly records), nearly done now...

User avatar
nitrx
Posts: 1303
Joined: Sun Dec 13, 2009 1:21 pm
Weather Station: WH1080
Operating System: Windows 10
Location: Apeldoorn The Netherlands
Contact:

Re: Sparklines... and how to add them to your webpage(s)

Postby nitrx » Sat Feb 15, 2014 7:05 pm

mikechristelow wrote:I decided to have a crack at adding "sparklines" to my main page


Nice find but my webtags have output with decimal comma's so I think the javascript wont work :|

BCJKiwi
Posts: 851
Joined: Mon Jul 09, 2012 8:40 pm
Weather Station: Davis VP2 Cabled with Solar
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

Re: Sparklines... and how to add them to your webpage(s)

Postby BCJKiwi » Sun Feb 16, 2014 4:19 am

OK, put some into this page;
http://silveracorn.co.nz/weather/wxcutrends.php
Had to fiddle a bit but these are in an html page inside the Saratoga templates using php variables.

@ mikechristelow
There is no way I would have succeeded without your instructions which bear little relationship to the documentation at a first or second read!
Thanks!!

User avatar
mikechristelow
Posts: 163
Joined: Wed Feb 01, 2012 9:33 pm
Weather Station: Watson W8681 (solar)
Operating System: Windows XP SP3
Location: Crewe, Cheshire
Contact:

Re: Sparklines... and how to add them to your webpage(s)

Postby mikechristelow » Sun Feb 16, 2014 8:28 am

BCJwiki - you're welcome. I like your implementation, very neat! :clap:
http://www.christelow.co.uk
“It's snowing still," said Eeyore gloomily.
"So it is."
"And freezing."
"Is it?"
"Yes," said Eeyore. "However," he said, brightening up a little, "we haven't had an earthquake lately.”


User avatar
HRVistaWeather
Posts: 209
Joined: Mon Apr 09, 2012 2:38 pm
Weather Station: Davis VP2 Plus - 24hr FARS
Operating System: Windows 10 Home (64bit)
Location: Franklin, Huon Valley, Tasmania
Contact:

Re: Sparklines... and how to add them to your webpage(s)

Postby HRVistaWeather » Wed Apr 09, 2014 11:58 am

nHi Brian thanks for the info, tried everything you supplied - however no luck, looks like I retrieve data ok in the php page wxtrends.php but no visual chart is displayed.

tried other ways but still no good - seems as though a step is missing somewhere to display the sparkline charts.

aah well does not n
matter in too much pain no anyway, doctors still unable to determine cause of pain, had section of small bowl removed and hernia also removed but no info back on biopsies as yet and no idea when they will get to find the cause of main stomack pain and reason I have had no bowl movemenets for past 8 days or irregulay for past 3 months. Maybe it's the end - lights out :-( thanks again, regards Tony.

BCJKiwi wrote:OK, put some into this page;
http://silveracorn.co.nz/weather/wxcutrends.php
Had to fiddle a bit but these are in an html page inside the Saratoga templates using php variables.

@ mikechristelow
There is no way I would have succeeded without your instructions which bear little relationship to the documentation at a first or second read!
Thanks!!
Tony
Huon River Vista - South Franklin Weather - Tasmania
Davis Vantage Pro 2 Plus - FARS, Cumulus MX, 2 Soil Temp/Moist Solar/Rad.
Image

BCJKiwi
Posts: 851
Joined: Mon Jul 09, 2012 8:40 pm
Weather Station: Davis VP2 Cabled with Solar
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

Re: Sparklines... and how to add them to your webpage(s)

Postby BCJKiwi » Wed Apr 09, 2014 8:57 pm

Duh!
Sorry Tony, I see on checking that the PM I sent you missed out the actual table that outputs the data!

So for those of you that want to use or adapt what I have here http://silveracorn.co.nz/weather/wxcutrends.php there are two changes required to the standard scripts.

NOTE this is for the Saratoga template websites only!!

In the script named wxtrends.php (which is a typical Saratoga starter file), just before the </head> line add

Code: Select all

<script type="text/javascript" src="./jquery.sparkline.min.js"></script>
Note that this requires that you have downloaded the file jquery.sparkline.min.js and uploaded it into the same folder as the wxtrends.php script on your webserver.

In the script CU-trends-inc.php from the Sataroga Version 3 templates, at the place you want the sparklines to appear, add in this block of code;

Code: Select all

<br />
<script type="text/javascript">
/* Temperature */
   $(function() {
      var spk_temp = [ <?php echo $temp0minuteago.",".$temp5minuteago.",".$temp10minuteago.",".$temp15minuteago.",".$temp20minuteago.",".$temp30minuteago.",".$temp45minuteago.",".$temp1hourago.",".$temp75minuteago.",".$temp90minuteago.",".$temp105minuteago.",".$temp2hoursago.",".$temp6hoursago.",".$temp12hoursago.",".$temp24hoursago ;?> ]
      $('.temperature').sparkline(spk_temp, {
         type: "line",
         tooltipSuffix: " <?php echo $uomTemp; ?>",
         height: 30,
         width: 250,
         tooltipChartTitle: 'Temperatures - now to 24hrs ago'
      });
   });
 /* Humidity */
   $(function() {
      var spk_hum = [ <?php echo $hum0minuteago.",".$hum5minuteago.",".$hum10minuteago.",".$hum15minuteago.",".$hum20minuteago.",".$hum30minuteago.",".$hum45minuteago.",".$hum1hourago.",".$hum75minuteago.",".$hum90minuteago.",".$hum105minuteago.",".$hum2hoursago.",".$hum6hoursago.",".$hum12hoursago.",".$hum24hoursago ;?> ]
      $('.humidity').sparkline(spk_hum, {
         type: "line",
         tooltipSuffix: "%",
         height: 30,
         width: 250,
         tooltipChartTitle: 'Humidity - now to 24hrs ago'
      });
   });
 /* Rain */
   $(function() {
      var spk_rain = [ <?php echo $rain0minuteago.",".$rain5minuteago.",".$rain10minuteago.",".$rain15minuteago.",".$rain20minuteago.",".$rain30minuteago.",".$rain45minuteago.",".$rain1hourago.",".$rain75minuteago.",".$rain90minuteago.",".$rain105minuteago.",".$rain2hoursago.",".$rain6hoursago.",".$rain12hoursago.",".$rain24hoursago ;?> ]
      $('.rain').sparkline(spk_rain, {
         type: "line",
         tooltipSuffix: "<?php echo $uomRain; ?>/day",
         height: 30,
         width: 250,
         tooltipChartTitle: 'Rain/day - now to 24hrs ago'
      });
   });
 /* Pressure */
   $(function() {
      var spk_baro = [ <?php echo $baro0minuteago.",".$baro5minuteago.",".$baro10minuteago.",".$baro15minuteago.",".$baro20minuteago.",".$baro30minuteago.",".$baro45minuteago.",".$baro1hourago.",".$baro75minuteago.",".$baro90minuteago.",".$baro105minuteago.",".$baro2hoursago.",".$baro6hoursago.",".$baro12hoursago.",".$baro24hoursago ;?> ]
      $('.baro').sparkline(spk_baro, {
         type: "line",
         tooltipSuffix: "<?php echo $uomBaro; ?>",
         height: 30,
         width: 250,
         tooltipChartTitle: 'Pressure - now to 24hrs ago'
      });
   });
 /* Wind Speed */
   $(function() {
      var spk_wind = [ <?php echo $wind0minuteago.",".$wind5minuteago.",".$wind10minuteago.",".$wind15minuteago.",".$wind20minuteago.",".$wind30minuteago.",".$wind45minuteago.",".$wind1hourago.",".$wind75minuteago.",".$wind90minuteago.",".$wind105minuteago.",".$wind2hoursago.",".$wind6hoursago.",".$wind12hoursago.",".$wind24hoursago ;?> ]
      $('.wind').sparkline(spk_wind, {
         type: "line",
         tooltipSuffix: "<?php echo $uomWind; ?>",
         height: 30,
         width: 250,
         tooltipChartTitle: 'Wind Speed - now to 24hrs ago'
      });
   });
 /* Wind Gust */
   $(function() {
      var spk_gust = [ <?php echo $gust0minuteago.",".$gust5minuteago.",".$gust10minuteago.",".$gust15minuteago.",".$gust20minuteago.",".$gust30minuteago.",".$gust45minuteago.",".$gust1hourago.",".$gust75minuteago.",".$gust90minuteago.",".$gust105minuteago.",".$gust2hoursago.",".$gust6hoursago.",".$gust12hoursago.",".$gust24hoursago ;?> ]
      $('.gust').sparkline(spk_gust, {
         type: "line",
         tooltipSuffix: "<?php echo $uomWind; ?>",
         height: 30,
         width: 250,
         tooltipChartTitle: 'Wind Gust - now to 24hrs ago'
      });
   });
 /* Win Dir */
   $(function() {
/*      var spk_wdir = [ <?php echo $dir0minuteago.",".$dir5minuteago.",".$dir10minuteago.",".$dir15minuteago.",".$dir20minuteago.",".$dir30minuteago.",".$dir45minuteago.",".$dir1hourago.",".$dir75minuteago.",".$dir90minuteago.",".$dir105minuteago.",".$dir2hoursago.",".$dir6hoursago.",".$dir12hoursago.",".$dir24hoursago ;?> ] */
      var spk_wdir = [ <?php echo $WX['RecentWindAvgDir m=5'].",".$WX['RecentWindAvgDir m=10'].",".$WX['RecentWindAvgDir m=15'].",".$WX['RecentWindAvgDir m=20'].",".$WX['RecentWindAvgDir m=30'].",".$WX['RecentWindAvgDir m=45'].",".$WX['RecentWindAvgDir h=1'].",".$WX['RecentWindAvgDir m=75'].",".$WX['RecentWindAvgDir m=90'].",".$WX['RecentWindAvgDir m=105'].",".$WX['RecentWindAvgDir h=2'].",".$WX['RecentWindAvgDir h=6'].",".$WX['RecentWindAvgDir h=12'].",".$WX['RecentWindAvgDir h=24'] ;?> ]
      $('.windir').sparkline(spk_wdir, {
         type: "line",
         height: 30,
         width: 250,
         tooltipChartTitle: 'Wind Dir - now to 24hrs ago'
      });
   });
</script>

<table width="100%" align="center" cellpadding="3" cellspacing="0" border="0">
<tr class="table-top">
   <td>Sparkline Graphs</td><td colspan="3">for same period as chart above, from now to 24hrs ago</td>
</tr>
<tr class="column-light">
   <td>Temperature <?php echo $uomTemp; ?>:</td><td><span class="temperature">Loading..</span></td>
   <td>Humidity %:</td><td><span class="humidity">Loading..</span></td>
</tr>
<tr class="column-dark">
   <td>Rain <?php echo $uomRain; ?>/day:</td><td><span class="rain">Loading..</span></td>
   <td>Pressure <?php echo $uomBaro; ?>:</td><td><span class="baro">Loading..</span></td>
</tr>
<tr class="column-light">
   <td>Wind Speed <?php echo $uomWind; ?>:</td><td><span class="wind">Loading..</span></td>
   <td>Wind Gust<?php echo $uomWind; ?>:</td><td><span class="gust">Loading..</span></td>
</tr>
<tr class="column-dark">
   <td>Wind Direction :</td><td><span class="windir">Loading..</span></td>
   <td>&nbsp;</td><td>&nbsp;</td>
</tr>

<tr class="table-top">
<td colspan="4">&nbsp;</td>
</tr>
</table>
Naturally this is what suits my page style/layout and yours will be different.

However, this will give you something that should work which you can then adapt to suit your own purpose.

User avatar
HRVistaWeather
Posts: 209
Joined: Mon Apr 09, 2012 2:38 pm
Weather Station: Davis VP2 Plus - 24hr FARS
Operating System: Windows 10 Home (64bit)
Location: Franklin, Huon Valley, Tasmania
Contact:

Re: Sparklines... and how to add them to your webpage(s)

Postby HRVistaWeather » Wed Apr 09, 2014 10:15 pm

Thanks Brian,
Done all that no change data is returned but no sparkline chart displayed.

Is there any CSS required for it to work ?

regards
Tony
Tony
Huon River Vista - South Franklin Weather - Tasmania
Davis Vantage Pro 2 Plus - FARS, Cumulus MX, 2 Soil Temp/Moist Solar/Rad.
Image

BCJKiwi
Posts: 851
Joined: Mon Jul 09, 2012 8:40 pm
Weather Station: Davis VP2 Cabled with Solar
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

Re: Sparklines... and how to add them to your webpage(s)

Postby BCJKiwi » Wed Apr 09, 2014 11:29 pm

Not as far as I know. The class comes from the <script> above the table.
Do you have the <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.js"></script>
line in the wxtrends.php file as per the original posts?

Where are you tying to load it? A link to the page might help.
Do you see any error messages?
What happens if you do an xhtml validation (usual link in the footer)?

User avatar
HRVistaWeather
Posts: 209
Joined: Mon Apr 09, 2012 2:38 pm
Weather Station: Davis VP2 Plus - 24hr FARS
Operating System: Windows 10 Home (64bit)
Location: Franklin, Huon Valley, Tasmania
Contact:

Re: Sparklines... and how to add them to your webpage(s)

Postby HRVistaWeather » Thu Apr 10, 2014 1:00 am

Hi Brian,

Yes thought the script class contents would have been all that was needed.

http://hrvistaweather.com/wxtrends.php is location of file.and http://hrvistaweather.com/CU-trends-inc.php source.

http://hrvistaweather.com/wxtrends.php and http://hrvistaweather.com/CU-trends-inc.php

regards

Tony
Tony
Huon River Vista - South Franklin Weather - Tasmania
Davis Vantage Pro 2 Plus - FARS, Cumulus MX, 2 Soil Temp/Moist Solar/Rad.
Image

BCJKiwi
Posts: 851
Joined: Mon Jul 09, 2012 8:40 pm
Weather Station: Davis VP2 Cabled with Solar
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

Re: Sparklines... and how to add them to your webpage(s)

Postby BCJKiwi » Thu Apr 10, 2014 5:55 am

OK, a couple of things I can see from your website;
1. the validation is showing quite a few errors - most seem reasonably straight forward to fix - always like to have validation clean if at all possible. Have no idea if any of these would be causing a problem.

2. I have more data items in the sparklines and tables than you have.
The data array for all items has missing data which shows up as ,, without values between. Again I do not know if this would cause the data not to display. However they should not be there as you don't have the data anyway.

Suggest you edit the arrays to only include the time intervals you actually have in the tables above. Also I have different names for some items e.g. I have $temp1hourago where you have $temp60minuteago. Again these are not appearing in the array for the sparkline output.

Suggest you go through the script and make sure the variables set up in the functions in the lines var spk_temp = etc match the variable names in the table above.

Hopefully that will allow the sparklines to display.

User avatar
HRVistaWeather
Posts: 209
Joined: Mon Apr 09, 2012 2:38 pm
Weather Station: Davis VP2 Plus - 24hr FARS
Operating System: Windows 10 Home (64bit)
Location: Franklin, Huon Valley, Tasmania
Contact:

Re: Sparklines... and how to add them to your webpage(s)

Postby HRVistaWeather » Thu Apr 10, 2014 8:59 am

Thanks Brian,

Yeah I knew the interval/names where out (but like you thought it would not matter).

I've fixed all so correct data now returned - but no change still not displaying.

If the validation errors are the cause then I'd prefer what I have now over adding sparklines - in addition I'm now in too much pain to continue - so will leave as is until I wake up again, just had some pain killers so I'll be out to it for a while I hope. That's until nurse wakes me again for obs.

Thanks anyway.
Tony
Huon River Vista - South Franklin Weather - Tasmania
Davis Vantage Pro 2 Plus - FARS, Cumulus MX, 2 Soil Temp/Moist Solar/Rad.
Image

BCJKiwi
Posts: 851
Joined: Mon Jul 09, 2012 8:40 pm
Weather Station: Davis VP2 Cabled with Solar
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

Re: Sparklines... and how to add them to your webpage(s)

Postby BCJKiwi » Thu Apr 10, 2014 8:37 pm

Further comments;

There is a double-up of </table> at the end of the first table just before the beginning of the sparklines code - the browser should take care of that but it would pay to remove it.

On deeper investigation it is apparent that the sparkline code is not working as there is an error when it tries to evaluate the function.
I am unable to see what is in your wxtrends.php page so please check that it contains the two lines

Code: Select all

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script type="text/javascript" src="./jquery.sparkline.min.js"></script>
as discussed in the first post , and that you have downloaded and installed in the main scripts folder the file jquery.sparkline.min.js also as discussed in the first post of this thread.
You might also try
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.js"></script> or the same version as you are using elsewhere on the site.
Last edited by BCJKiwi on Fri Apr 11, 2014 11:12 am, edited 1 time in total.

User avatar
HRVistaWeather
Posts: 209
Joined: Mon Apr 09, 2012 2:38 pm
Weather Station: Davis VP2 Plus - 24hr FARS
Operating System: Windows 10 Home (64bit)
Location: Franklin, Huon Valley, Tasmania
Contact:

Re: Sparklines... and how to add them to your webpage(s)

Postby HRVistaWeather » Fri Apr 11, 2014 8:54 am

Hi Brian,

Changed to version: jQuery JavaScript Library v1.10.0 which did the trick - all works now http://hrvistaweather.com/wxtrends.php

Thankyou, and at same time I've just put up announcement on my site stating it will not be updated until some time after I get out of hospital.

Cant keep it running from here, purchased new $AU 2500(+) worth of Vantage Pro 2 plus (with soil moist/temp/UV/Solar/FARS etc. recently, so will get that installed over next couple of months the revamp entire site under new Domain Name.

kind regards,
Tony
Tony
Huon River Vista - South Franklin Weather - Tasmania
Davis Vantage Pro 2 Plus - FARS, Cumulus MX, 2 Soil Temp/Moist Solar/Rad.
Image


Return to “Web site - General”

Who is online

Users browsing this forum: No registered users and 6 guests