Highcharts Graphs

[nitrx]

Wow...well done, Ron!

I've been working on the same thing for DAYS now with little success.

Are you pulling this data from a MySQL database, or from a generated text file? Also, what do you use to format the data into a useable form for
Highcharts? An intermediate PHP script or some other method?

Care to share your code??

Thanks,

--Kurt

Kurt the credits are for Mark Mccrossley he has written the new Importfile see the wiki http://wiki.sandaysoft.com/a/ImportCumulusFile so all the code is availble you'll have to modify maybe some things , the highchartscode is in his source over here view-source:http://weather.wilmslowastro.com/highch ... Graphs.htm pay attention to the recentGraphs.js file included in this page in the script is also realtimeLogSql.php example of the source is here http://weather.wilmslowastro.com/realti ... p?view=sce
confusing in this latest php script is Call this script as e.g. ...
// realtimeLogTable.php?recordAge=NNN&recordUnit=XXX&nth=NNN&temp&press
// realtimeLogTable.php?recordAge=6&recordUnit=hour&nth=5&temp&press

Thats why I renamed realtimeLogSql.php to realtimeLogTable.php the latest is used by recentGraphs.js

I only did not know how to get the values in the database on my local server so Mark wrote a batchfile see some post back in this thread.
Last but not least I think if you want to run the script on a remote hosted server you will get a huge datatransfer because 48 hours of data generates every minute about 1,5 to 2 megabyte data. You will also have to run a cronjob evry minute for importing the data in your database..

[N0BGS]

Ron:

I've had all those files for a week or so, but no luck.

So last night (don't tell anyone ) I "borrowed" the source code from your site and was able to make it work on my site. Not ready for public viewing yet but it does work. So thanks very much to you and Mark "the coding genius" Crossley.

BTW, your web site also causes Sophos AV to generate a warning. I just turned web protection off and went there anyway as I am certain it is a false positive.

At the moment, my site does not automatically update the Highcharts as I would like it to. I have to refresh the page to update the data. Have to figure out why that is.

Thanks again,

--Kurt

[nitrx]

Kurt the trendgraphs aren't updated automaically there's no such thing as ajax in it, the realtime graphs do http://apeldoorn.hollandweather.net/rt/ because they use the realtime.txt for updating the page evry minute in my case.

Hmm strange you also get a warning can you checkout if it does to with my ip-adress http://80.57.105.13/rt/grafiek.html

Thanks in advance

[N0BGS]

Ron:

If I go to the IP URL I don't get the Sophos AV warning.

On your /RT page are you pulling the data from your MySQL db, or the realtime.txt file?

--K

[nitrx]

Thanks Kurt , I think I need another url

The realtime graph is made from realtime.log (created fro realtime.txt) http://wiki.sandaysoft.com/a/Highcharts_-_Realtime

[Werk_AG]

Thanks Kurt , I think I need another url

Just for you to know...

Blocked by URL Filter Database
Your requested URL has been blocked by the McAfee Web Gateway URL Filter database module. The URL is listed in categories that are not allowed by your administrator at this time.

URL: http://apeldoorn.hollandweather.net/rt/
URL Categories: Malicious Sites
Reputation: High Risk
Media Type:

[nitrx]

Thanks Kurt , I think I need another url

Just for you to know...

Blocked by URL Filter Database
Your requested URL has been blocked by the McAfee Web Gateway URL Filter database module. The URL is listed in categories that are not allowed by your administrator at this time.

URL: http://apeldoorn.hollandweather.net/rt/
URL Categories: Malicious Sites
Reputation: High Risk
Media Type:

Thanks I've googled it McAfee seems to be very strict anyway I think I'll have to register another domain , for the time being http://editspace.sytes.net/rt should be clean I hope

[Werk_AG]

... for the time being http://editspace.sytes.net/rt should be clean I hope

Yes, it is.

[BCJKiwi]

Confirm the IP and editspace.sytes.net URLS are OK for me as well.

[nitrx]

Thanks for conformation

Ron

[N0BGS]

I have the highcharts working now....sort of.

I want to display barometric pressure as inHg.

This is how the chart is being displayed:

chart.png

Obviously we will never have a pressure of 26.000 or 33.000...unless there is some kind of a super hurricane.

I'd like the resolution to be in the range of 28.50 to 31.50. Similar to this page: http://www.westfordweather.net/graphs/graph5.php

The recentGraphs.js code snippet that controls the pressure chart display is:

Code: Select all

var pressure = (function () {
	// define the options
	var options = {

		chart : {
			renderTo : 'container',
			type : 'line'
		},

		credits : {
			enabled : false
		},

		title : {
			text : 'Recent Atmospheric Pressure'
		},

		subtitle : {
			text : 'Sea Level Pressure (in Hg)'
		},

		xAxis : {
			type : 'datetime',
			labels : {
				align : 'left'
			},
			maxPadding : 0.005,
			minPadding : 0.005,
			dateTimeLabelFormats : {
				day : '%e %b',
				week : '%e %b %y',
				month : '%b %y',
				year : '%Y'
			}
		},

		yAxis : [
            { // left y axis
				title : {
					text : 'Pressure (in Hg)'
				},
				minRange : 5,
				labels : {
					align : 'right',
					x : -5,
					formatter : function () {
						return parseInt(this.value, 10);
					}
				}
			}, { // right y axis
				linkedTo : 0,
				gridLineWidth : 0,
				opposite : true,
				title : {
					text : null
				},
				labels : {
					align : 'left',
					x : 5,
					formatter : function () {
						return parseInt(this.value, 10);
					}
				}
			}
		],

		legend : {
			enabled : false
		},

		tooltip : {
			shared : true,
			crosshairs : true,
			valueSuffix : ' inHg',
			formatter : function () {
				var point = this,
				    series = this.points[0].series;
				return '<span style="font-size:10px">' + Highcharts.dateFormat('%a, %b %e, %H:%M', point.x) + '</span><br>' +
					'<span style="color:' + series.color + '">' + series.name + '</span>: ' +
					'<b> ' + Highcharts.numberFormat(point.y, 3, '.', '') + '</b> ';
			}
		},

I have tried many different variables but still can get the display I want.

Any ideas?

--Kurt

[rci136]

Code: Select all

 yAxis : [
            { // left y axis
            title : {
               text : 'Pressure (in Hg)'
            },
            minRange : 5,
            labels : {
               align : 'right',
               x : -5,
               formatter : function () {
                  return parseInt(this.value, 10);

Try changing the "minRange to something like "minRange : 0.03,"
You can play with that number to get it where you want.

Jim

[N0BGS]

Thanks for the input, Jim.

With the help of some coder friends of mine I ended up doing this:

Code: Select all

yAxis : [
            { // left y axis
				title : {
					text : 'Pressure (in Hg)'
				},
				minRange : 0.001,
				labels : {
					align : 'right',
					x : -5,
					formatter : function () {
						return parseFloat(this.value).toFixed(2);
					}
				}
			}, { // right y axis
				linkedTo : 0,
				gridLineWidth : 0,
				opposite : true,
				title : {
					text : null
				},
				labels : {
					align : 'left',
					x : 5,
					formatter : function () {
						return parseFloat(this.value).toFixed(2);

Changing the " return parseInt(this.value, 10); " to what you see above. Changing that and the minRange value to 0.001 gave me this output:

chart_resize.png

I also added an extra decimal place (total of 3) to get pressure resolutions like 29.592, etc, which should smooth the appearance of the chart over time. You can just see that beginning to happen at the right hand extreme end of the chart. Having only two decimal places results in the "staircase" appearance visible over most of the earlier portion of the chart when using in Hg as your barometric UoM.

Finally, I added the extra decimal place to the pressure-related tables in MySql, namely Monthly, Dayfile and Realtime, changing those fields from "decimal(6,2)" to "decimal(6,3)"

Hopefully, this very long post will help some of the rest of you, too.

Thanks,

--Kurt

[gwheelo]

I am off to a rocky start using Highcharts realtime.

Here are the errors I am encoutering - but they are probably only the tip of the iceburg.

SCRIPT5007: Unable to get property 'push' of undefined or null reference
highcharts.js, line 214 character 353
SCRIPT5007: Unable to get property 'push' of undefined or null reference
highcharts.js, line 214 character 353
SCRIPT5007: Unable to get property '0' of undefined or null reference
highcharts.js, line 219 character 291
SCRIPT5007: Unable to get property 'push' of undefined or null reference
highcharts.js, line 214 character 353

The disaster is here: http://www.wheelocknet.net/cumulus/highcharts_1.html


Anyone interested in giving me a nudge in the right direction? It will be most appreciated.

gwheelo

[nitrx]

I am off to a rocky start using Highcharts realtime.


The disaster is here: http://www.wheelocknet.net/cumulus/highcharts_1.html


Anyone interested in giving me a nudge in the right direction? It will be most appreciated.

gwheelo

Seems to work fine I don't see errors ( win7 chrome)