var chart;
var NM = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
Highcharts.setOptions({
lang: {
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b'
}
},
plotOptions: {
series: {
marker: {
enabled: true
}
}
}
});
var getdayfiledata = (function(month, year) {
$.ajax({
url: "../utiles/historicDfile.php?mm=" + month + "&yy=" + year,
datatype: 'json',
success: function(resp) {
temperature.update(resp, month, year);
humidity.update(resp, month, year);
rain.update(resp, month, year);
wind.update(resp, month, year);
pressure.update(resp, month, year);
solar.update(resp, month, year);
winddir.update(resp, month, year);
}
});
});
var temperature = (function() {
// define the options
var options = {
chart: {
renderTo: 'Tminmax',
type: 'line',
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'TemperatureMonth',
scale: 1,
chartOptions: {
subtitle: null,
legend: {
align: 'left',
verticalAlign: 'top',
y: -45,
x: 10,
}
}
},
credits: {
enabled: false
},
title: {
align: 'center',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
enabled: true,
useHTML: true,
align: 'center',
},
yAxis: [{
title: {
text: 'Temperature',
style: {
color: '#804682',
fontSize: '20px',
opacity: '0.3',
}
},
plotBands: [{
from: -5,
to: 0,
color: 'rgba(97, 140, 220, .2)'
}, {
from: -10,
to: -5,
color: 'rgba(51, 1, 145, .2)'
}, {
from: 20,
to: 27.5,
color: 'rgba(243, 170, 68, .2)'
}, {
from: 27.5,
to: 35,
color: 'rgba(236,118,118, .2)'
}],
plotLines: [{
value: 0,
color: 'rgb(0, 0, 180)',
width: 1,
zIndex: 2
}]
}, {
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Temperature',
style: {
color: '#804682',
fontSize: '20px',
opacity: '0.3',
}
},
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: -55,
x: 10,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
crosshairs: true,
valueDecimals: 1,
useHTML: true,
valueSuffix: " °C",
xDateFormat: '%a, %b %d, %Y',
},
series: [{
name: 'Max',
color: '#E13C16',
pointInterval: 24 * 3600 * 1000,
shadow: {
color: 'black',
width: 4,
offsetX: 0,
offsetY: 0
},
}, {
name: 'Avg',
color: '#24BA59',
pointInterval: 24 * 3600 * 1000,
shadow: {
color: 'black',
width: 4,
offsetX: 0,
offsetY: 0
},
}, {
name: 'Min ',
color: '#196EB7',
pointInterval: 24 * 3600 * 1000,
shadow: {
color: 'black',
width: 4,
offsetX: 0,
offsetY: 0
},
}],
};
var update = function(resp, month, year) {
options.title.text = 'Temperature - ' + " " + NM[month - 1] + " " + year;
options.subtitle.text = 'Max: ' + resp.tmaxM + " °C" + ' Avg: ' + resp.tavgM + " °C " + ' Min: ' + resp.tminM + " °C" + '';
options.series[0].pointStart = resp[0];
options.series[1].pointStart = resp[0];
options.series[2].pointStart = resp[0];
options.series[0].data = resp.tmax;
options.series[1].data = resp.tavg;
options.series[2].data = resp.tmin;
chart = new Highcharts.Chart(options);
};
return {
update: update
};
}());
var humidity = (function() {
// define the options
var options = {
chart: {
renderTo: 'Hminmax',
type: 'line',
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'HumidityMonth',
scale: 1,
chartOptions: {
subtitle: null,
legend: {
align: 'left',
verticalAlign: 'top',
y: -45,
x: 10,
}
}
},
credits: {
enabled: false
},
title: {
align: 'center',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
enabled: false,
useHTML: true,
align: 'center',
},
yAxis: [{
min: '0',
max: '100',
title: {
text: 'Humidity',
style: {
color: '#196EB7',
fontSize: '20px',
opacity: '0.3',
}
},
plotBands: [{
from: 40,
to: 0,
color: 'rgba(0, 250, 54, .2)'
}, {
from: 80,
to: 100,
color: 'rgba(236, 90, 87, .2)'
}],
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}, {
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Humidity',
style: {
color: '#196EB7',
fontSize: '20px',
opacity: '0.3',
},
}
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: -55,
x: 10,
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
crosshairs: true,
valueDecimals: 1,
useHTML: true,
valueSuffix: " %",
xDateFormat: '%a, %b %d, %Y',
},
series: [{
name: 'Max',
color: '#E13C16',
pointInterval: 24 * 3600 * 1000,
shadow: {
color: 'black',
width: 5,
offsetX: 0,
offsetY: 0
},
}, {
name: 'Min',
color: '#196EB7',
pointInterval: 24 * 3600 * 1000,
shadow: {
color: 'black',
width: 5,
offsetX: 0,
offsetY: 0
},
}],
};
var update = function(resp, month, year) {
options.title.text = 'Humidity - ' + " " + NM[month - 1] + " " + year;
options.subtitle.text = 'Max: ' + resp.hmaxM + " %" + ' Min: ' + resp.hminM + " %" + '';
options.series[0].pointStart = resp[0];
options.series[1].pointStart = resp[0];
options.series[0].data = resp.hmax;
options.series[1].data = resp.hmin;
chart = new Highcharts.Chart(options);
};
return {
update: update
};
}());
var rain = (function() {
// define the options
var options = {
chart: {
renderTo: 'Rain',
type: 'column',
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'RainMonth',
scale: 1,
chartOptions: {
subtitle: null,
legend: {
align: 'left',
verticalAlign: 'top',
y: -45,
x: 10,
}
}
},
credits: {
enabled: false
},
title: {
align: 'center',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
enabled: false,
useHTML: true,
align: 'center',
},
yAxis: [{
title: {
text: 'Rainfall',
style: {
color: '#196EB7',
fontSize: '20px',
opacity: '0.3',
},
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}, {
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Rainfall',
style: {
color: '#196EB7',
fontSize: '20px',
opacity: '0.3',
},
},
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: -55,
x: 10,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
crosshairs: true,
valueDecimals: 1,
valueSuffix: " mm",
xDateFormat: '%a, %b %d, %Y',
},
series: [{
type: 'column',
name: 'Total',
borderColor: '#303030',
borderWidth: 0.7,
color: 'rgba(25, 110, 183, 0.50)',
shadow: {
color: 'black',
width: 2,
offsetX: 0,
offsetY: 0,
},
pointInterval: 24 * 3600 * 1000
}],
};
var update = function(resp, month, year) {
options.title.text = 'Rainfall - ' + " " + NM[month - 1] + " " + year;
options.subtitle.text = 'Total: ' + " " + resp.rainM + " mm " + '';
options.series[0].pointStart = resp[0];
options.series[0].data = resp.rain;
chart = new Highcharts.Chart(options);
};
return {
update: update
};
}());
var wind = (function() {
// define the options
var options = {
chart: {
renderTo: 'Wind',
type: 'column',
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'WindMonth',
scale: 1,
chartOptions: {
subtitle: null,
legend: {
align: 'left',
verticalAlign: 'top',
y: -45,
x: 10,
}
}
},
credits: {
enabled: false
},
title: {
align: 'center',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
enabled: false,
useHTML: true,
align: 'center',
},
yAxis: [{
title: {
text: 'Wind Speed',
style: {
color: '#E13C16',
fontSize: '20px',
opacity: '0.3',
},
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}, {
title: {
text: 'Wind Run',
style: {
color: '#4DAE00',
fontSize: '20px',
opacity: '0.3',
},
},
opposite: true
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: -55,
x: 10,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
useHTML: true,
valueSuffix: " mm",
xDateFormat: '%a, %b %d, %Y',
},
series: [{
type: 'column',
name: 'Max Gust',
borderColor: '#303030',
borderWidth: 0.7,
color: 'rgba(225, 60, 22, 0.50)',
pointInterval: 24 * 3600 * 1000,
tooltip: {
valueSuffix: ' mph',
}
}, {
type: 'column',
name: 'Max Speed',
borderColor: '#303030',
borderWidth: 0.7,
color: 'rgba(25, 110, 183, 0.50)',
pointInterval: 24 * 3600 * 1000,
yAxis: 0,
tooltip: {
valueSuffix: ' mph',
}
}, {
type: 'line',
name: 'Wind Run',
color: 'rgba(77, 174, 0,1)',
pointInterval: 24 * 3600 * 1000,
yAxis: 1,
shadow: {
color: 'black',
width: 3,
offsetX: 0,
offsetY: 0
},
tooltip: {
valueSuffix: ' miles',
}
}]
};
var update = function(resp, month, year) {
options.title.text = 'Wind - ' + " " + NM[month - 1] + " " + year;
options.subtitle.text = 'Max Gust: ' + resp.windrM + " mph" + ' Max Speed: ' + resp.wmaxM + " mph " + ' Wind Run: ' + resp.windtM + " miles " + '';
// options.subtitle.text = '' + resp.windrM + " mph" + ' ' + resp.windtM + " miles" + '';
options.series[0].pointStart = resp[0];
options.series[1].pointStart = resp[0];
options.series[2].pointStart = resp[0];
options.series[0].data = resp.windr;
options.series[1].data = resp.wmax;
options.series[2].data = resp.windt;
chart = new Highcharts.Chart(options);
};
return {
update: update
};
}());
var pressure = (function() {
// define the options
var options = {
chart: {
renderTo: 'Pminmax',
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'PressureMonth',
scale: 1,
chartOptions: {
subtitle: null,
legend: {
align: 'left',
verticalAlign: 'top',
y: -45,
x: 10,
}
}
},
credits: {
enabled: false
},
title: {
align: 'center',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
enabled: false,
useHTML: true,
align: 'center',
},
yAxis: [{
title: {
text: 'Pressure',
style: {
color: '#E13C16',
fontSize: '20px',
opacity: '0.3',
}
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}, {
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Pressure',
style: {
color: '#E13C16',
fontSize: '20px',
opacity: '0.3',
}
},
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: -55,
x: 10,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
crosshairs: true,
valueDecimals: 2,
useHTML: true,
valueSuffix: " hPa",
xDateFormat: '%a, %b %d, %Y',
},
series: [{
name: 'Min ',
color: '#196EB7',
pointInterval: 24 * 3600 * 1000,
shadow: {
color: 'black',
width: 5,
offsetX: 0,
offsetY: 0
},
}, {
name: 'Max ',
color: '#E13C16',
pointInterval: 24 * 3600 * 1000,
shadow: {
color: 'black',
width: 5,
offsetX: 0,
offsetY: 0
},
}],
};
var update = function(resp, month, year) {
options.title.text = 'Pressure - ' + " " + NM[month - 1] + " " + year;
options.subtitle.text = 'Max: ' + resp.pmaxM + " hPa" + ' ' + ' Min: ' + resp.pminM + " hPa" + '';
options.series[0].pointStart = resp[0];
options.series[1].pointStart = resp[0];
options.series[0].data = resp.pmax;
options.series[1].data = resp.pmin;
chart = new Highcharts.Chart(options);
};
return {
update: update
};
}());
var solar = (function() {
var options = {
chart: {
renderTo: 'Solar',
type: 'column',
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'SolarMonth',
scale: 1,
chartOptions: {
subtitle: null,
legend: {
align: 'left',
verticalAlign: 'top',
y: -45,
x: 10,
}
}
},
credits: {
enabled: false
},
title: {
align: 'center',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
enabled: false,
useHTML: true,
align: 'center',
},
yAxis: [{
title: {
text: 'Sunshine',
style: {
color: '#DAA520',
fontSize: '20px',
opacity: '0.3',
}
},
plotLines: [{
value: 0,
width: 1,
color: '#EE5744'
}]
}, {
title: {
text: 'Solar',
style: {
color: '#E13C16',
fontSize: '20px',
opacity: '0.3',
}
},
opposite: true
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: -55,
x: 10,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
},
tooltip: {
split: true,
distance: 30,
padding: 3,
valueDecimals: 1,
shared: true,
crosshairs: true,
useHTML: true,
xDateFormat: '%a, %b %d, %Y',
},
series: [{
type: 'column',
name: 'Sunshine',
borderColor: '#303030',
borderWidth: 0.7,
color: 'rgba(253,174,45, 0.50)',
pointInterval: 24 * 3600 * 1000,
tooltip: {
valueSuffix: ' hours',
}
}, {
type: 'column',
name: 'Max Solar',
borderColor: '#303030',
borderWidth: 0.7,
color: 'rgba(225, 60, 22, 0.50)',
pointInterval: 24 * 3600 * 1000,
yAxis: 1,
tooltip: {
valueSuffix: ' Wm?²',
}
}]
};
var update = function(resp, month, year) {
options.title.text = 'Solar - ' + " " + NM[month - 1] + " " + year;
options.subtitle.text = 'Sunshine: ' + resp.stotM + " hours" + ' Solar: ' + resp.smaxM + " Wm⁻²" + '';
options.series[0].pointStart = resp[0];
options.series[1].pointStart = resp[0];
options.series[0].data = resp.stot;
options.series[1].data = resp.smax;
chart = new Highcharts.Chart(options);
};
return {
update: update
};
}());
var winddir = (function() {
// define the options
var options = {
chart: {
renderTo: 'Winddir',
type: 'column',
alignTicks: false
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'WindDirMonth',
scale: 1,
chartOptions: {
subtitle: null,
legend: {
align: 'left',
verticalAlign: 'top',
y: -45,
x: 10,
}
}
},
credits: {
enabled: false
},
title: {
align: 'center',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
enabled: false,
useHTML: true,
align: 'center',
},
yAxis: [{
// left
title: {
text: 'Direction',
style: {
color: '#E13C16',
fontSize: '20px',
opacity: '0.3',
}
},
opposite: false,
min: 0,
max: 360,
tickInterval: 22.5,
labels: {
align: 'right',
margin: 4,
formatter: function() {
return compassP(this.value);
}
}
}, {
// right
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Direction',
style: {
color: '#E13C16',
fontSize: '20px',
opacity: '0.3',
}
},
min: 0,
max: 360,
tickInterval: 22.5,
labels: {
align: 'left',
margin: 4,
formatter: function() {
return compassP(this.value);
}
}
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: -55,
x: 10,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
crosshairs: true,
valueDecimals: 0,
useHTML: true,
valueSuffix: " °",
xDateFormat: '%a, %b %d, %Y',
},
series: [{
type: 'line',
name: 'Avg. Dir',
color: '#E13C16',
pointInterval: 24 * 3600 * 1000,
shadow: {
color: 'black',
width: 5,
offsetX: 0,
offsetY: 0
},
}]
};
var update = function(resp, month, year) {
options.title.text = 'Wind Dir - ' + " " + NM[month - 1] + " " + year;
options.subtitle.text = 'Average Direction: ' + compassP(resp.wdirM) + ' ' + resp.wdirM + '°' + '';
options.series[0].pointStart = resp[0];
options.series[0].data = resp.wddir;
chart = new Highcharts.Chart(options);
};
return {
update: update
};
}());
var compassP = function(deg) {
var a = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
return a[Math.floor((deg + 11.25) / 22.5) % 16] + (deg === 0 ? '|calm' : '');
};