Page 1 of 28

Highcharts Graphs

Posted: Mon 19 Nov 2012 8:18 pm
by mcrossley
Today's tinkering... My initial stab at putting some Highcharts graphs together. I have just plonked them in my existing page whilst I figure out a better date range selection mechanism.

These are grabing the data via ajax and PHP generated JSON data from a MySQL database on my creaky old laptop out in the shed. So performance may not be up to much.

I also have a problem with the xAxis date stamps being ahead of the data by one day on some graphs - I have yet to figure this out!

After the date range selection mechanism, a decent 'theme' for the graphs is in order.

Edit: I know there is already a 'package' out there that pulls the data from WU, but I do not wish to use WU as a data source, and where is the fun if it is all already figured out for you!

Re: Highcharts Graphs

Posted: Mon 19 Nov 2012 8:33 pm
by steve
Ah, excellent. I'll be drawing on your expertise at some point ;)

Re: Highcharts Graphs

Posted: Mon 19 Nov 2012 10:11 pm
by RayProudfoot
Very impressive charts Mark, well done. :clap:

One day when I get a MySQL database on my webserver this is what I'd like to display.

Re: Highcharts Graphs

Posted: Tue 20 Nov 2012 2:37 am
by KarlS
I've been using Highchart graphs on my web site for over a year now. It is a very powerful packge and free for non-commerical use. The data are stored in MySQL, queried with PHP. At the moment I only use it to display (the last) 24 hours of monthly log data, but it would be quite easy to modify the script to use dayfile data or any aggregation of monthly log data.

Check out the live graphs here.

Re: Highcharts Graphs

Posted: Tue 20 Nov 2012 2:39 am
by gemini06720
I know there is already a 'package' out there that pulls the data from WU, but I do not wish to use WU as a data source, and where is the fun if it is all already figured out for you!
Mark, I do not know which package you are referring to...

But the one package I have been using on my different web sites (such as 'Weather Underground Graphics') can 'pull' data not only from Weather Underground but also from the MySQL database produced by an associated program to Weather Display (which I am not using on my development computer, so I cannot try it) or from both.

Mark, I have noticed some minor 'glitches' with the display of the degree symbol on the temperature charts.

The 'Highcharts' is quite an impressive package, a bit confusing at first but with so many possibilities...

Re: Highcharts Graphs

Posted: Tue 20 Nov 2012 8:55 am
by mcrossley
steve wrote:Ah, excellent. I'll be drawing on your expertise at some point
No problem there Steve.
gemini06720 wrote:Mark, I have noticed some minor 'glitches' with the display of the degree symbol on the temperature charts.
Yes, I'll try and sort that today - it doesn't happen on my test pages.

I'm also thinking that the xAxis date 'issue' may actually be a bug in the highcharts package - I'm running a 'dev' version not the stable release because I wanted the stepped line on the 'rainfall by year' graph - a feature that hasn't been released yet.

Re: Highcharts Graphs

Posted: Tue 20 Nov 2012 9:35 am
by mcrossley
All fixed...

Corrupt degree symbol: I had lost my minimiser 'batch file' that I used to drag-n-drop scripts to, when I recreated it I forgot to put in the option for UTF-8 encoding.

Bad xAxis dates: Looks like a bug in Highcharts handling midnight date/times (as stored in my database), the xAxis correctly decodes the Javascript time (in millisecs sincs 1970) to the date , but the data point tooltip decode seems to think it is the previous day. Adding 10 minutes to time before passing it to Highcharts seems to be a workaround for now.

Re: Highcharts Graphs

Posted: Fri 23 Nov 2012 7:43 pm
by mcrossley
Hmm, playing around with a 'real time' kind of thing. This is just an ugly kludge-up but you get the idea...

http://weather.wilmslowastro.com/index2.htm now deleted.

Re: Highcharts Graphs

Posted: Fri 23 Nov 2012 9:16 pm
by nitrx
Looks great, besides the graph restarts achter a refresh of he page

Re: Highcharts Graphs

Posted: Fri 23 Nov 2012 10:08 pm
by mcrossley
nitrx wrote:the graph restarts achter a refresh of he page
Yep, you would have to work out some way of caching the last hours worth of data from realtime.txt on the web server to pre-populate the graphs...

Re: Highcharts Graphs

Posted: Sat 24 Nov 2012 5:25 pm
by mcrossley
I have added caching of the last hours worth of realtime.txt data on my web server, so the 'realtime' graph is now pre-populated with some data...

http://weather.wilmslowastro.com/index2.htm Edit: now deleted

Re: Highcharts Graphs

Posted: Sat 24 Nov 2012 6:08 pm
by nitrx
Nice, still a disadvantage the chart doens't update automatically , I see you use a diffrent realtime.txt and also php ? I cant't copy code ;)

Re: Highcharts Graphs

Posted: Sat 24 Nov 2012 6:13 pm
by mcrossley
Not sure what you mean? The graph preloads the last hours data, then updates every minute from then on - shame I do not have a Davis station which much faster updates available, for the FO updates every minute are about all you get?

The PHP source is available try the parameter "view=sce"

http://weather.wilmslowastro.com/realti ... p?view=sce

Re: Highcharts Graphs

Posted: Sat 24 Nov 2012 6:24 pm
by nitrx
mcrossley wrote:Not sure what you mean? The graph preloads the last hours data, then updates every minute from then on
I was looking at the graph for several minutes no new lines or points wre plot, when I did a refresh of the page I saw the new plotted graph, I also dont have a Davis so updates are about 48 seconds by the station.

I see you've upated the page works fine now great job !

Re: Highcharts Graphs

Posted: Sat 24 Nov 2012 6:28 pm
by mcrossley
maybe I was still 'fiddling' with it - I'm leaving it now to go out for the evening so is should be stable, and updating ;)