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

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 »

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: 246
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 »

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: 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: Highcharts 'Recent' graphs

Post by mcrossley »

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: 205
Joined: Sat 10 Nov 2012 2:26 am
Weather Station: Davis Vantage Pro 2
Operating System: Win10vm,VMWare ESXi 7.0
Location: Hermon, Maine USA
Contact:

Re: Highcharts 'Recent' graphs

Post by N0BGS »

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: 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: Highcharts 'Recent' graphs

Post by mcrossley »

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: 246
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 »

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: 205
Joined: Sat 10 Nov 2012 2:26 am
Weather Station: Davis Vantage Pro 2
Operating System: Win10vm,VMWare ESXi 7.0
Location: Hermon, Maine USA
Contact:

Re: Highcharts 'Recent' graphs

Post by N0BGS »

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: 205
Joined: Sat 10 Nov 2012 2:26 am
Weather Station: Davis Vantage Pro 2
Operating System: Win10vm,VMWare ESXi 7.0
Location: Hermon, Maine USA
Contact:

Re: Highcharts 'Recent' graphs

Post by N0BGS »

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: 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: Highcharts 'Recent' graphs

Post by mcrossley »

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: 246
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 »

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: 246
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 »

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: 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: Highcharts 'Recent' graphs

Post by mcrossley »

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 »

Are there instruccions to install? :roll:
Weather in Tortosa (NE Spain), updated every 15'
Image 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: Highcharts 'Recent' graphs

Post by mcrossley »

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 »

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