var chart, config;
$(document).ready(function() {
$.ajax({
url: "graphconfig.json",
dataType: "json",
success: function(result) {
config = result;
doTemp();
}
});
});
function changeGraph(graph) {
$(graph).siblings().removeClass('picked');
$(graph).addClass('picked');
switch ($(graph).attr('graph-id')) {
case 'temp':
doTemp();
break;
case 'dailytemp':
doDailyTemp();
break;
case 'press':
doPress();
break;
case 'wind':
doWind();
break;
case 'windDir':
doWindDir();
break;
case 'rain':
doRain();
break;
case 'dailyrain':
doDailyRain();
break;
case 'humidity':
doHum();
break;
case 'solar':
doSolar();
break;
case 'sunhours':
doSunHours();
break;
}
}
var doTemp = function() {
var freezing = config.temp.units === 'C' ? 0 : 32;
var options = {
chart: {
renderTo: 'chartcontainer',
type: 'line',
alignTicks: false
},
exporting: {
sourceWidth: 900,
sourceHeight: 500,
filename: 'TemperatureDay',
scale: 1.1,
chartOptions: {
subtitle: null
}
},
title: {
text: 'Temperature'
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
ordinal: false,
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{
// left
title: {
text: 'Temperature',
style: {
color: '#804682',
fontSize: '20px',
opacity: '0.3',
}
},
opposite: false,
labels: {
align: 'right',
formatter: function() {
return '' + this.value + '';
}
},
plotLines: [{
// freezing line
value: freezing,
color: 'rgb(0, 0, 180)',
width: 1,
zIndex: 2
}]
}, {
// right
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Temperature',
style: {
color: '#804682',
fontSize: '20px',
opacity: '0.3',
}
},
labels: {
align: 'left',
formatter: function() {
return '' + this.value + '';
}
}
}],
legend: {
itemStyle: {
fontWeight: 'normal',
},
enabled: true,
align: 'center',
verticalAlign: 'top',
y: 10,
floating: true,
borderWidth: 0
},
plotOptions: {
series: {
dataGrouping: {
enabled: false
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
}
},
line: {
lineWidth: 2
},
spline: {
lineWidth: 2.5
}
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
useHTML: true,
valueSuffix: " C",
xDateFormat: "%A, %b %e, %H:%M",
},
series: [{
name: 'Temperature',
zIndex: 99,
color: '#C42525',
}, {
name: 'Dew Point',
color: '#8BBC22',
}, {
name: 'Apparent',
color: '#F28F43',
visible: true,
}, {
name: 'Wind Chill',
color: '#2F7ED8',
visible: true,
}, {
name: 'Heat Index',
color: '#FF9E2B',
visible: false,
}],
rangeSelector: {
selected: 4,
y: 10,
buttons: [{
count: 0.5,
type: 'hour',
text: '30m'
}, {
count: 1,
type: 'hour',
text: '1h'
}, {
count: 3,
type: 'hour',
text: '3h'
}, {
count: 6,
type: 'hour',
text: '6h'
}, {
count: 12,
type: 'hour',
text: '12h'
}, {
count: 1,
type: 'day',
text: '24h'
}, {
count: 2,
type: 'day',
text: '48h'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false
}
};
chart = new Highcharts.StockChart(options);
chart.showLoading('');
$.ajax({
url: '../utils/realtimeLogSql.php?recordAge=5760&recordUnit=minute&nth=15&temp&dew&apptemp&wchill&heatindex&intemp',
cache: false,
dataType: 'json',
success: function(resp) {
chart.hideLoading();
chart.series[0].setData(resp.temp);
chart.series[1].setData(resp.dew);
chart.series[2].setData(resp.apptemp);
chart.series[3].setData(resp.wchill);
chart.series[4].setData(resp.heatindex);
}
});
};
var doPress = function() {
var options = {
chart: {
renderTo: 'chartcontainer',
type: 'spline'
},
exporting: {
sourceWidth: 900,
sourceHeight: 500,
filename: 'PressureDay',
scale: 1.1,
chartOptions: {
subtitle: null
}
},
title: {
text: 'Pressure'
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
ordinal: false,
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{
// left
title: {
text: 'Pressure',
style: {
color: '#77A1E5',
fontSize: '20px',
opacity: '0.3',
}
},
opposite: false,
labels: {
align: 'right',
formatter: function() {
return '' + this.value + '';
}
}
}, {
// right
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Pressure',
style: {
color: '#77A1E5',
fontSize: '20px',
opacity: '0.3',
}
},
labels: {
align: 'left',
formatter: function() {
return '' + this.value + '';
}
}
}],
legend: {
itemStyle: {
fontWeight: 'normal',
},
enabled: true,
align: 'center',
verticalAlign: 'top',
y: 10,
floating: true,
borderWidth: 0
},
plotOptions: {
series: {
dataGrouping: {
enabled: false
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
}
},
line: {
lineWidth: 2
},
spline: {
lineWidth: 2.5
}
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
useHTML: true,
valueSuffix: ' hPa',
valueDecimals: config.press.decimals,
xDateFormat: "%A, %b %e, %H:%M",
},
series: [{
name: 'Pressure',
color: '#77A1E5',
}],
rangeSelector: {
selected: 4,
buttons: [{
count: 0.5,
type: 'hour',
text: '30m'
}, {
count: 1,
type: 'hour',
text: '1h'
}, {
count: 3,
type: 'hour',
text: '3h'
}, {
count: 6,
type: 'hour',
text: '6h'
}, {
count: 12,
type: 'hour',
text: '12h'
}, {
count: 1,
type: 'day',
text: '24h'
}, {
count: 2,
type: 'day',
text: '48h'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false
}
};
chart = new Highcharts.StockChart(options);
chart.showLoading('');
$.ajax({
url: '../utils/realtimeLogSql.php?recordAge=5760&recordUnit=minute&nth=15&press',
dataType: 'json',
cache: false,
success: function(resp) {
chart.hideLoading();
chart.series[0].setData(resp.press);
}
});
};
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' : '');
};
var doWindDir = function() {
var options = {
chart: {
renderTo: 'chartcontainer',
type: 'scatter',
alignTicks: false
},
exporting: {
sourceWidth: 900,
sourceHeight: 500,
filename: 'WindDirDay',
scale: 1.1,
chartOptions: {
subtitle: null
}
},
title: {
text: 'Wind Direction'
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
ordinal: false,
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{
// left
title: {
text: 'Wind Direction',
style: {
color: '#77A1E5',
fontSize: '20px',
opacity: '0.3',
}
},
opposite: false,
min: 0,
max: 360,
tickInterval: 22.5,
labels: {
align: 'right',
formatter: function() {
return compassP(this.value);
}
}
}, {
// right
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Wind Direction',
style: {
color: '#77A1E5',
fontSize: '20px',
opacity: '0.3',
}
},
min: 0,
max: 360,
tickInterval: 22.5,
labels: {
align: 'left',
formatter: function() {
return compassP(this.value);
}
}
}],
legend: {
itemStyle: {
fontWeight: 'normal',
},
enabled: true,
align: 'center',
verticalAlign: 'top',
y: 10,
floating: true,
borderWidth: 0
},
plotOptions: {
scatter: {
cursor: 'pointer',
enableMouseTracking: true,
marker: {
states: {
hover: {
enabled: false
},
select: {
enabled: false
}
}
},
shadow: false
}
},
tooltip: {
enabled: false
},
series: [{
name: 'Bearing',
type: 'scatter',
color: '#2F7ED8',
marker: {
symbol: 'square',
radius: 2
}
}, {
name: 'Avg Bearing',
type: 'scatter',
color: '#C42525',
marker: {
symbol: 'square',
radius: 2
}
}],
rangeSelector: {
x: -50,
y: 0,
selected: 4,
buttons: [{
count: 0.5,
type: 'hour',
text: '30m'
}, {
count: 1,
type: 'hour',
text: '1h'
}, {
count: 3,
type: 'hour',
text: '3h'
}, {
count: 6,
type: 'hour',
text: '6h'
}, {
count: 12,
type: 'hour',
text: '12h'
}, {
count: 1,
type: 'day',
text: '24h'
}, {
count: 2,
type: 'day',
text: '48h'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false
}
};
chart = new Highcharts.StockChart(options);
chart.showLoading('');
$.ajax({
url: '../utils/realtimeLogSql.php?recordAge=5760&recordUnit=minute&nth=15&bearing&avgbearing',
dataType: 'json',
cache: false,
success: function(resp) {
chart.hideLoading();
chart.series[0].setData(resp.bearing);
chart.series[1].setData(resp.avgbearing);
}
});
};
var doWind = function() {
var options = {
chart: {
renderTo: 'chartcontainer',
type: 'spline',
alignTicks: false
},
exporting: {
sourceWidth: 900,
sourceHeight: 500,
filename: 'WindDay',
scale: 1.1,
chartOptions: {
subtitle: null
}
},
title: {
text: 'Wind Speed'
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
ordinal: false,
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{
// left
title: {
text: 'Wind Speed',
style: {
color: '#C42525',
fontSize: '20px',
opacity: '0.3',
}
},
opposite: false,
min: 0,
labels: {
align: 'right',
formatter: function() {
return '' + this.value + '';
}
}
}, {
// right
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
min: 0,
title: {
text: 'Wind Speed',
style: {
color: '#C42525',
fontSize: '20px',
opacity: '0.3',
}
},
labels: {
align: 'left',
formatter: function() {
return '' + this.value + '';
}
}
}],
legend: {
itemStyle: {
fontWeight: 'normal',
},
enabled: true,
align: 'center',
verticalAlign: 'top',
y: 10,
floating: true,
borderWidth: 0
},
plotOptions: {
series: {
dataGrouping: {
enabled: false
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
}
},
line: {
lineWidth: 2
},
spline: {
lineWidth: 2.5
}
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
useHTML: true,
valueSuffix: ' kmh',
xDateFormat: "%A, %b %e, %H:%M",
},
series: [{
name: 'Wind Speed',
color: '#2F7ED8',
}, {
name: 'Wind Gust',
color: '#C42525',
}],
rangeSelector: {
selected: 4,
buttons: [{
count: 0.5,
type: 'hour',
text: '30m'
}, {
count: 1,
type: 'hour',
text: '1h'
}, {
count: 3,
type: 'hour',
text: '3h'
}, {
count: 6,
type: 'hour',
text: '6h'
}, {
count: 12,
type: 'hour',
text: '12h'
}, {
count: 1,
type: 'day',
text: '24h'
}, {
count: 2,
type: 'day',
text: '48h'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false
}
};
chart = new Highcharts.StockChart(options);
chart.showLoading('');
$.ajax({
url: '../utils/realtimeLogSql.php?recordAge=5760&recordUnit=minute&nth=15&wspeed&wgust',
dataType: 'json',
cache: false,
success: function(resp) {
chart.hideLoading();
chart.series[0].setData(resp.wspeed);
chart.series[1].setData(resp.wgust);
}
});
};
var doRain = function() {
var options = {
chart: {
renderTo: 'chartcontainer',
type: 'line',
alignTicks: true
},
exporting: {
sourceWidth: 900,
sourceHeight: 500,
filename: 'RainDay',
scale: 1.1,
chartOptions: {
subtitle: null
}
},
title: {
text: 'Rainfall'
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
ordinal: false,
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{
// left
title: {
text: 'Rainfall Rate',
style: {
color: '#C42525',
fontSize: '20px',
opacity: '0.3',
}
},
min: 0,
opposite: false,
labels: {
align: 'right',
formatter: function() {
return '' + this.value + '';
}
}
}, {
// right
opposite: true,
title: {
text: 'Rainfall Total',
style: {
color: '#067CAA',
fontSize: '20px',
opacity: '0.3',
}
},
min: 0,
labels: {
align: 'left',
formatter: function() {
return '' + this.value + '';
}
}
}],
legend: {
itemStyle: {
fontWeight: 'normal',
},
enabled: true,
align: 'center',
verticalAlign: 'top',
y: 10,
floating: true,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
plotOptions: {
series: {
dataGrouping: {
enabled: false
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
}
},
line: {
lineWidth: 2
},
spline: {
lineWidth: 2.5
}
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
useHTML: true,
xDateFormat: "%A, %b %e, %H:%M",
},
series: [{
name: 'Rain rate',
type: 'line',
yAxis: 0,
color: '#C42525',
tooltip: {
valueSuffix: ' mm/hr'
},
}, {
name: 'Daily rain',
type: 'area',
yAxis: 1,
tooltip: {
valueSuffix: ' mm'
},
color: 'rgba(6,124,170,1)',
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, 'rgba(10, 80, 255, 0.4)'],
[1, 'rgba(10, 90, 80, 0.1)']
]
}
}],
rangeSelector: {
x: -50,
y: 0,
selected: 4,
buttons: [{
count: 0.5,
type: 'hour',
text: '30m'
}, {
count: 1,
type: 'hour',
text: '1h'
}, {
count: 3,
type: 'hour',
text: '3h'
}, {
count: 6,
type: 'hour',
text: '6h'
}, {
count: 12,
type: 'hour',
text: '12h'
}, {
count: 1,
type: 'day',
text: '24h'
}, {
count: 2,
type: 'day',
text: '48h'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false
}
};
chart = new Highcharts.StockChart(options);
chart.showLoading('');
$.ajax({
url: '../utils/realtimeLogSql.php?recordAge=5760&recordUnit=minute&nth=15&rrate&rfall',
dataType: 'json',
cache: false,
success: function(resp) {
chart.hideLoading();
chart.series[0].setData(resp.rrate);
chart.series[1].setData(resp.rfall);
}
});
};
var doHum = function() {
var options = {
chart: {
renderTo: 'chartcontainer',
type: 'line',
alignTicks: false
},
exporting: {
sourceWidth: 900,
sourceHeight: 500,
filename: 'HumidityDay',
scale: 1.1,
chartOptions: {
subtitle: null
}
},
title: {
text: 'Relative Humidity'
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
ordinal: false,
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{
// left
title: {
text: 'Humidity',
style: {
color: '#492970',
fontSize: '20px',
opacity: '0.3',
}
},
opposite: false,
min: 0,
max: 100,
labels: {
align: 'right',
x: -5,
formatter: function() {
return '' + this.value + '';
}
}
}, {
// right
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
min: 0,
max: 100,
title: {
text: 'Humidity',
style: {
color: '#1AADCE',
fontSize: '20px',
opacity: '0.3',
}
},
labels: {
align: 'left',
x: 5,
formatter: function() {
return '' + this.value + '';
}
}
}],
legend: {
itemStyle: {
fontWeight: 'normal',
},
enabled: true,
align: 'center',
verticalAlign: 'top',
y: 10,
floating: true,
borderWidth: 0
},
plotOptions: {
series: {
dataGrouping: {
enabled: false
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
}
},
line: {
lineWidth: 2
},
spline: {
lineWidth: 2.5
}
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
useHTML: true,
valueSuffix: ' %',
xDateFormat: "%A, %b %e, %H:%M",
},
series: [{
name: 'Indoor Humidity',
color: '#492970',
}],
rangeSelector: {
x: -50,
y: 0,
selected: 4,
buttons: [{
count: 0.5,
type: 'hour',
text: '30m'
}, {
count: 1,
type: 'hour',
text: '1h'
}, {
count: 3,
type: 'hour',
text: '3h'
}, {
count: 6,
type: 'hour',
text: '6h'
}, {
count: 12,
type: 'hour',
text: '12h'
}, {
count: 1,
type: 'day',
text: '24h'
}, {
count: 2,
type: 'day',
text: '48h'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false
}
};
chart = new Highcharts.StockChart(options);
chart.showLoading('');
$.ajax({
url: '../utils/realtimeLogSql.php?recordAge=5760&recordUnit=minute&nth=15&hum&inhum',
dataType: 'json',
cache: false,
success: function(resp) {
chart.hideLoading();
chart.series[0].setData(resp.hum);
chart.series[1].setData(resp.inhum);
}
});
};
var doSolar = function() {
var options = {
chart: {
renderTo: 'chartcontainer',
type: 'line',
alignTicks: true
},
exporting: {
sourceWidth: 900,
sourceHeight: 500,
filename: 'SolarDay',
scale: 1.1,
chartOptions: {
subtitle: null
}
},
title: {
text: 'Solar'
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
ordinal: false,
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{
// left
title: {
text: 'Solar Radiation',
style: {
color: '#EF6348',
fontSize: '20px',
opacity: '0.3',
}
},
min: 0,
opposite: false,
labels: {
align: 'right',
formatter: function() {
return '' + this.value + '';
}
}
}, {
// right
opposite: true,
title: {
text: 'UV Index',
style: {
color: '#916F98',
fontSize: '20px',
opacity: '0.3',
}
},
min: 0,
labels: {
align: 'left',
formatter: function() {
return '' + this.value + '';
}
}
}],
legend: {
enabled: true,
align: 'center',
verticalAlign: 'top',
y: 10,
floating: true,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
plotOptions: {
series: {
dataGrouping: {
enabled: false
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
}
},
line: {
lineWidth: 2
},
spline: {
lineWidth: 2
}
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
useHTML: true,
xDateFormat: "%A, %b %e, %H:%M",
},
series: [{
name: 'Solar Radiation',
type: 'area',
yAxis: 0,
valueDecimals: 0,
tooltip: {
valueSuffix: ' Wm⁻²'
},
color: 'rgba(238,87,68,1)',
shadow: {
color: 'black',
width: 5,
offsetX: 0,
offsetY: 0
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, 'rgba(238,87,68,0.2)'],
[1, 'rgba(238,87,68,0.1)']
// [1, 'rgba(2,0,0,0.8)']
]
}
}, {
name: 'Theoretical Max',
type: 'area',
yAxis: 0,
valueDecimals: 0,
tooltip: {
valueSuffix: ' Wm⁻²'
},
color: 'rgba(253,198,105,1)',
shadow: {
color: 'black',
width: 5,
offsetX: 0,
offsetY: 0
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, 'rgba(253,198,105,0.2)'],
[1, 'rgba(253,198,105,0.1)']
// [1, 'rgba(2,0,0,0.8)']
]
}
}, {
name: 'UV Index',
type: 'line',
yAxis: 1,
valueDecimals: config.uv.decimals,
visible: true,
tooltip: {
valueSuffix: ''
}
}],
rangeSelector: {
selected: 4,
buttons: [{
count: 0.5,
type: 'hour',
text: '30m'
}, {
count: 1,
type: 'hour',
text: '1h'
}, {
count: 3,
type: 'hour',
text: '3h'
}, {
count: 6,
type: 'hour',
text: '6h'
}, {
count: 12,
type: 'hour',
text: '12h'
}, {
count: 1,
type: 'day',
text: '24h'
}, {
count: 2,
type: 'day',
text: '48h'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false
}
};
chart = new Highcharts.StockChart(options);
chart.showLoading('');
$.ajax({
url: '../utils/realtimeLogSql.php?recordAge=5760&recordUnit=minute&nth=15&SolarRad&CurrentSolarMax&UV',
dataType: 'json',
cache: false,
success: function(resp) {
chart.hideLoading();
chart.series[0].setData(resp.SolarRad);
chart.series[1].setData(resp.CurrentSolarMax);
chart.series[2].setData(resp.UV);
}
});
};
var doSunHours = function() {
try {
chart.showLoading('');
}
catch (e) {}
$('#graph_description').text('The total sunshine hours recorded for each day.');
$.ajax({
url: '../utils/historicSunshineDaily.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'chartcontainer',
type: 'column'
},
exporting: {
sourceWidth: 900,
sourceHeight: 500,
filename: 'SunDay',
scale: 1.1,
chartOptions: {
subtitle: null
}
},
rangeSelector: {
selected: 0
},
navigator: {
series: {
type: 'column',
color: 'rgba(218,165,32,0.6)'
}
},
credits: {
enabled: false
},
title: {
text: 'Daily Sunshine'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b',
month: '%b',
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
yAxis: [{
// left
title: {
text: 'Sunshine',
style: {
color: '#FFA200',
fontSize: '20px',
opacity: '0.3',
}
},
opposite: false,
labels: {
align: 'right',
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
}
}, {
// right
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
min: 0,
title: {
text: 'Sunshine',
style: {
color: '#FFA200',
fontSize: '20px',
opacity: '0.3',
}
},
labels: {
align: 'left',
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
}
}],
legend: {
enabled: false
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
useHTML: true,
valueSuffix: " hours",
xDateFormat: '%a, %b %d, %Y',
},
plotOptions: {
column: {
pointPadding: 0.05,
borderWidth: 0.7,
cropThreshold: 500,
minPointLength: 2,
groupPadding: 0.1
}
},
series: [{
borderColor: '#303030',
name: 'Daily sunshine',
pointInterval: 24 * 3600 * 1000,
pointStart: resp[0],
color: 'rgba(253,174,45, 0.50)',
data: resp[1],
shadow: {
color: 'black',
width: 3,
offsetX: 0,
offsetY: 0
},
}]
});
}
});
};
var doDailyRain = function() {
try {
chart.showLoading('');
} catch (e) {}
$('#graph_description').text('The total daily rainfall recorded for each day.');
$.ajax({
url: '../utils/historicRainDaily.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'chartcontainer',
type: 'column',
},
exporting: {
sourceWidth: 900,
sourceHeight: 500,
filename: 'RainDaily',
scale: 1.1,
chartOptions: {
subtitle: null
}
},
rangeSelector: {
selected: 0
},
navigator: {
series: {
type: 'column',
color: 'rgba(124,181,236,0.7)'
}
},
credits: {
enabled: false
},
title: {
text: 'Daily Rainfall'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b',
month: '%b',
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
yAxis: [{
// left
title: {
text: 'Rainfall',
style: {
color: '#3287CF',
fontSize: '20px',
opacity: '0.3',
}
},
opposite: false,
labels: {
align: 'right',
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
}
}, {
// right
linkedTo: 0,
gridLineWidth: 0,
min: 0,
title: {
text: 'Rainfall',
style: {
color: '#3287CF',
fontSize: '20px',
opacity: '0.3',
}
},
opposite: true,
labels: {
align: 'left',
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
}
}],
legend: {
enabled: false
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
useHTML: true,
valueSuffix: " mm",
xDateFormat: '%a, %b %d, %Y',
},
plotOptions: {
column: {
pointPadding: 0.05,
borderWidth: 0.7,
cropThreshold: 500,
minPointLength: 2,
groupPadding: 0.1
//shadow: false
}
},
series: [{
borderColor: '#303030',
name: 'Daily rainfall',
pointInterval: 24 * 3600 * 1000,
pointStart: resp[0],
color: 'rgba(25, 110, 183, 0.7)',
data: resp[1],
shadow: {
color: 'black',
width: 2,
offsetX: 0,
offsetY: 0
},
}]
});
}
}); // end ajax()
};
var doDailyTemp = function() {
try {
chart.showLoading('');
}
catch (e) {}
$.ajax({
url: '../utils/historicTemperatureDaily.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'chartcontainer',
type: 'spline',
},
exporting: {
sourceWidth: 900,
sourceHeight: 500,
filename: 'TemperatureDaily',
scale: 1.1,
chartOptions: {
subtitle: null
}
},
rangeSelector: {
selected: 0
},
credits: {
enabled: false
},
title: {
text: 'Daily Temperatures'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
maxPadding: 0,
minPadding: 0,
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b',
month: '%b',
}
},
yAxis: [{
// left
title: {
text: 'Temperature',
style: {
color: '#804682',
fontSize: '20px',
opacity: '0.3',
}
},
opposite: false,
labels: {
align: 'right',
formatter: function() {
return '' + this.value + '';
}
},
}, {
// right
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Temperature',
style: {
color: '#804682',
fontSize: '20px',
opacity: '0.3',
}
},
labels: {
align: 'left',
formatter: function() {
return '' + this.value + '';
}
},
plotBands: [{
// visualize sub-zero
from: -200,
to: 0,
color: 'rgba(23,5,255, .1)'
}, {
// min record
from: -200,
to: resp[1],
color: 'rgba(29,140,203, .2)'
}, {
// max record
from: resp[2],
to: 200,
color: 'rgba(204,80,83, .2)'
}],
plotLines: [{
// visualize zero
value: 0,
color: 'rgb(0, 0, 180)',
width: 1,
zIndex: 2
}]
}],
legend: {
enabled: true,
align: 'center',
verticalAlign: 'top',
y: 15,
floating: true,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
crosshairs: true,
shadow: true,
valueSuffix: 'C',
valueDecimals: 1,
xDateFormat: '%d %b %Y'
},
plotOptions: {
series: {
cursor: 'pointer',
pointInterval: 24 * 3600 * 1000,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
}
},
line: {
lineWidth: 1
},
spline: {
lineWidth: 2
}
},
series: [{
name: 'Max temp',
pointStart: resp[0],
data: resp[4],
color: '#E13C16',
shadow: {
color: 'black',
width: 3,
offsetX: 0,
offsetY: 0
},
}, {
name: 'Avg temp',
pointStart: resp[0],
data: resp[5],
color: '#24BA59',
shadow: {
color: 'black',
width: 3,
offsetX: 0,
offsetY: 0
},
}, {
name: 'Min temp',
pointStart: resp[0],
data: resp[3],
color: '#196EB6',
shadow: {
color: 'black',
width: 3,
offsetX: 0,
offsetY: 0
},
}]
});
}
});
};