Page 2 of 3

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

Posted: Fri 11 Apr 2014 11:14 am
by BCJKiwi
Good to see it is sorted!

All the best for a quick full recovery!

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

Posted: Fri 11 Apr 2014 11:48 am
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

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

Posted: Sat 12 Apr 2014 5:39 am
by BeaumarisWX
Thanks Brian.

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

Posted: Tue 11 Nov 2014 9:40 pm
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

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

Posted: Tue 11 Nov 2014 11:07 pm
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>

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

Posted: Wed 12 Nov 2014 12:01 am
by kocher
Thank you very much Steve :D

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

Greetings from San Sebastian

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

Posted: Wed 12 Nov 2014 2:14 pm
by kocher
I'm trying to get the chart data from my database:

http://kocher.es/wdsparkline.php

:)

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

Posted: Tue 18 Nov 2014 3:50 pm
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:

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

Posted: Sun 14 Aug 2016 9:51 pm
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. :)

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

Posted: Wed 17 Aug 2016 9:46 pm
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.

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

Posted: Sun 26 Feb 2017 9:57 pm
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?

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

Posted: Mon 27 Feb 2017 12:36 pm
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

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

Posted: Mon 27 Feb 2017 4:08 pm
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.

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

Posted: Wed 01 Mar 2017 1:48 am
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.

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

Posted: Wed 01 Mar 2017 3:52 am
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