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

BCJKiwi
Posts: 856
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 » Fri Apr 11, 2014 11:14 am

Good to see it is sorted!

All the best for a quick full recovery!

User avatar
marfanuk
Posts: 45
Joined: Wed Nov 06, 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)

Postby marfanuk » Fri Apr 11, 2014 11:48 am

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

User avatar
HRVistaWeather
Posts: 210
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 » Sat Apr 12, 2014 5:39 am

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

User avatar
kocher
Posts: 66
Joined: Sat Apr 19, 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)

Postby kocher » Tue Nov 11, 2014 9:40 pm

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: 26551
Joined: Mon Jun 02, 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)

Postby steve » Tue Nov 11, 2014 11:07 pm

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
-----
Hosting available for Cumulus web sites. See http://sandaysoft.com/forum/viewtopic.php?f=2&t=11876

Please read the posts in the Announcements section about the current status of Cumulus development since I have retired from my day job

User avatar
kocher
Posts: 66
Joined: Sat Apr 19, 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)

Postby kocher » Wed Nov 12, 2014 12:01 am

Thank you very much Steve :D

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

Greetings from San Sebastian
Image

User avatar
kocher
Posts: 66
Joined: Sat Apr 19, 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)

Postby kocher » Wed Nov 12, 2014 2:14 pm

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

http://kocher.es/wdsparkline.php

:)
Image

User avatar
nitrx
Posts: 1304
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 » Tue Nov 18, 2014 3:50 pm

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:

User avatar
Mapantz
Posts: 555
Joined: Sat Dec 17, 2011 11:55 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 10 x64 - A beast.
Location: Wareham, Dorset - UK
Contact:

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

Postby Mapantz » Sun Aug 14, 2016 9:51 pm

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
Image

User avatar
Mapantz
Posts: 555
Joined: Sat Dec 17, 2011 11:55 am
Weather Station: Davis Vantage Pro2
Operating System: Windows 10 x64 - A beast.
Location: Wareham, Dorset - UK
Contact:

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

Postby Mapantz » Wed Aug 17, 2016 9:46 pm

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
Image

jnstllng
Posts: 11
Joined: Sun Jan 15, 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)

Postby jnstllng » Sun Feb 26, 2017 9:57 pm

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

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: 11
Joined: Sun Jan 15, 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)

Postby jnstllng » Mon Feb 27, 2017 4:08 pm

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: 122
Joined: Sat Aug 27, 2016 12:11 am
Weather Station: Davis vantage pro 2
Operating System: Debian
Location: Youngstown, Ohio
Contact:

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

Postby jlmr731 » Wed Mar 01, 2017 1:48 am

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: 122
Joined: Sat Aug 27, 2016 12:11 am
Weather Station: Davis vantage pro 2
Operating System: Debian
Location: Youngstown, Ohio
Contact:

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

Postby jlmr731 » Wed Mar 01, 2017 3:52 am

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


Return to “Web site - General”

Who is online

Users browsing this forum: No registered users and 3 guests