Page 3 of 5

Re: Highcharts 'Recent' graphs

Posted: Mon 27 May 2013 10:17 pm
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

Re: Highcharts 'Recent' graphs

Posted: Thu 06 Jun 2013 5:20 pm
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-

Re: Highcharts 'Recent' graphs

Posted: Fri 07 Jun 2013 11:24 am
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

Re: Highcharts 'Recent' graphs

Posted: Mon 10 Jun 2013 3:16 pm
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

Re: Highcharts 'Recent' graphs

Posted: Mon 10 Jun 2013 3:28 pm
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;
                      ....

Re: Highcharts 'Recent' graphs

Posted: Wed 12 Jun 2013 5:39 am
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-

Re: Highcharts 'Recent' graphs

Posted: Thu 13 Jun 2013 7:12 pm
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.

Re: Highcharts 'Recent' graphs

Posted: Thu 13 Jun 2013 7:15 pm
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

Re: Highcharts 'Recent' graphs

Posted: Fri 14 Jun 2013 10:15 am
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).

Re: Highcharts 'Recent' graphs

Posted: Fri 14 Jun 2013 6:32 pm
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-

Re: Highcharts 'Recent' graphs

Posted: Sun 16 Jun 2013 6:48 pm
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-

Re: Highcharts 'Recent' graphs

Posted: Sun 16 Jun 2013 7:07 pm
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

Re: Highcharts 'Recent' graphs

Posted: Sat 06 Jul 2013 9:18 pm
by meteotortosa
Are there instruccions to install? :roll:

Re: Highcharts 'Recent' graphs

Posted: Sun 12 Jan 2014 12:04 am
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

Re: Highcharts 'Recent' graphs

Posted: Sun 12 Jan 2014 12:17 am
by tobyspond
Nice job. The graphs look good and work well. Loading was variable: sometimes right away, other times a little slow.