Trend programing with Javascript

[cbhiii]

If anyone is interested I can write a small Javascript to display the trend over any period of time using the [seq...] variables populated in Meteohub. :woohoo:

My questions is would anyone like this to use on their website and how many hours should the trend be? I think 6 is too long as temp and humidity change quicker than this. I'm thinking 2 or 3 hours for a trend snapshot. Any other ideas? :silly:

[Vetinari]

I am interested. :cheer:

3 or 4 hours are fine.

[cbhiii]

Try this out. In this example I'm using temperature, but the same would be true for humidity, pressure and dew point. I used the average readings for the past three hours to decide trend.

At the end of the script is a document.write statement to display an image file in HTML. If the trend is up then it looks for the image called "1.gif". If it is down then it looks for the image called "-1.gif". If it is steady then the file is called "0.gif". (I can help with this if you need it).

Code: Select all

<script type="text/javascript">

var trend="";
var t1=[seqhour1_th0_temp_c@1];
var t2=[seqhour1_th0_temp_c@2];
var t3=[seqhour1_th0_temp_c@3];
				
if (t3<=t2 && t2<t1){trend="1"}
else if (t3>=t2 && t2>t1){trend="-1"}
else {trend="0"}

document.write("<img border=\\"0\\" src =\\"icons/",trend,".gif\\">");

</script>

[cbhiii]

Updated code to reflect the use of the last 3 completed hours for determining trend. I found that using the current hour was not working, especially at the beginning of the hour when the current hour and 2nd reading matched. This caused the trend to read steady when it was not.

[cbhiii]

I wasn't satisfied with those 3 one hour periods for a trend so I went all crazy and made it more precise.

I made a 15 minute sliding window of time that takes 3 hours of readings and cuts them into 4 data points instead of only having 3 data points. Now I have better trend resolution and it updates every 15 minutes instead of once an hour.

Here is an example using temperature. Hope you find it useful. Cheers!

Code: Select all

<script type="text/javascript">

// Gather Data
var trend="";
var t1=Math.round((([seqmin15_th0_temp_c@1]+[seqmin15_th0_temp_c@2]+[seqmin15_th0_temp_c@3])/3)*10)/10;
var t2=Math.round((([seqmin15_th0_temp_c@4]+[seqmin15_th0_temp_c@5]+[seqmin15_th0_temp_c@6])/3)*10)/10;
var t3=Math.round((([seqmin15_th0_temp_c@7]+[seqmin15_th0_temp_c@8]+[seqmin15_th0_temp_c@9])/3)*10)/10;
var t4=Math.round((([seqmin15_th0_temp_c@10]+[seqmin15_th0_temp_c@11]+[seqmin15_th0_temp_c@12])/3)*10)/10;

// Logic to calculate trend
if ((t4<=t3 && t3<t2 && t2<=t1) || (t4<t3 && t3<=t2 && t2<t1) || (t4<t3 && t3>t2 && t3<t1 && t4<t2)){trend="1"}
else if ((t4>=t3 && t3>t2 && t2>=t1) || (t4>t3 && t3>=t2 && t2>t1) || (t4>t3 && t3<t2 && t3>t1 && t4>t2)){trend="-1"}
else {trend="0"}
		
// Display the result
document.write("<img border=\\"0\\" src =\\"icons/",trend,".gif\\">");

</script>

[cbhiii]

Attached are some trend arrow images if you would like to use them. [file name=Trend_arrows.zip size=2581]http://www.meteohub.de/joomla/images/fb ... arrows.zip[/file]