Welcome to the Cumulus Support forum.

Latest Cumulus MX release v3.0.0 build 3050 - 1 May 2019.
Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014

See the Wiki for downloading either version.

Highcharts 'Recent' graphs

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

Moderator: daj

tobyspond
Posts: 252
Joined: Fri 24 Jun 2011 5:57 pm
Weather Station: Davis Vantage Pro2
Operating System: Windows 10
Location: Lamoine, Maine, USA

Re: Highcharts 'Recent' graphs

Post by tobyspond » Mon 27 May 2013 10:17 pm

Hi Mark,

I have not encountered this.

https://dev.mysql.com/doc/refman/5.0/en ... pport.html

also see UTC_TIMESTAMP

SET time_zone = timezonename; sets the time zone for the current session.

Can highcharts convert the datetime from UTC when it creates the graph?

edited: check this out maybe it will do what you need: http://jsfiddle.net/VrJN2/


Kerry

kapo
Posts: 247
Joined: Thu 03 Jan 2013 1:59 pm
Weather Station: Davis VP2
Operating System: Windows 10
Location: Vihtavuori, Laukaa, Finland

Re: Highcharts 'Recent' graphs

Post by kapo » Thu 06 Jun 2013 5:20 pm

Finally!! After about thousand versions I got it working!!!! Thank You Mark for Your advice, althought that advice wasn't excactly to me, I followed Your teachings and got it working. Now I wonder how it is possible make that auto brolling 12 h chart with using tha MySQL realtime table? I think that Yours rolling chart uses that realtime MySQL table. Is it possible to get some advice how to do that kind of chart. My rolling chart is done from realtimelog.txt folder, which is created with that realtimelog.php . But after I have managed to create that realtime table, that realtimelog.txt file should come useless if I could make that chart from that table? Or is it too big job to advice me in this prob? I really hope that it is not...


With best regards:

-kapo-

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

Re: Highcharts 'Recent' graphs

Post by mcrossley » Fri 07 Jun 2013 11:24 am

kapo

You just need to call a php script that queries your realtime table rather than the text based logfile.

Here is mine...
http://weather.wilmslowastro.com/utils/ ... p?view=sce
Last edited by mcrossley on Fri 03 Oct 2014 7:52 am, edited 1 time in total.

User avatar
N0BGS
Posts: 200
Joined: Sat 10 Nov 2012 2:26 am
Weather Station: Davis Vantage Pro 2
Operating System: Win7vm,VMWare ESXi 6.5
Location: Hermon, Maine USA
Contact:

Re: Highcharts 'Recent' graphs

Post by N0BGS » Mon 10 Jun 2013 3:16 pm

That's the part I keep getting stuck on.

Call it from a JavaScript, a PHP call or HTML?

I see that the realtimeCumulus.htm page uses realtimeCumulus.js to call the realtime.txt file.

Code: Select all

// Fetch the realtime.txt file
		getRealtime = function () {
			$.ajax({
				url: realtimeFile,
				datatype: 'text',
				success: function (data) { parseRealtime(data); },
				cache: false
			});
		},
Can I just change the URL in Ajax to call realtimeLogSql.php or similar?

Sorry for the dumb questions. Very limited scripting skills here.

--Kurt
Blitzortung Station 1809

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

Re: Highcharts 'Recent' graphs

Post by mcrossley » Mon 10 Jun 2013 3:28 pm

Hi Kurt

I use that PHP script to return JSON encoded data, so the JavaScript on the web page has to change as well, so instead of using field numbers for the realtime log file, it uses the returned JSON data. The JSON data already has all the field names in it so most of the work is done for you. Here is a snippet of the my current page code that fetchs the json data and puts it into the Highcharts series data...

Code: Select all

	$.ajax({
		url: './realtimeLogSql.php?recordAge=12&recordUnit=hour&rfall&press&wspeed&temp&dew&wgust&hum&IsSunny',
		datatype: 'json',
		cache: false,
		success: function (resp) {
			// pre-load the log data
			options.series[0].data = resp.rfall;
			options.series[1].data = resp.press;
			options.series[2].data = resp.wspeed;
			options.series[3].data = resp.temp;
                      ....

kapo
Posts: 247
Joined: Thu 03 Jan 2013 1:59 pm
Weather Station: Davis VP2
Operating System: Windows 10
Location: Vihtavuori, Laukaa, Finland

Re: Highcharts 'Recent' graphs

Post by kapo » Wed 12 Jun 2013 5:39 am

Hi Mark!

Thank You very much! Really!!!! Now MySQL works, and my near realtime table reads also data from MySQL!!! Without Your advice I really couldn't do those to work.These tables have so much information in. And the best of all, I have noticed that old dog can learn new tricks!!! And I'm vey happy about that. Next step is that history graphs table...


with best regards from sunny Finland

-kapo-

User avatar
N0BGS
Posts: 200
Joined: Sat 10 Nov 2012 2:26 am
Weather Station: Davis Vantage Pro 2
Operating System: Win7vm,VMWare ESXi 6.5
Location: Hermon, Maine USA
Contact:

Re: Highcharts 'Recent' graphs

Post by N0BGS » Thu 13 Jun 2013 7:12 pm

So, then presumably all this:

Code: Select all

$(function () {
	var chart, options, rawRealtime, interval,
		// countdown timer, 60 secs/1 min
		count = 60,

		// location of the realtime.txt file
		realtimeFile = './realtime.txt',

		// The various delimiters used in your version of realtime.txt
		dateDelimiter = '/',
		timeDelimiter = ':',

		// 120 = 2 hours at 1 minute per data point
		numDisplayRecs = 480,

		// Fields of realtime.txt file
		// Use the same names as the corresponding web tags
		fields = {
			date: 0, time: 1, temp: 2, hum: 3, dew: 4, wspeed: 5, wlatest: 6, bearing: 7, rrate: 8, rfall: 9,
			press: 10, currentwdir: 11, beaufortnumber: 12, windunit: 13, tempunitnodeg: 14, pressunit: 15,
			rainunit: 16, windrun: 17, presstrendval: 18, rmonth: 19, ryear: 20, rfallY: 21, intemp: 22,
			inhum: 23, wchill: 24, temptrend: 25, tempTH: 26, TtempTH: 27, tempTL: 28, TtempTL: 29, windTM: 30,
			TwindTM: 31, wgustTM: 32, TwgustTM: 33, pressTH: 34, TpressTH: 35, pressTL: 36, TpressTL: 37,
			version: 38, build: 39, wgust: 40, heatindex: 41, humidex: 42, UV: 43, ET: 44, SolarRad: 45,
			avgbearing: 46, rhour: 47, forecastnumber: 48, isdaylight: 49, SensorContactLost: 50, wdir: 51,
			cloudbasevalue: 52, cloudbaseunit: 53, apptemp: 54, SunshineHours: 55, CurrentSolarMax: 56, IsSunny: 57
		},

		// Fetch the realtime.txt file
		getRealtime = function () {
			$.ajax({
				url: realtimeFile,
				datatype: 'text',
				success: function (data) { parseRealtime(data); },
				cache: false
			});
		},

		// Extract the fields from realtime.txt and update graph
		parseRealtime = function (data) {
			var tim,
				shift = chart.series[0].data.length < numDisplayRecs ? false : true;

			rawRealtime = data.split(' ');
			tim = getDate(rawRealtime[0], rawRealtime[1]);
			chart.series[0].addPoint([tim, +getRealtimeValue('rfall')], false, shift);
			chart.series[1].addPoint([tim, +getRealtimeValue('press')], false, shift);
			chart.series[2].addPoint([tim, +getRealtimeValue('wspeed')], false, shift);
			chart.series[3].addPoint([tim, +getRealtimeValue('temp')], false, shift);
			chart.redraw();
		},

 		// Returns the value from realtime.txt given the field name
		getRealtimeValue = function (field) {
			return rawRealtime[fields[field]];
		},

		// Returns a UTC date value from date & time strings
		getDate = function (strDate, strTime) {
			var d = strDate.split(dateDelimiter),
				t = strTime.split(timeDelimiter);
			return Date.UTC('20' + d[2], +d[1] - 1, d[0], t[0], t[1], t[2]);
		};
Needs to be removed from realtimeCumulus.js?

Sorry, still can't make it work "live" without using realtime.txt.
Blitzortung Station 1809

User avatar
N0BGS
Posts: 200
Joined: Sat 10 Nov 2012 2:26 am
Weather Station: Davis Vantage Pro 2
Operating System: Win7vm,VMWare ESXi 6.5
Location: Hermon, Maine USA
Contact:

Re: Highcharts 'Recent' graphs

Post by N0BGS » Thu 13 Jun 2013 7:15 pm

Kapo:

I don't understand how realtime from MYSQL is working on your site either, since you still have all the references to realtime.txt in your realtimeCumulus.js script also.

Obviously I'm missing something here. :roll:

--Kurt
Blitzortung Station 1809

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

Re: Highcharts 'Recent' graphs

Post by mcrossley » Fri 14 Jun 2013 10:15 am

Basically yes, you need to remove the realtime log file stuff from the script.

My 'now' page uses a combination of techniques. On initial load it populates the HigCharts graph from the realtime MySQL table and the rest of the page from a text data file, but for updates it just reads a text data file because it provides more data for the page than the realtime file provides. So some of the data is used to update the page, and some is also pushed into the chart to update that as well.

I want to rationalise my data feeds, they have been implemented piecemeal as I played around with things. I will end up with Cumulus just producing the realtime.txt file, plus one or two JSON files with all the other dynamic data in them (used by the index page, and gauges page).

kapo
Posts: 247
Joined: Thu 03 Jan 2013 1:59 pm
Weather Station: Davis VP2
Operating System: Windows 10
Location: Vihtavuori, Laukaa, Finland

Re: Highcharts 'Recent' graphs

Post by kapo » Fri 14 Jun 2013 6:32 pm

mcrossley wrote:Basically yes, you need to remove the realtime log file stuff from the script.

My 'now' page uses a combination of techniques. On initial load it populates the HigCharts graph from the realtime MySQL table and the rest of the page from a text data file, but for updates it just reads a text data file because it provides more data for the page than the realtime file provides. So some of the data is used to update the page, and some is also pushed into the chart to update that as well.

I want to rationalise my data feeds, they have been implemented piecemeal as I played around with things. I will end up with Cumulus just producing the realtime.txt file, plus one or two JSON files with all the other dynamic data in them (used by the index page, and gauges page).
Hi
I tried to change those realtime.txt files to MySQL table data, but I didn't manage to get that script to update automaticly, only mnually. So that realtime txt data comes from realtime.txt and rest of data from MySQL as json. And therefore, if we are correctly detailed, that table is "near realtimedata from Vihtavuori", not realtimedata. And Mark, I also think how I could get my webpage to work so that only realtime.txt and CU-tags come produced by Cumulus and everything else is done in my webpage... I follow with interest the development of Your pages, if You only give an interim basis the progress of them...

regards.
-kapo-

kapo
Posts: 247
Joined: Thu 03 Jan 2013 1:59 pm
Weather Station: Davis VP2
Operating System: Windows 10
Location: Vihtavuori, Laukaa, Finland

Re: Highcharts 'Recent' graphs

Post by kapo » Sun 16 Jun 2013 6:48 pm

Hi Mark

A simply (hope not stupid) question: Is it how complicated or hard work to do a table, where I can do queries from MySQL, for example from Monthly table, so that they are text format data and in table...?
F.e. if I want to know highest temps and windspeed and wind run from 01/04/2013......06/06/2013? Is it possible to do that kind of table, where I can make a query to MySQL between two dates, or two months and so on, and the values come as "text" into a table. Then I could get all monthly, weekly, yearly and daily records and temp a year ago from today, from MySQL, and much more in numeric format. It should be almoust like that historic graphs table, only in text format....

Regards:
-kapo-

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

Re: Highcharts 'Recent' graphs

Post by mcrossley » Sun 16 Jun 2013 7:07 pm

The existing dayfile table sounds like what you need. It also sounds like a job for a PHP based page. PHP queries the MySQL dayfile table for the data then formats a HTML page to display it? The sort of data you list there is simple to extract from the dayfile table.


This sort of thing...

Code: Select all

SELECT MONTH(`LogDate`), MAX(`MaxTemp`), MAX(`HighAvgWSpeed`), MAX(`TotWindRun`), SUM(`TotWindRun`)
FROM `daydata`
WHERE `LogDate` >= '2013-04-01' AND `LogDate` <= '2013-06-06' 
GROUP BY MONTH(`LogDate`)
Gives (with my data)...

Code: Select all

MONTH(`LogDate`)  MAX(`MaxTemp`)  MAX(`HighAvgWSpeed`)  MAX(`TotWindRun`)  SUM(`TotWindRun`)  
4                 18.3            19.3                  206.9              2863.4 
5                 23.7            16.0                  161.5              2090.5 
6                 22.2             9.0                   68.3               309.6 


Though of course in reality you would parametrise it to make it more generally useful

User avatar
meteotortosa
Posts: 323
Joined: Thu 04 Dec 2008 12:15 am
Weather Station: Davis Vantage Pro2 Plus
Operating System: Windows XP SP3
Location: Tortosa-Baix Ebre- Catalonia
Contact:

Re: Highcharts 'Recent' graphs

Post by meteotortosa » Sat 06 Jul 2013 9:18 pm

Are there instruccions to install? :roll:
Weather in Tortosa (NE Spain), updated every 15'
Image Image

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

Re: Highcharts 'Recent' graphs

Post by mcrossley » Sun 12 Jan 2014 12:04 am

All change!

I have updated my 'recent graphs' to use HighStock charts rather than the standard charts, these allow you to use whatever zoom level you want rather than being stuck with what I pre-selected. I have also allowed you go back over 4 days of data, though it can take a bit longer to load now than before.

http://weather.wilmslowastro.com/highch ... Graphs.htm

tobyspond
Posts: 252
Joined: Fri 24 Jun 2011 5:57 pm
Weather Station: Davis Vantage Pro2
Operating System: Windows 10
Location: Lamoine, Maine, USA

Re: Highcharts 'Recent' graphs

Post by tobyspond » Sun 12 Jan 2014 12:17 am

Nice job. The graphs look good and work well. Loading was variable: sometimes right away, other times a little slow.

Post Reply