Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4018) - 28 March 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

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

Moderator: daj

User avatar
mikechristelow
Posts: 165
Joined: Wed 01 Feb 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)

Post by mikechristelow »

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: 505
Joined: Wed 17 Aug 2011 2:58 pm
Weather Station: WeatherDuino Pro2
Operating System: 2008
Location: Canberra

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

Post by uncle_bob »

Hey those are pretty cool!
Interested in building your own Weather Station? Maybe check out the WeatherDuino Pro Project Here
Conder, Canberra Weather
Image
User avatar
mcrossley
Posts: 12694
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

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

Post by mcrossley »

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: 1297
Joined: Sun 13 Dec 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)

Post by nitrx »

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: 1255
Joined: Mon 09 Jul 2012 8:40 pm
Weather Station: Davis VP2 Cabled
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

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

Post by BCJKiwi »

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: 165
Joined: Wed 01 Feb 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)

Post by mikechristelow »

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
BeaumarisWX
Posts: 357
Joined: Mon 09 Apr 2012 2:38 pm
Weather Station: Davis VP2 Plus - 24hr FARS
Operating System: Windows 10 Pro Hades Canyon
Location: Beaumaris, Tasmania, AU
Contact:

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

Post by BeaumarisWX »

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 Beaumaris, Tasmania (AUS)

CMX Mobile : https://beaumaris-weather.com/BWX/
CMX Default: https://beaumaris-weather.com/cumulusmx_default/
Colour Dashboard : https://beaumaris-weather.com/dashborad_color.php
Click below for Saratoga Template :
Image
BCJKiwi
Posts: 1255
Joined: Mon 09 Jul 2012 8:40 pm
Weather Station: Davis VP2 Cabled
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

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

Post by BCJKiwi »

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
BeaumarisWX
Posts: 357
Joined: Mon 09 Apr 2012 2:38 pm
Weather Station: Davis VP2 Plus - 24hr FARS
Operating System: Windows 10 Pro Hades Canyon
Location: Beaumaris, Tasmania, AU
Contact:

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

Post by BeaumarisWX »

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 Beaumaris, Tasmania (AUS)

CMX Mobile : https://beaumaris-weather.com/BWX/
CMX Default: https://beaumaris-weather.com/cumulusmx_default/
Colour Dashboard : https://beaumaris-weather.com/dashborad_color.php
Click below for Saratoga Template :
Image
BCJKiwi
Posts: 1255
Joined: Mon 09 Jul 2012 8:40 pm
Weather Station: Davis VP2 Cabled
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

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

Post by BCJKiwi »

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/j ... "></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
BeaumarisWX
Posts: 357
Joined: Mon 09 Apr 2012 2:38 pm
Weather Station: Davis VP2 Plus - 24hr FARS
Operating System: Windows 10 Pro Hades Canyon
Location: Beaumaris, Tasmania, AU
Contact:

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

Post by BeaumarisWX »

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 Beaumaris, Tasmania (AUS)

CMX Mobile : https://beaumaris-weather.com/BWX/
CMX Default: https://beaumaris-weather.com/cumulusmx_default/
Colour Dashboard : https://beaumaris-weather.com/dashborad_color.php
Click below for Saratoga Template :
Image
BCJKiwi
Posts: 1255
Joined: Mon 09 Jul 2012 8:40 pm
Weather Station: Davis VP2 Cabled
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

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

Post by BCJKiwi »

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
BeaumarisWX
Posts: 357
Joined: Mon 09 Apr 2012 2:38 pm
Weather Station: Davis VP2 Plus - 24hr FARS
Operating System: Windows 10 Pro Hades Canyon
Location: Beaumaris, Tasmania, AU
Contact:

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

Post by BeaumarisWX »

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 Beaumaris, Tasmania (AUS)

CMX Mobile : https://beaumaris-weather.com/BWX/
CMX Default: https://beaumaris-weather.com/cumulusmx_default/
Colour Dashboard : https://beaumaris-weather.com/dashborad_color.php
Click below for Saratoga Template :
Image
BCJKiwi
Posts: 1255
Joined: Mon 09 Jul 2012 8:40 pm
Weather Station: Davis VP2 Cabled
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

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

Post by BCJKiwi »

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/j ... "></script> or the same version as you are using elsewhere on the site.
Last edited by BCJKiwi on Fri 11 Apr 2014 11:12 am, edited 1 time in total.
User avatar
BeaumarisWX
Posts: 357
Joined: Mon 09 Apr 2012 2:38 pm
Weather Station: Davis VP2 Plus - 24hr FARS
Operating System: Windows 10 Pro Hades Canyon
Location: Beaumaris, Tasmania, AU
Contact:

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

Post by BeaumarisWX »

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 Beaumaris, Tasmania (AUS)

CMX Mobile : https://beaumaris-weather.com/BWX/
CMX Default: https://beaumaris-weather.com/cumulusmx_default/
Colour Dashboard : https://beaumaris-weather.com/dashborad_color.php
Click below for Saratoga Template :
Image
Post Reply