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

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 »

Good to see it is sorted!

All the best for a quick full recovery!
User avatar
marfanuk
Posts: 43
Joined: Wed 06 Nov 2013 5:27 pm
Weather Station: Davis Vantage Vue
Operating System: Raspbian on the Raspberry Pi 2
Location: Nantwich, United Kingdom
Contact:

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

Post by marfanuk »

Thanks Mike :clap: from one of Your neighbours ;)

Ive just added it to My site - http://www.nantwich-weather.co.uk/ - I love it! :D
Image
https://www.nantwich-weather.uk - Meteobridge

Darren
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.
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
User avatar
kocher
Posts: 233
Joined: Sat 19 Apr 2014 7:57 pm
Weather Station: Davis Vantage Pro2+
Operating System: Windows 10
Location: San Sebastian - Spain
Contact:

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

Post by kocher »

Greetings to all

I love the sparkline graphs.

With the explanations of the thread, I'm doing a test on my page:

http://kocher.es/cumulus/index.htm

I fail to see the graph of temperature, even though the code that loads the page I see the chart data.

What am I doing wrong?

Very grateful for your explanations
Image
User avatar
steve
Cumulus Author
Posts: 26702
Joined: Mon 02 Jun 2008 6:49 pm
Weather Station: None
Operating System: None
Location: Vienne, France
Contact:

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

Post by steve »

You have the same issue as Ron (nitrx) earlier in the thread - decimal commas. Using the 'RC' version of the web tag may fix that, at a guess - <#RCRecentOutsideTemp>
Steve
User avatar
kocher
Posts: 233
Joined: Sat 19 Apr 2014 7:57 pm
Weather Station: Davis Vantage Pro2+
Operating System: Windows 10
Location: San Sebastian - Spain
Contact:

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

Post by kocher »

Thank you very much Steve :D

http://kocher.es/cumulus/temp60.htm

Greetings from San Sebastian
Image
User avatar
kocher
Posts: 233
Joined: Sat 19 Apr 2014 7:57 pm
Weather Station: Davis Vantage Pro2+
Operating System: Windows 10
Location: San Sebastian - Spain
Contact:

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

Post by kocher »

I'm trying to get the chart data from my database:

http://kocher.es/wdsparkline.php

:)
Image
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 »

steve wrote:You have the same issue as Ron (nitrx) earlier in the thread - decimal commas. Using the 'RC' version of the web tag may fix that, at a guess - <#RCRecentOutsideTemp>
Steve thanks for the suggestion it works :clap: , dumb of me to forget that tag :groan:
Mapantz
Posts: 1775
Joined: Sat 17 Dec 2011 11:55 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 11 x64
Location: Dorset - UK
Contact:

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

Post by Mapantz »

Late to the game as always.. hehe

I just want to thank the OP, the post was informative and an easy guide to get these working without a hitch. :)
Image
Mapantz
Posts: 1775
Joined: Sat 17 Dec 2011 11:55 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 11 x64
Location: Dorset - UK
Contact:

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

Post by Mapantz »

I've been having a little play around with these sparklines, and finally decided where to put them .. :lol:

I was wondering if anybody could help? In the tooltip, when moving over the line it shows up as ie;

Temperature in the period 21:37 to 22:32
13.2 °C

Is there a way to show the actual time of each recent data point? ie;

Temperature
Time: 21:37
13.2 °C

Many thanks.
Image
jnstllng
Posts: 12
Joined: Sun 15 Jan 2017 10:10 pm
Weather Station: WH1080
Operating System: Raspian, Windows 7, Windows 10

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

Post by jnstllng »

Nice piece of stuff that I managed to get working on my site https://wetter.teamstelling.de.
Unfortunately, the tooltip box shows up too small and I cannot find the issue that is causing it. See the attached picture.

Any idea how to solve this?
You do not have the required permissions to view the files attached to this post.
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 »

jnstllng wrote:Nice piece of stuff that I managed to get working on my site https://wetter.teamstelling.de.
Unfortunately, the tooltip box shows up too small and I cannot find the issue that is causing it. See the attached picture.

Any idea how to solve this?
Not sure but you've disableHighlight true according the description : Set to true to disable the highlighting of individual values when mousing over a sparkline.
Defaults to false

So try to set it to false
jnstllng
Posts: 12
Joined: Sun 15 Jan 2017 10:10 pm
Weather Station: WH1080
Operating System: Raspian, Windows 7, Windows 10

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

Post by jnstllng »

I have set disabletooltip to true to solve this issue temporarily.
This does not show the tooltip anymore since it is not shown correctly, but I would like to have this pop up information.
jlmr731
Posts: 225
Joined: Sat 27 Aug 2016 12:11 am
Weather Station: Davis vantage pro 2
Operating System: Debian
Location: Wickliffe, Ohio
Contact:

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

Post by jlmr731 »

Ive done some work on this to incorporate my Realtime database for my output this is the one that MX makes and updates, and one can use any data they have with simple editing of the sql.
Thanks to kocher for giving me a start and other here to get this to work.
It can be easily customized to how many hours to go back (there does seem to be a limit on memory if you try to go over 1000 hours :lol: )
You can add in as many graphs you have data for, need to play around to find what works with wind direction just haven't gotten there yet.

Demo can be seen here http://youngstownweather.dynu.com/sparklines.php

Here is the php code to grab data from database. Works with php5.6 (havent figured out the changes needed for php7)

Code: Select all

<?php
//Info for connection to database
require("db.php");   
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
                  
 // The select statement  
// Change interval to hours for how long to go back 
// select -- list the colums i need to pass, runs a bit quicker than select *
$sql = "select temp, hum, press, dew, heatindex, wchill, wlatest, wspeed, wgust, rfall from Realtime where `LogDateTime` > Now() - interval 24 hour";
$query=mysqli_query($conn, $sql);                   
                   
$i=0;
while ($list = mysqli_fetch_assoc($query)) {      

// make the variables for json_encode $varname  ['db_column'] 

$temp[$i]=$list['temp']*1;
$hum[$i]=$list['hum']*1;
$press[$i]=$list['press']*1;
$dew[$i]=$list['dew']*1;
$heatindex[$i]=$list['heatindex']*1;
$wchill[$i]=$list['wchill']*1;
$wlatest[$i]=$list['wlatest']*1;
$wspeed[$i]=$list['wspeed']*1;
$wgust[$i]=$list['wgust']*1;
$rfall[$i]=$list['rfall']*1;
  
$i++;
  } 	

And for the script part you just need to make a few changes to incorporate data I did my best to make comments on it and only posting 2 charts to show diffrences

Code: Select all

<script type="text/javascript">
   /* <![CDATA[ */
   $(function() {
      /* temperature sparkline() function */
// json_encode variable name to output data for script inside php
//also change var's within script to accommodate your needs its in 4 places 
      var recent_outside_temp = <?php echo json_encode($temp) ?>;
      $('.temperature').sparkline(recent_outside_temp, {
          type: "line",
         tooltipSuffix: " F",
// using php to get time stamps for chart data change strtotime to hour needed to go back 
         tooltipChartTitle: 'Temperatures in the period<br/><?php echo date('h:i A',(strtotime ( '-24 hour') )) ?> to <?php echo date('h:i A') ?>',        
	 width: 370,
         height: 65,
      });  
 // Insert a second/subsequent sparkline function here
 });
 /* <![CDATA[ */
   $(function() {
      /* temperature sparkline() function */
      var recent_press = <?php echo json_encode($press) ?>;
      $('.press').sparkline(recent_press, {
          type: "line",
         tooltipSuffix: " inHg",
         tooltipChartTitle: 'Barometer in the period<br/><?php echo date('h:i A',(strtotime ( '-24 hour') )) ?> to <?php echo date('h:i A') ?>',        
	 width: 370,
         height: 65,
      
   });
   // Insert a second/subsequent sparkline function here

   });
    /* ]]> */
</script>
A Big thanks to mikechristelow for the scripts and a great job of documenting to get us rolling.
jlmr731
Posts: 225
Joined: Sat 27 Aug 2016 12:11 am
Weather Station: Davis vantage pro 2
Operating System: Debian
Location: Wickliffe, Ohio
Contact:

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

Post by jlmr731 »

I did a bit more reading to get this to work with php7.1 and i saw my error's and to close the connection to mysql properly.
simple changes added

Code: Select all

CHANGE
 $query=mysqli_query($conn, $sql); 
TO
if ($query=mysqli_query($conn, $sql)) {

ADD

mysqli_free_result($query);
}
mysqli_close($conn);	
 

Code: Select all

<?php
include_once "/var/www/db.php";
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
                  
 // The select statement  
// Change interval to hours for how long to go back 
$sql = "select temp, hum, press, dew, heatindex, wchill, wlatest, wspeed, wgust, rfall from Realtime where `LogDateTime` > Now() - interval 24 hour";
// $query=mysqli_query($conn, $sql);                   
 if ($query=mysqli_query($conn, $sql)) {                   
$i=0;
while ($list = mysqli_fetch_assoc($query)) {      



$temp[$i]=$list['temp']*1;
$hum[$i]=$list['hum']*1;
$press[$i]=$list['press']*1;
$dew[$i]=$list['dew']*1;
$heatindex[$i]=$list['heatindex']*1;
$wchill[$i]=$list['wchill']*1;
$wlatest[$i]=$list['wlatest']*1;
$wspeed[$i]=$list['wspeed']*1;
$wgust[$i]=$list['wgust']*1;
$rfall[$i]=$list['rfall']*1;
  
$i++;
  } 	
mysqli_free_result($query);
}
mysqli_close($conn);	
?>
Seems to work better too
Post Reply