var chart;
var NM = new Array("Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre");
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', 'Jun', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'],
weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
},
});
var temperature = (function() {
// define the options
var options = {
chart: {
renderTo: 'graph_container_A'
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'TemperatureMonthYear',
scale: 1,
chartOptions: {
subtitle: true,
}
},
credits: {
enabled: false
},
title: {
text: 'Historique des Températures',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
text: 'Températures du jour (°C)'
},
xAxis: {
type: 'datetime',
maxPadding: 0,
minPadding: 0,
},
yAxis: [{ // left y axis
title: {
text: 'Température',
style: {
color: '#804682',
fontSize: '20px',
opacity: '0.3',
}
},
labels: {
align: 'right',
margin: 4,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
plotBands: [{
// min record
from: -200,
to: -10,
color: 'rgba(68, 170, 213, .2)'
}, {
// max record
from: 10,
to: 200,
color: 'rgba(243, 170, 68, .2)'
}],
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: 'Température',
style: {
color: '#804682',
fontSize: '20px',
opacity: '0.3',
}
},
labels: {
align: 'left',
margin: 4,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
}
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 8,
floating: true,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
xDateFormat: '%a, %b %d, %Y',
shared: true,
crosshairs: true,
valueSuffix: '°C'
},
series: [{
name: 'Min-Max',
type: 'columnrange',
borderColor: '#303030',
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 1,
y1: 1.5
},
stops: [
[0, 'rgba(0, 66, 255, .7)'],
[1, 'rgba(242, 70, 36, .7)']
]
}
}, {
name: 'Moy',
type: "line",
color: '#24BA59'
}]
};
var update = function(day, month) {
options.title.text = 'Températures des '+ day + " " + NM[month] ;
try {
chart.showLoading('');
}
catch (e) {}
$.ajax({
url: '../utiles/historicDayTemp.php?dd=' + day + '&mm=' + (month + 1),
datatype: 'json',
success: function(resp) {
options.xAxis.categories = resp[0];
//options.chart.type = 'columnrange';
options.series[0].data = resp[4];
options.series[1].data = resp[3];
//options.series[2].data = resp[1];
options.yAxis[0].plotBands[1].from = resp[5];
options.yAxis[0].plotBands[0].to = resp[6];
chart = new Highcharts.Chart(options);
},
});
};
return {
update: update
};
}());
var temperatureM = (function() {
// define the options
var options = {
chart: {
renderTo: 'graph_container_B'
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'TemperatureMonthDay',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Historique des Températures',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
text: 'Températures du mois (°C)'
},
xAxis: {
type: 'datetime',
maxPadding: 0,
minPadding: 0,
dateTimeLabelFormats: {
day: '%e of %b',
}
},
yAxis: [{ // left y axis
title: {
text: 'Température',
style: {
color: '#804682',
fontSize: '20px',
opacity: '0.3',
}
},
labels: {
align: 'right',
margin: 4,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
plotBands: [{
// min record
from: -200,
to: -10,
color: 'rgba(68, 170, 213, .2)'
}, {
// max record
from: 10,
to: 200,
color: 'rgba(243, 170, 68, .2)'
}],
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: 'Température',
style: {
color: '#804682',
fontSize: '20px',
opacity: '0.3',
}
},
labels: {
align: 'left',
margin: 4,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
}
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 8,
floating: true,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
xDateFormat: '%A %d %B %Y',
shared: true,
crosshairs: true,
valueSuffix: '°C'
},
series: [{
name: 'Moyenne min-max',
type: 'columnrange',
borderColor: '#303030',
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 1,
y1: 1.5
},
stops: [
[0, 'rgba(0, 66, 255, .7)'],
[1, 'rgba(242, 70, 36, .7)']
]
}
}, {
name: 'Moy',
type: 'line',
color: '#24BA59'
}, {
name: 'Max',
type: 'line',
color: '#F40033'
}, {
name: 'Min',
type: 'line',
color: '#2F7ED8'
}]
};
var update = function(month) {
options.title.text = 'Températures pour ' + NM[month];
try {
chart.showLoading('');
}
catch (e) {}
$.ajax({
url: '../utiles/historicMonthTemp.php?mm=' + (month + 1),
datatype: 'json',
success: function(resp) {
options.xAxis.categories = resp[0];
//options.chart.type = 'columnrange';
options.series[0].data = resp[4];
options.series[1].data = resp[3];
options.series[2].data = resp[1];
options.series[3].data = resp[2];
//options.series[2].data = resp[1];
options.yAxis[0].plotBands[1].from = resp[5];
options.yAxis[0].plotBands[0].to = resp[6];
chart = new Highcharts.Chart(options);
},
});
};
return {
update: update
};
}());
var pressure = (function() {
// define the options
var options = {
chart: {
renderTo: 'graph_container_A'
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'PressureMonthYear',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Historique Pression Atmosphérique',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
text: 'Pression au niveau de la mer (hPa)'
},
xAxis: {
type: 'datetime',
labels: {
align: 'left'
},
maxPadding: 0,
minPadding: 0
},
yAxis: [{ // left y axis
title: {
text: 'Pression',
style: {
color: '#70A992',
fontSize: '20px',
opacity: '0.4',
}
},
labels: {
align: 'right',
margin: 4,
formatter: function() {
return parseInt(this.value, 10);
}
},
plotBands: [ // visualize record ranges
{
// Hi record
from: 1050,
to: 2000,
color: 'rgba(243, 170, 68, .2)'
}, {
// Lo record
from: 0,
to: 950,
color: 'rgba(243, 170, 68, .2)'
}
]
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Pression',
style: {
color: '#70A992',
fontSize: '20px',
opacity: '0.4',
}
},
labels: {
align: 'left',
margin: 4,
formatter: function() {
return parseInt(this.value, 10);
}
}
}],
legend: {
enabled: false
},
tooltip: {
split: true,
distance: 30,
padding: 3,
xDateFormat: '%A %d %B %Y',
shared: true,
crosshairs: true,
valueSuffix: ' hPa'
},
plotOptions: {
series: {
cursor: 'pointer',
lineWidth: 1
}
},
series: [{
name: 'Plage de pression',
borderColor: '#303030',
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 1,
y1: 1.5
},
stops: [
[0, 'rgba(95,95,210, .7)'],
[1, 'rgba(101,198,90, .7)']
]
}
}]
};
var update = function(day, month) {
options.title.text = 'Plage de pression des '+ day + " " + NM[month] ;
chart.showLoading('');
$.ajax({
url: '../utiles/historicDayPres.php?dd=' + day + '&mm=' + (month + 1),
datatype: 'json',
success: function(resp) {
// Data returned: [startDate, recLo, recHi, [ [lo,hi],[lo,hi],...] ]
options.chart.type = 'columnrange';
options.xAxis.categories = resp[0];
options.series[0].data = resp[3];
options.yAxis[0].plotBands[0].from = resp[2];
options.yAxis[0].plotBands[1].to = resp[1];
chart = new Highcharts.Chart(options);
},
});
};
return {
update: update
};
}());
var pressureM = (function() {
// define the options
var options = {
chart: {
renderTo: 'graph_container_B'
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'PressureMonthDay',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Historique Pression Atmosphérique',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
text: 'Pression au niveau de la mer (hPa)'
},
xAxis: {
type: 'datetime',
labels: {
align: 'left'
},
maxPadding: 0,
minPadding: 0
},
yAxis: [{ // left y axis
title: {
text: 'Pression',
style: {
color: '#70A992',
fontSize: '20px',
opacity: '0.4',
}
},
labels: {
align: 'right',
margin: 4,
formatter: function() {
return parseInt(this.value, 10);
}
},
plotBands: [ // visualize record ranges
{
// Hi record
from: 1050,
to: 2000,
color: 'rgba(243, 170, 68, .2)'
}, {
// Lo record
from: 0,
to: 950,
color: 'rgba(243, 170, 68, .2)'
}
]
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Pression',
style: {
color: '#70A992',
fontSize: '20px',
opacity: '0.4',
}
},
labels: {
align: 'left',
margin: 4,
formatter: function() {
return parseInt(this.value, 10);
}
}
}],
legend: {
enabled: false
},
tooltip: {
split: true,
distance: 30,
padding: 3,
xDateFormat: '%A %d %B %Y',
shared: true,
crosshairs: true,
valueSuffix: ' hPa'
},
plotOptions: {
series: {
cursor: 'pointer',
lineWidth: 1
}
},
series: [{
name: 'Pression ',
borderColor: '#303030',
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 1,
y1: 1.5
},
stops: [
[0, 'rgba(95,95,210, .7)'],
[1, 'rgba(101,198,90, .7)']
]
}
}]
};
var update = function(month) {
options.title.text = 'Plage de pression pour ' + NM[month];
chart.showLoading('');
$.ajax({
url: '../utiles/historicMonthPres.php?mm=' + (month + 1),
datatype: 'json',
success: function(resp) {
options.chart.type = 'columnrange';
options.xAxis.categories = resp[0];
options.series[0].data = resp[3];
options.yAxis[0].plotBands[0].from = resp[2];
options.yAxis[0].plotBands[1].to = resp[1];
chart = new Highcharts.Chart(options);
},
});
};
return {
update: update
};
}());
var wind = (function() {
// define the options
var options = {
chart: {
renderTo: 'graph_container_A',
type: 'column'
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'WindMonthYear',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Historique du Vent',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
text: 'Vitesse (kmh)'
},
xAxis: {
type: 'datetime',
maxPadding: 0,
minPadding: 0,
labels: {
align: 'left'
},
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{ // left y axis
title: {
text: 'Vent',
style: {
color: '#745E90',
fontSize: '20px',
opacity: '0.4',
}
},
labels: {
align: 'right',
margin: -4,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
min: 0
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Vent',
style: {
color: '#745E90',
fontSize: '20px',
opacity: '0.4',
}
},
labels: {
align: 'left',
margin: 4,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 8,
floating: true,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
valueDecimals: 1,
xDateFormat: '%A %d %B %Y',
shared: true,
crosshairs: true,
valueSuffix: ' kmh'
},
plotOptions: {
series: {
cursor: 'pointer',
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
}
},
line: {
lineWidth: 1
},
spline: {
lineWidth: 2
}
},
series: [{
name: 'Vitesse Moy',
borderColor: '#303030',
color: 'rgba(116,94,144,0.7)'
}, {
name: 'Rafale Max',
borderColor: '#303030',
color: 'rgba(200,92,92,0.7)',
}]
};
var update = function(day, month) {
options.title.text = 'Les vitesses du vent des '+ day + " " + NM[month] ;
chart.showLoading('');
$.ajax({
url: '../utiles/historicDayWind.php?dd=' + day + '&mm=' + (month + 1),
datatype: 'json',
success: function(resp) {
// avg
options.xAxis.categories = resp[0];
options.series[0].data = resp[1];
// gust
options.series[1].data = resp[2];
chart = new Highcharts.Chart(options);
},
});
};
return {
update: update
};
}());
var windM = (function() {
// define the options
var options = {
chart: {
renderTo: 'graph_container_B',
type: 'column'
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'WindMonthDay',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Historique du Vent',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
text: 'Vitesse (kmh)'
},
xAxis: {
type: 'datetime',
maxPadding: 0,
minPadding: 0,
labels: {
align: 'left'
},
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{ // left y axis
title: {
text: 'Vent',
style: {
color: '#745E90',
fontSize: '20px',
opacity: '0.4',
}
},
labels: {
align: 'right',
margin: 4,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
min: 0
}, { // right y axis
//linkedTo : 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Vent',
style: {
color: '#745E90',
fontSize: '20px',
opacity: '0.4',
}
},
labels: {
align: 'left',
margin: 4,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 8,
floating: true,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
valueDecimals: 1,
xDateFormat: '%A %d %B %Y',
shared: true,
crosshairs: true,
valueSuffix: ' kmh'
},
plotOptions: {
series: {
cursor: 'pointer',
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
}
},
line: {
lineWidth: 1
},
spline: {
lineWidth: 2
}
},
series: [{
name: 'Parcours du vent moyen',
borderColor: '#303030',
color: 'rgba(36,186,89,0.7)',
tooltip: {
valueSuffix: ' kmh',
}
}, {
name: 'Vent Max',
borderColor: '#303030',
color: 'rgba(200,92,92,0.7)',
yAxis: 1
}]
};
var update = function(month) {
options.title.text = 'Les vitesses du vent pour ' + NM[month];
chart.showLoading('');
$.ajax({
url: '../utiles/historicMonthWind.php?mm=' + (month + 1),
datatype: 'json',
success: function(resp) {
// avg
options.xAxis.categories = resp[0];
options.series[0].data = resp[1];
// gust
options.series[1].data = resp[2];
chart = new Highcharts.Chart(options);
},
});
};
return {
update: update
};
}());
var rainDaily = (function() {
// define the options
var options = {
chart: {
renderTo: 'graph_container_A',
type: 'column'
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'RainMonthYear',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Historique des Precipitations Jour',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
text: 'Précipitations jour (mm)'
},
xAxis: {
type: 'datetime',
gridLineWidth: 0,
minorGridLineWidth: 0
},
yAxis: [{ // left y axis
//min: 0,
title: {
text: 'Pluie',
style: {
color: '#196EB7',
fontSize: '20px',
opacity: '0.4',
}
},
labels: {
align: 'right',
margin: 4,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
}
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Pluie',
style: {
color: '#196EB7',
fontSize: '20px',
opacity: '0.4',
}
},
labels: {
align: 'left',
margin: 4,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
}],
legend: {
enabled: false
},
tooltip: {
split: true,
distance: 30,
padding: 3,
valueDecimals: 1,
xDateFormat: '%A %d %B %Y',
valueSuffix: " mm"
},
plotOptions: {
column: {
pointPadding: 0.05,
borderWidth: 0,
cropThreshold: 500,
minPointLength: 2,
groupPadding: 0.1
}
},
series: [{
name: 'Pluie du jour',
borderColor: '#303030',
color: 'rgba(25, 110, 183, 0.7)',
borderWidth: 0.7,
}]
};
var update = function(day, month) {
options.title.text = 'Précipitations des '+ day + " " + NM[month] ;
chart.showLoading('');
$.ajax({
url: '../utiles/historicDayRain.php?dd=' + day + '&mm=' + (month + 1),
datatype: "json",
success: function(resp) {
options.xAxis.categories = resp[0];
options.series[0].data = resp[1];
chart = new Highcharts.Chart(options);
}
}); // end ajax()
};
return {
update: update
};
}());
var rainDailyM = (function() {
// define the options
var options = {
chart: {
renderTo: 'graph_container_B',
type: 'column'
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'RainMonthDay',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Historical Daily Precipitation',
style: {
color: 'black',
fontSize: '20px',
opacity: '0.3',
}
},
subtitle: {
text: 'Total (mm)'
},
xAxis: {
type: 'datetime',
gridLineWidth: 0,
minorGridLineWidth: 0
},
yAxis: [{ // left y axis
//min: 0,
title: {
text: 'Pluie',
style: {
color: '#196EB7',
fontSize: '20px',
opacity: '0.4',
}
},
labels: {
align: 'right',
margin: 4,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
}
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: 'Pluie',
style: {
color: '#196EB7',
fontSize: '20px',
opacity: '0.4',
}
},
labels: {
align: 'left',
margin: 4,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
}],
legend: {
enabled: false
},
tooltip: {
split: true,
distance: 30,
padding: 3,
valueDecimals: 1,
xDateFormat: '%A %d %B %Y',
valueSuffix: " mm"
},
plotOptions: {
column: {
pointPadding: 0.05,
borderWidth: 0,
cropThreshold: 500,
minPointLength: 2,
groupPadding: 0.1
}
},
series: [{
name: 'Précipitations du mois',
borderColor: '#303030',
color: 'rgba(25, 110, 183, 0.7)',
borderWidth: 0.7,
}]
};
var update = function(month) {
options.title.text = 'Précipitations pour ' + NM[month];
chart.showLoading('');
$.ajax({
url: '../utiles/historicMonthRain.php?mm=' + (month + 1),
datatype: "json",
success: function(resp) {
options.xAxis.categories = resp[0];
options.series[0].data = resp[1];
chart = new Highcharts.Chart(options);
}
}); // end ajax()
};
return {
update: update
};
}());
var humidity = (function() {
// define the options
var options = {
chart: {
renderTo: 'graph_container_A'
},
exporting: {
sourceWidth: 900,
sourceHeight: 450,
filename: 'HumidityMonthYear',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Historical Humidity'
},
subtitle: {
text: 'Relative Humidity (%)'
},
xAxis: {
type: 'datetime',
labels: {
align: 'left'
},
maxPadding: 0,
minPadding: 0
},
yAxis: [{ // left y axis
title: {
text: null
},
max: 100,
minRange: 40,
labels: {
align: 'right',
x: -5,
formatter: function() {
return parseInt(this.value, 10);
}
},
plotBands: [{
from: 0,
to: 40,
color: 'rgba(255, 220, 0, .15)'
}, {
from: 40,
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 parseInt(this.value, 10);
}
}
}],
legend: {
enabled: false
},
tooltip: {
xDateFormat: '%A %d %B %Y',
shared: true,
crosshairs: true,
valueSuffix: '%'
},
plotOptions: {
series: {
cursor: 'pointer',
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
name: 'Humidity'
}]
};
var update = function(day, month) {
options.title.text = 'Humidity of ' + day + " " + NM[month];
chart.showLoading('');
$.ajax({
url: '../utiles/historicDayHum.php?dd=' + day + '&mm=' + (month + 1),
datatype: 'json',
success: function(resp) {
options.chart.type = 'columnrange';
options.xAxis.categories = resp[0];
options.series[0].data = resp[1];
chart = new Highcharts.Chart(options);
},
});
};
return {
update: update
};
}());