//
/*global Highcharts */
/*jshint jquery:true */
'option strict';
Highcharts.setOptions({
lang: {
months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
shortMonths: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin',
'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'],
weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
}
});
var chart,
g_hours = 24,
g_graph = 'temp',
g_nth = 2;
var temperature = (function () {
// define the options
var options = {
chart : {
renderTo : 'container',
type : 'spline'
},
credits : {
enabled : false
},
title : {
text : 'Températures'
},
subtitle : {
// text : 'Temperatures (°C)'
text : '°C '
},
xAxis : {
type : 'datetime',
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 : 'Température (°C)'
},
labels : {
align : 'right',
x : -5,
formatter: function () {
if (this.value <= 0) {
return '' + this.value + '';
} else {
return '' + this.value + '';
}
}
},
plotBands : [
{
// visualize sub-zero
from : -200,
to : 0,
color : 'rgba(68, 170, 213, .1)'
}
],
plotLines : [
{
// visualize zero
value : 0,
color : 'rgb(0, 0, 180)',
width : 1,
zIndex : 2
}
]
}, { // right y axis
linkedTo : 0,
gridLineWidth : 0,
opposite : true,
title : {
text : null
},
labels : {
align : 'left',
x : 5,
formatter: function () {
if (this.value <= 0) {
return '' + this.value + '';
} else {
return '' + this.value + '';
}
}
}
}
],
legend : {
align : 'left',
verticalAlign : 'top',
y : 17,
floating : true,
borderWidth : 0
},
tooltip : {
xDateFormat: '%A %d %B %Y, %H:%M',
shared : true,
crosshairs : true,
valueSuffix : '°C'
},
plotOptions : {
series : {
cursor : 'pointer',
marker : {
enabled : false,
states : {
hover : {
enabled : true,
radius : 5
}
}
}
},
line : {
lineWidth : 1
},
spline : {
lineWidth : 2
}
},
series : [
{
name : 'Extérieur',
color : 'red'
//index : 99 // Force temperature plot to always be on top
}, {
name : 'Intérieur',
visible : false
}, {
name : 'Etage',
color : 'green'
}, {
name : 'Cave',
visible : false,
color : 'blue'
}, {
name : 'Cellier',
}, {
name : 'Ecc',
visible : false
}, {
name : 'Ecs',
visible : false
}
]
};
var update = function () {
try {
chart.showLoading();
} catch (e) {}
// TempOut','TempRdc','TempEtage','TempCave','TempCellier','TeauEcc','TeauEcs','TeauRet'
$.ajax({
url : 'monthLogSql.php?recordAge=' + g_hours + '&recordUnit=hour&TempOut&TempRdc&TempEtage&TempCave&TempCellier&TeauEcc&TeauEcs&nth=' + g_nth,
datatype : 'json',
success : function (resp) {
// temp
options.series[0].data = resp.TempOut;
// temp
options.series[1].data = resp.TempRdc;
// dew point
options.series[2].data = resp.TempEtage;
// apparent
options.series[3].data = resp.TempCave;
// wind chill
options.series[4].data = resp.TempCellier;
// heat index
options.series[5].data = resp.TeauEcc;
// indoor
options.series[6].data = resp.TeauEcs;
chart = new Highcharts.Chart(options);
},
});
};
return {
update : update
};
}());
var pressure = (function () {
// define the options
var options = {
chart : {
renderTo : 'container',
type : 'line'
},
credits : {
enabled : false
},
title : {
text : 'Pression atmosphérique'
},
subtitle : {
text : 'Relative (mb)'
},
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 : 'Pression (mb)'
},
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 : {
xDateFormat: '%A %d %B %Y, %H:%M',
shared : true,
crosshairs : true,
valueSuffix : ' mb',
formatter : function () {
var point = this,
series = this.points[0].series;
return '' + Highcharts.dateFormat('%A %d %B %Y, %H:%M', point.x) + '
' +
'' + series.name + ': ' +
' ' + Highcharts.numberFormat(point.y, 1, '.', '') + ' mb ';
}
},
plotOptions : {
series : {
cursor : 'pointer',
marker : {
enabled : false
}
}
},
series : [
{
name : 'Pression',
}
]
};
var update = function () {
chart.showLoading();
$.ajax({
url : 'monthLogSql.php?recordAge=' + g_hours + '&recordUnit=hour&Pressure&nth=' + g_nth,
datatype : 'json',
success : function (resp) {
options.series[0].data = resp.Pressure;
chart = new Highcharts.Chart(options);
},
});
};
return {
update : update
};
}());
var wind = (function () {
// define the options
var options = {
chart : {
renderTo : 'container',
type : 'line'
},
credits : {
enabled : false
},
title : {
text : 'Vitesse du vent'
},
subtitle : {
text : 'Vitesse (km/h)'
},
xAxis : {
type : 'datetime',
maxPadding : 0.005,
minPadding : 0.005,
labels : {
align : 'left'
},
dateTimeLabelFormats : {
day : '%e %b',
week : '%e %b %y',
month : '%b %y',
year : '%Y'
}
},
yAxis : [
{ // left y axis
title : {
text : 'Vitesse (km/h)'
},
labels : {
align : 'right',
x : -5,
formatter : function () {
return Highcharts.numberFormat(this.value, 0);
}
},
min : 0
}, { // right y axis
linkedTo : 0,
gridLineWidth : 0,
opposite : true,
title : {
text : null
},
labels : {
align : 'left',
x : 5,
formatter : function () {
return Highcharts.numberFormat(this.value, 0);
}
},
}
],
legend : {
align : 'left',
verticalAlign : 'top',
y : 20,
floating : true,
borderWidth : 0
},
tooltip : {
xDateFormat: '%A %d %B %Y, %H:%M',
shared : true,
crosshairs : true,
valueSuffix : ' km/h'
},
plotOptions : {
series : {
cursor : 'pointer',
marker : {
enabled : false,
states : {
hover : {
enabled : true,
radius : 5
}
}
}
}
},
series : [
{
name : 'Moyenne'
}, {
name : 'Rafale',
color : 'rgba(255,0,0,0.8)'
}
]
};
var update = function () {
chart.showLoading();
$.ajax({
url : 'monthLogSql.php?recordAge=' + g_hours + '&recordUnit=hour&Windgust&Windspeed',
datatype : 'json',
success : function (resp) {
// avg
options.series[0].data = resp.Windspeed;
// gust
options.series[1].data = resp.Windgust;
chart = new Highcharts.Chart(options);
},
});
};
return {
update : update
};
}());
var windDir = (function () {
// define the options
var options = {
chart : {
renderTo : 'container',
type : 'scatter'
},
credits : {
enabled : false
},
title : {
text : 'Direction du vent'
},
subtitle : {
text : null
},
xAxis : {
type : 'datetime',
maxPadding : 0.005,
minPadding : 0.005,
labels : {
align : 'left'
},
dateTimeLabelFormats : {
day : '%e %b',
week : '%e %b %y',
month : '%b %y',
year : '%Y'
}
},
yAxis : [
{ // left y axis
title : {
text : null
},
labels : {
align : 'right',
x : -5,
formatter : function () {
return getOrd(this.value);
}
},
min : 0,
max : 360,
// maxPadding : 0.05,
// minPadding : 0.05,
tickInterval : 45,
minorTickInterval : null
}, { // right y axis
linkedTo : 0,
gridLineWidth : 0,
opposite : true,
title : {
text : null
},
labels : {
align : 'left',
x : 5,
formatter : function () {
return getOrd(this.value);
}
},
// maxPadding : 0.05,
// minPadding : 0.05,
tickInterval : 45,
minorTickInterval : null
}
],
legend : {
align : 'left',
verticalAlign : 'top',
y : 6,
floating : true,
borderWidth : 0
},
tooltip : {
enabled : false
// shared : true,
// crosshairs : true,
// valueSuffix : '°'
},
plotOptions : {
scatter : {
cursor : 'pointer',
enableMouseTracking : false,
marker : {
states : {
hover : {
enabled : false
},
select : {
enabled : false
}
}
},
shadow : false
}
},
series : [
/* {
name : 'Latest',
marker : {
symbol : 'triangle',
radius : 2
}
},*/
{
name : 'Moy. 10 min',
color : 'rgba(200,20,20,.9)',
marker : {
// symbol : 'diamond',
symbol : 'circle',
radius : 3
}
}
]
};
var update = function () {
chart.showLoading();
$.ajax({
// url : '/realtimeLogSql.php?recordAge=48&recordUnit=hour&bearing&avgbearing&nth=2',
url : 'monthLogSql.php?recordAge=' + g_hours + '&recordUnit=hour&Windbearing&nth=' + g_nth,
datatype : 'json',
success : function (resp) {
// latest bearing
// options.series[0].data = resp.bearing;
// avg bearing
// options.series[1].data = resp.avgbearing;
options.series[0].data = resp.Windbearing;
chart = new Highcharts.Chart(options);
},
});
};
var getOrd = function (deg) {
var a = ['N', 'NE', 'E', 'SE', 'S', 'SO', 'O', 'NO'];
return a[Math.floor((deg + 22.5) / 45) % 8] + (deg === 0 ? '|calm' : '');
};
return {
update : update
};
}());
var humidity = (function () {
// define the options
var options = {
chart : {
renderTo : 'container',
type : 'area'
},
credits : {
enabled : false
},
title : {
text : 'Humidité'
},
subtitle : {
text : 'Humidité relative (%)'
},
xAxis : {
type : 'datetime',
maxPadding : 0.005,
minPadding : 0.005,
labels : {
align : 'left'
},
dateTimeLabelFormats : {
day : '%e %b',
week : '%e %b %y',
month : '%b %y',
year : '%Y'
}
},
yAxis : [
{ // left y axis
//min: 0,
max: 100,
minRange: 40,
title : {
text : 'Humidité relative (%)'
},
gridLineWidth : 0,
labels : {
align : 'right',
x : -5,
formatter : function () {
return Highcharts.numberFormat(this.value, 0);
}
},
plotBands : [
{
from : 0,
to : 20,
color : 'rgba(255, 220, 0, .15)'
}, {
from : 20,
to : 80,
color : 'rgba(20, 255, 20, .1)'
}, {
from : 80,
to : 100,
color : 'rgba(255, 190, 0, .15)'
}
]
}, { // right y axis
linkedTo : 0,
gridLineWidth : 0,
opposite : true,
title : {
text : null
},
labels : {
align : 'left',
x : 5,
formatter : function () {
return Highcharts.numberFormat(this.value, 0);
}
}
}
],
legend : {
align : 'left',
verticalAlign : 'top',
y : 20,
floating : true,
borderWidth : 0
},
tooltip : {
xDateFormat: '%A %d %B %Y, %H:%M',
shared : true,
valueSuffix : '%'
},
plotOptions : {
series : {
marker : {
enabled : false
}
}
},
series : [
//{
// name : 'Intérieure',
// visible : false
//},
{
name : 'Extérieure',
color : '#00CC00',
fillOpacity: 0.4
}
]
};
var update = function () {
chart.showLoading();
$.ajax({
url : 'monthLogSql.php?recordAge=' + g_hours + '&recordUnit=hour&Humidity&InsideHumidity&nth=' + g_nth,
datatype : 'json',
success : function (resp) {
//options.series[1].data = resp.InsideHumidity;
options.series[0].data = resp.Humidity;
chart = new Highcharts.Chart(options);
}
}); // end ajax()
};
return {
update : update
};
}());
var rain = (function () {
// define the options
var options = {
chart : {
renderTo : 'container'
},
credits : {
enabled : false
},
title : {
text : 'Précipitation'
},
subtitle : {
text : 'Pluie (mm) & Averse (mm/h)'
},
xAxis : {
type : 'datetime',
maxPadding : 0.005,
minPadding : 0.005,
dateTimeLabelFormats : {
day : '%e %b',
week : '%e %b %y',
month : '%b %y',
year : '%Y'
}
},
yAxis : [
{ // left y axis
min : 0,
minRange : 2,
title : {
text: 'Averse (mm/h)',
style: {
color: 'rgba(255,100,100,1)'
}
},
labels : {
align : 'right',
x : -5,
formatter : function () {
return Highcharts.numberFormat(this.value, 1);
}
}
}, { // right y axis
min : 0,
gridLineWidth : 0,
minRange : 2,
opposite : true,
title : {
text: 'Pluie (mm)',
style: {
color: 'rgba(100,200,255,1)'
}
},
labels : {
align : 'left',
x : 5,
formatter : function () {
return Highcharts.numberFormat(this.value, 1);
}
},
}
],
legend : {
align : 'left',
verticalAlign : 'top',
y : 20,
floating : true,
borderWidth : 0
},
tooltip : {
xDateFormat: '%A %d %B %Y, %H:%M',
shared : true,
crosshairs : true
},
plotOptions : {
series : {
marker : {
enabled : false
}
}
},
series : [
{
name : 'Pluie du jour',
type: 'area',
yAxis : 1,
tooltip: { valueSuffix: ' mm' },
zIndex : 10,
color: 'rgba(100,200,255,0.8)',
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, 'rgba(10,80,255,0.6)'],
[1, 'rgba(10,150,50,0.1)']
]
}
}, {
name : 'Averse',
visible : false,
yAxis : 0,
type : 'line',
zIndex : 5,
tooltip: { valueSuffix: ' mm/h' },
color: 'rgba(255,100,100,0.8)'
}
]
};
var update = function () {
chart.showLoading();
$.ajax({
url : 'monthLogSql.php?recordAge=' + g_hours + '&recordUnit=hour&TodayRainSoFar&RainRate&nth=' + g_nth,
datatype : 'json',
success : function (resp) {
options.series[0].data = resp.TodayRainSoFar;
options.series[1].data = resp.RainRate;
chart = new Highcharts.Chart(options);
}
}); // end ajax()
};
return {
update : update
};
}());
var solar = (function () {
// define the options
var options = {
chart : {
renderTo : 'container',
type : 'line'
},
credits : {
enabled : false
},
title : {
text : 'Information Solaire'
},
subtitle : {
text : 'Index UV & Radiation Solaire (W/m\u00B2)'
},
xAxis : {
type : 'datetime',
maxPadding : 0.005,
minPadding : 0.005,
labels : {
align : 'left'
},
dateTimeLabelFormats : {
day : '%e %b',
week : '%e %b %y',
month : '%b %y',
year : '%Y'
}
},
yAxis : [
{ // left y axis - UV Index
title : {
text : 'UV Index'
},
labels : {
align : 'right',
x : -5,
formatter : function () {
return Highcharts.numberFormat(this.value, 0);
}
},
showEmpty: false,
min : 0,
minRange: 8,
minPadding : 0,
maxPadding : 0
}, { // right y axis - Solar Rad W/m2
gridLineWidth : 0,
showEmpty: false,
opposite : true,
title : {
text : 'Solar Radiation (W/m\u00B2)'
},
labels : {
align : 'left',
x : 5,
formatter : function () {
return Highcharts.numberFormat(this.value, 0);
}
},
min : 0//,
// max : 1000
}, {
// left y axis #2- Percentage of max
title: { text: 'Solar % of theoretical' },
labels: {
align: 'right',
x: -5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
},
showEmpty: false,
min: 0,
// minRange: 10,
minPadding: 0,
// max: 100,
maxPadding: 0,
plotLines: [{
value: 70,
color: '#CCCC00',
width: 1,
zIndex: 2
}]
}
],
legend : {
align : 'left',
verticalAlign : 'top',
y : 20,
floating : true,
borderWidth : 0
},
tooltip : {
shared : true,
crosshairs : true
},
plotOptions : {
series : {
cursor : 'pointer',
marker : {
enabled : false,
states : {
hover : {
enabled : true,
radius : 5
}
}
}
}
},
series : [
{
name : 'Theoretical Max',
yAxis : 1,
type: 'area',
color : 'rgba(100,100,255,0.4)',
fillColor : 'rgba(100,100,255,0.25)',
tooltip : {
valueSuffix : ' W/m\u00B2'
}
}, {
name : 'Solar Radiation',
yAxis : 1,
type: 'area',
color : 'rgba(255,80,10,0.8)',
lineWidth : 1,
fillColor : {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, 'rgba(255,80,10,0.4)'],
[1, 'rgba(150,0,0,0.3)']
]
},
tooltip : {
//formatter : function () {
//var str = '' + this.x + ' ' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1) + ' W/m\u00B2
' +
// ' percentage of max: ' + (options.series[0].y > 0 ? Highcharts.numberFormat(this.y / options.series[0].y * 100) : '--') + '%';
// return "0";
//}
valueSuffix : ' W/m\u00B2'
}
}, {
name : 'UV Index',
yAxis : 0,
// color : 'rgba(255,0,0,0.8)',
visible: false
}, {
name : 'Solar %',
yAxis : 2,
visible: false
}
]
};
var update = function () {
chart.showLoading();
$.ajax({
url : 'monthLogSql.php?recordAge=' + g_hours + '&recordUnit=hour&UVindex&SolarRad&MaxSolarRad&nth=' + g_nth,
datatype : 'json',
success : function (resp) {
var i = 0;
resp.percent = [];
for (; i < resp.SolarRad.length; i++) {
resp.percent[i] = [];
resp.percent[i][0] = resp.SolarRad[i][0];
// ignore values when theoretical <= 10, and cap at a maximum of 100%
resp.percent[i][1] = (resp.MaxSolarRad[i][1] <= 10 ? 0 : Math.min(resp.SolarRad[i][1] / resp.MaxSolarRad[i][1] * 100, 100));
}
options.series[0].data = resp.MaxSolarRad;
options.series[1].data = resp.SolarRad;
options.series[2].data = resp.UVindex;
options.series[3].data = resp.percent;
chart = new Highcharts.Chart(options);
},
});
};
return {
update : update
};
}());