/* global Highcharts:false */
/* eslint-env jquery,browser */
/* eslint key-spacing:0, one-var:0 */
/* eslint no-unused-vars: ["error", { "vars": "local" }] */
/* exported temperature, temperatureByMonth, temperatureByYear, temperatureHiLo, temperatureHourlyMonth, temperatureComfort, pressure, wind, windByYear */
/* exported windByMonth, windHiLo, rainByMonth, rainByYear, rainDaily, rainMonthly, humidity, humidityByYear, humidityByMonth, sunshine, sunshineByYear */
/* exported sunshineByMonth, sunshineByHour, sunshineHourlyMonth */
var chart;
var shortMonths = ['Jan', 'Féb', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'];
Highcharts.setOptions({
lang: {
thousandsSep: '',
loading: ''
}
});
var ColorLuminance = function (hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = '#';
var c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i * 2, 2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ('00' + c).substr(c.length);
}
return rgb;
};
var temperature = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'Jour max, min, moyenne des températures. You can enable/disable the individual series plots by clicking on them in the graph legend.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicTemperatureDaily.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'spline',
marginRight: 30
},
rangeSelector: {
selected: 1
},
credits: {
enabled: false
},
title: {
text: 'Historique Température jour (°C)'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
maxPadding: 0,
minPadding: 0,
dateTimeLabelFormats: {
day: '%e %b %y',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{
// right y axis
title: {
text: null
},
labels: {
align: 'left',
x: 5,
// formatter: function () {
// return Highcharts.numberFormat(this.value, 0);
// }
},
plotBands: [
{
// visualize sub-zero
from: -200,
to: 0,
color: 'rgba(68, 170, 213, .1)'
}, {
// min record
from: -200,
to: resp[1],
color: 'rgba(68, 170, 213, .2)'
}, {
// max record
from: resp[2],
to: 200,
color: 'rgba(243, 170, 68, .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: {
shared: true,
crosshairs: 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: 'Min temp',
pointStart: resp[0],
data: resp[3]
}, {
name: 'Moy temp',
pointStart: resp[0],
data: resp[5]
}, {
name: 'Max temp',
pointStart: resp[0],
data: resp[4]
}]
});
}
});
};
var temperatureByMonth = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'Moyenne des temperatures par mois. Vous pouvez activer le tracé de la moyenne régionale en cliquant dessus dans la légende du graphique.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicTemperatureByMonth.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container'
},
credits: {
enabled: false
},
title: {
text: 'Historique Mois Moy. Min/Moy/Max Températures (°C)'
},
subtitle: {
text: ''
},
xAxis: {
categories: shortMonths
},
yAxis: [{
// left y axis
// min: 0,
title: {
text: null
},
labels: {
align: 'right',
// x: -5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
},
plotBands: [{
// visualize sub-zero
from: -200,
to: 0,
color: 'rgba(68, 170, 213, .1)'
}, {
// min record
from: -200,
to: -10,
color: 'rgba(68, 170, 213, .2)'
}, {
// max record
from: 30,
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: null
},
labels: {
align: 'left',
// x: 5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
}
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: false,
borderWidth: 0
},
tooltip: {
shared: true,
formatter: function () {
var s = [];
$.each(this.points, function (i, point) {
s.push('\u25CF ' + point.series.name + ': ');
if (typeof point.point.high === 'undefined') {
s.push(Highcharts.numberFormat(point.y, 1));
} else {
s.push(Highcharts.numberFormat(point.point.low, 1) + ' - ' + Highcharts.numberFormat(point.point.high, 1));
}
s.push('°C
');
});
return s.join('');
}
},
plotOptions: {
columnrange: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0
}
},
series: []
});
var i = 0,
m = 0,
y, tmp, j,
avg = [],
numYears = resp[0].length;
// create some progressive shading for the columns
for (; i < numYears; i++) {
chart.addSeries({
type: 'columnrange',
name: resp[0][i],
data: resp[1][i],
// color: ColorLuminance('FF6060', -(0.8 / steps) * i)
color: ColorLuminance('FF6060', 0.6 / numYears * i - 0.6)
}, false);
}
chart.addSeries({
name: 'Moy Normale.',
marker: {
enabled: false
},
step: 'center',
lineWidth: 3,
//data: [4.2, 4.5, 6.3, 8.2, 11.6, 14.1, 16.3, 16.1, 13.6, 10.4, 6.8, 5.0],
data: [4.2, 5.0, 7.7, 10.0, 13.75, 17.0, 19.25, 19.15, 16.05, 12.55, 7.45, 4.9],
color: 'rgba(96,96,240,0.6)',
visible: false
}, false);
// Create station averages
for (; m < 12; m++) {
tmp = 0;
for (y = 0, j = 0; y < resp[0].length; y++) {
if (resp[2][y][m]) {
tmp += resp[2][y][m];
j++;
}
}
tmp = j > 1 ? Math.round(tmp / j * 10) / 10 : tmp;
avg.push(tmp);
}
chart.addSeries({
name: 'Station Moy.',
marker: {
enabled: false
},
step: 'center',
lineWidth: 3,
data: avg,
color: 'rgba(96,240,96,0.6)'
}, true);
}
});
};
var temperatureHiLo = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'The min and max temperatures recorded for each month, plus the average min and max ploted as an area. ' +
'You can enable/disable the individual series plots by clicking on them in the graph legend.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicTemperatureHiLo.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container',
type: 'columnrange'
},
credits: {
enabled: false
},
title: {
text: 'Historique Mois Maxi & Mini Températures (°C)'
},
subtitle: {
text: ''
},
xAxis: {
categories: shortMonths
},
yAxis: [{
// left y axis
maxPadding: 0,
minPadding: 0,
title: {
text: null
},
labels: {
align: 'right',
// x: -5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
},
plotBands: [{
// visualize sub-zero
from: -200,
to: 0,
color: 'rgba(68, 170, 213, .1)'
}]
}, { // 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: false,
borderWidth: 0
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0
}
},
series: [{
name: 'Extrême Max',
type: 'line',
color: 'red',
data: resp[0]
}, {
name: 'Extrême Min',
type: 'line',
color: 'blue',
data: resp[1]
}, {
name: 'Moy Min Max',
type: 'columnrange',
data: resp[2]
}]
});
}
});
};
var temperatureHourlyMonth = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'La température moyenne pour chaque heure de la journée tracée par mois.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicTemperatureHourlyMonth2.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container',
type: 'heatmap'
},
exporting: {
sourceWidth: 950,
sourceHeight: 530,
filename: 'TemperatureHourlyMonth',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Température moyenne/mois et /heure[UTC](°C)'
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'00-01', '01-02', '02-03', '03-04', '04-05',
'05-06', '06-07', '07-08', '08-09', '09-10',
'10-11', '11-12', '12-13', '13-14', '14-15',
'15-16', '16-17', '17-18', '18-19', '19-20',
'20-21', '21-22', '22-23', '23-00'
]
},
yAxis: [{
// left y axis
title: {
text: null
},
categories: Highcharts.getOptions().lang.shortMonths,
reversed: true
}],
colorAxis: {
stops: [
[0.1, '#a050bf'],
[0.3, '#3060cf'],
[0.35, '#3060cf'],
[0.5, '#30cf60'],
[0.7, '#fffbbc'],
[0.85, '#c4463a'],
[1.0, '#ef80ef']
]
},
legend: {
enabled: true,
align: 'right',
layout: 'vertical',
textcolor: 'white',
margin: 10,
verticalAlign: 'top',
y: 41,
symbolHeight: 400,
},
tooltip: {
split: true,
distance: 30,
padding: 3,
formatter: function() {
return '' + this.series.yAxis.categories[this.point.y] + ', ' + this.series.xAxis.categories[this.point.x] + ' | Temp Moy: ' + Highcharts.numberFormat(this.point.value, 1) + ' °C';
}
},
plotOptions: {},
series: [{
name: 'Average Temperature per hour',
dataLabels: {
enabled: true,
style: {
textOutline: '10px',
fontWeight: 'normal',
},
formatter: function() {
if (this.point.value > 0) {
return Highcharts.numberFormat(this.point.value, 0);
}
}
},
data: resp
}]
});
}
});
};
var temperatureComfort = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'Le pourcentage de temps ou la température quotidienne passe dans chacune des zones de confort. Ces zones sont ' +
' Froid intense(en dessous -9°C), Gel (-9°C à 0°C), Foid (0°C à 10°C), Frais (10°C à 15°C), Confortable (15°C à 20°C), ' +
'Chaud (20°C à 25°C), Forte chaleur (25°C à 30°C) Etouffant (above 30°C).'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicTemperatureComfort1.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container',
type: 'area'
},
credits: {
enabled: false
},
title: {
text: 'Niveaux de confort des températures (%)'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
week: '%b',
month: '%b'
},
minPadding: 0,
maxPadding: 0
},
yAxis: [{
// left y axis
min: 0,
max: 100,
reversedStacks: false,
title: {
text: null
},
labels: {
align: 'right',
// x: -5,
formatter: function () {
return Highcharts.numberFormat(this.value, 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: -10,
floating: false,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueSuffix: '%',
valueDecimals: 1,
xDateFormat: '%d %B',
useHTML: true,
},
plotOptions: {
area: {
stacking: 'percent'
},
series: {
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2001, 0, resp[8]),
events: {
// disable hiding series - it messes up the plot!
legendItemClick: function() {
return false;
}
}
}
},
series: [{
name: 'glacial',
data: resp[0],
color: '#8455ba',
lineColor: '#8455ba',
fillColor: '#8455ba'
}, {
name: 'froid',
data: resp[1],
color: '#71b9ce',
lineColor: '#71b9ce',
fillColor: '#71b9ce'
}, {
name: 'frais',
data: resp[2],
color: '#4c904e',
lineColor: '#4c904e',
fillColor: '#4c904e'
}, {
name: 'légère fraicheur',
data: resp[3],
color: '#8ad959',
lineColor: '#8ad959',
fillColor: '#8ad959'
}, {
name: 'confortable',
data: resp[4],
color: '#f8c93d',
lineColor: '#f8c93d',
fillColor: '#fac93d'
}, {
name: 'agréable',
data: resp[5],
color: '#ce5e42',
lineColor: '#ce5e42',
fillColor: '#ce6042'
}, {
name: 'Jours d\'été',
data: resp[6],
color: '#b41d19',
lineColor: '#b41d19',
fillColor: '#b41d19'
}, {
name: 'Caniculaire',
data: resp[7],
color: '#fe4840',
lineColor: '#fe4840',
fillColor: '#fe4840'
}]
});
}
});
};
var pressure = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'La plage de pression jour.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicPressureDaily.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'columnrange',
marginRight: 35
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'Historique Pression (hPa)'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
labels: {
align: 'left'
},
maxPadding: 0,
minPadding: 0,
dateTimeLabelFormats: {
day: '%e %b %y',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{
// left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 5,
formatter: function () {
return parseInt(this.value, 10);
}
},
// visualize record ranges
plotBands: [{
// Hi record
from: resp[1],
to: 2000,
color: 'rgba(243, 170, 68, .2)'
}, {
// Lo record
from: 0,
to: resp[0],
color: 'rgba(243, 170, 68, .2)'
}]
}],
legend: {
enabled: false
},
tooltip: {
shared: true,
crosshairs: true,
valueSuffix: ' hPa',
valueDecimals: 1,
xDateFormat: '%d %b %Y'
},
plotOptions: {
series: {
cursor: 'pointer',
lineWidth: 1
},
columnrange: {
groupPadding: 0.05
}
},
series: [{
name: 'Plage De Pression',
data: resp[2]
}]
});
}
});
};
var wind = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'La rafale maximum jour enregistrée, plus la vitesse moyenne de la journée.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicWindDaily.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'spline',
marginRight: 30
},
rangeSelector: {
selected: 1
},
credits: {
enabled: false
},
title: {
text: 'Historique Rafale De Vent Jour (km/h)'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
maxPadding: 0,
minPadding: 0,
labels: {
align: 'left'
},
dateTimeLabelFormats: {
day: '%e %b %y',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{
// left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
},
min: 0
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: false,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true,
valueSuffix: ' km/h',
xDateFormat: '%d %b %Y'
},
plotOptions: {
series: {
cursor: 'pointer',
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
pointInterval: 24 * 3600 * 1000
},
line: {
lineWidth: 1
},
spline: {
lineWidth: 2
}
},
series: [{
name: 'Moy rafale',
pointStart: resp[0],
data: resp[1]
}, {
name: 'Max rafale',
color: 'rgba(255,0,0,0.8)',
pointStart: resp[0],
data: resp[2]
}]
});
}
});
};
var windByMonth = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'The average wind speed for each month, plotted for each year.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicWindByMonth.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container'
},
credits: {
enabled: false
},
title: {
text: 'Historique Moy Rafale De Vent Mois (km/h)'
},
subtitle: {
text: ''
},
xAxis: {
categories: shortMonths
},
yAxis: [{
// left y axis
min: 0,
title: {
text: null
},
labels: {
align: 'right',
// x: -5,
formatter: function () {
return Highcharts.numberFormat(this.value, 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: false,
borderWidth: 0
},
/*
tooltip: {
formatter: function () {
return '' + this.x + ' ' + this.series.name + ': ' + this.point.low + '% - ' + this.point.high + '%';
}
},
*/
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0
}
},
series: []
});
var i = 0,
numYears = resp[0].length;
// create some progressive shading for the columns
for (; i < numYears; i++) {
chart.addSeries({
type: 'column',
name: resp[0][i],
data: resp[1][i],
// color: ColorLuminance('FF6060', -(0.8 / steps) * i)
color: ColorLuminance('FF6060', 0.6 / numYears * i - 0.6)
}, false);
}
chart.redraw();
}
});
};
var windHiLo = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'The monthly maximum gust recorded, the monthly maximum 10 minute average speed, the maximum daily average ' +
'for each month, and the all time monthly average wind speed.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicWindHiLo.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container',
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Historique Vent Mois (km/h)'
},
subtitle: {
text: ''
},
xAxis: {
categories: shortMonths
},
yAxis: [{
// left y axis
type: 'logarithmic',
maxPadding: 0,
minPadding: 0,
min: 1,
title: {
text: null
},
labels: {
align: 'right',
// x: -5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
}
}, {
// right y axis
type: 'logarithmic',
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: false,
borderWidth: 0
},
tooltip: {
shared: true,
valueDecimals: 1,
xDateFormat: '%d %B',
useHTML: true,
headerFormat: '{point.key} (km/h)
',
pointFormat: '\u25CF{series.name}: | ' +
'{point.y} |
',
footerFormat: '
'
},
plotOptions: {
column: {
grouping: false,
groupPadding: 0.05,
shadow: false,
borderWidth: 0
},
line: {
step: 'center',
marker: {
enabled: false
}
}
},
series: [{
name: 'Max ',
pointPadding: 0.3,
color: 'rgba(186,60,61,0.8)',
data: resp[0]
}, {
name: 'Max Moy 10min',
pointPadding: 0.2,
color: 'rgba(248,161,63,0.8)',
data: resp[1]
}, {
name: 'Max Moy Jour',
pointPadding: 0.1,
color: 'rgba(126,86,134,0.8)',
data: resp[2]
}, {
name: 'Moyenne',
pointPadding: 0,
color: 'rgba(165,170,217,0.8)',
data: resp[3]
}]
});
}
});
};
var rainMonthly = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'Le total pluie record mois.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicRainMonthlyAll.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'column'
},
rangeSelector: {
buttons: [{
type: 'year',
count: 1,
text: '1y'
}, {
type: 'year',
count: 2,
text: '2y'
}, {
type: 'all',
text: 'All'
}],
selected: 0
},
navigator: {
series: {
type: 'column',
color: 'rgba(124,181,236,0.6)'
}
},
credits: {
enabled: false
},
title: {
text: 'Historique Pluie Mois (mm)'
},
subtitle: {
text: ''
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
dateTimeLabelFormats: {
day: '%b %y',
week: '%b %y',
month: '%b %y',
year: '%b %y'
}
},
yAxis: [{
// left y axis
// min: 0,
title: {
text: null
},
gridLineWidth: 0,
labels: {
align: 'left',
x: 5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
}
}],
legend: {
enabled: false
},
tooltip: {
valueDecimals: 1
},
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0
}
},
series: [{
name: 'Pluie Mois',
data: resp
}]
});
}
});
};
var rainByMonth = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'The total rainfall grouped by month and year. You can enable the regional average plot by clicking on it in the graph legend.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicRainByMonth.php',
datatype: 'json',
success: function (resp) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container'
},
credits: {
enabled: false
},
title: {
text: 'Historique Pluie Mois (mm)'
},
subtitle: {
text: ''
},
xAxis: {
categories: shortMonths
},
yAxis: [{
// left y axis
// min: 0,
title: {
text: null
},
labels: {
align: 'right',
// x: -5,
formatter: function () {
return Highcharts.numberFormat(this.value, 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: false,
borderWidth: 0
},
tooltip: {
formatter: function () {
return '' + this.x + ' ' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1) + ' mm';
}
},
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0
}
},
series: []
});
var i = 0,
m = 0,
tmp, y, j,
avg = [],
numYears = resp[0].length;
// create some progressive shading for the columns
for (; i < numYears; i++) {
chart.addSeries({
type: 'column',
name: resp[0][i],
data: resp[1][i],
// color: ColorLuminance('8080FF', -(0.9 / steps) * i)
color: ColorLuminance('8080FF', 0.6 / numYears * i - 0.6)
});
}
chart.addSeries({
name: 'Moy Normale.',
marker: {
enabled: false
},
step: 'center',
// data: [70.2, 50.9, 62.4, 50.1, 57.3, 66.7, 62.3, 74.8, 72.1, 81.4, 79.7, 80.0], // 1st
//data: [71.5, 51.8, 64.0, 49.1, 53.8, 66.8, 59.5, 70.9, 69.9, 86.0, 81.9, 81.4], // 2nd
data: [91.9, 79.8, 78.7, 90.8, 95.7, 77.5, 65.6, 75.0, 74.1, 93.4, 101.3, 99.7],
color: 'rgba(240,96,96,0.6)',
visible: false
});
// Create station averages
for (; m < 12; m++) {
tmp = 0;
for (y = 0, j = 0; y < resp[0].length; y++) {
if (resp[1][y][m]) {
tmp += resp[1][y][m];
j++;
}
}
tmp = j > 1 ? Math.round(tmp / j * 10) / 10 : tmp;
avg.push(tmp);
}
chart.addSeries({
name: 'Station Moy.',
marker: {
enabled: false
},
step: 'center',
data: avg,
color: 'rgba(96,240,96,0.6)'
});
}
});
};
var rainByYear = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'The total rainfall grouped by year. You can drill down to the monthly totals for each by clicking ' +
'on the required yearly plot. Likewise from the monthly plot you can drill down to the daily totals for each month'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicRainByYear.php',
datatype: 'json',
success: function (resp) {
var options = {
chart: {
renderTo: 'graph_container',
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Historique Pluie/Années (mm)'
},
subtitle: {
text: ''
},
xAxis: {
type: 'category'
},
yAxis: [{
// left y axis
// min: 0,
title: {
text: null
},
labels: {
align: 'right',
}
}, {
// 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: {
enabled: false,
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
if (this.y > 0) {
return Highcharts.numberFormat(this.y, 1);
} else {
return '0';
}
}
}
}
},
series: [{}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: -20
}
},
series: [{}]
}
};
options.series[0] = {name: 'Years'};
options.series[0].data = [];
options.drilldown.series = [];
for (var yrIdx = 0; yrIdx < resp.length; yrIdx++) {
options.series[0].data[yrIdx] = {
name: resp[yrIdx].year,
y: resp[yrIdx].total,
drilldown: resp[yrIdx].year
};
options.drilldown.series[yrIdx] = {
name: resp[yrIdx].year,
id: resp[yrIdx].year,
data: []
};
for (var mnIdx = 0; mnIdx < resp[yrIdx].months.length; mnIdx++) {
options.drilldown.series[yrIdx].data[mnIdx] = {
name: resp[yrIdx].months[mnIdx][0] + '-' + resp[yrIdx].year,
y: resp[yrIdx].months[mnIdx][1],
drilldown: resp[yrIdx].months[mnIdx][0] + '-' + resp[yrIdx].year
};
}
}
for (yrIdx = 0; yrIdx < resp.length; yrIdx++) {
for (mnIdx = 0; mnIdx < resp[yrIdx].months.length; mnIdx++) {
options.drilldown.series.push({
name: resp[yrIdx].months[mnIdx][0] + '-' + resp[yrIdx].year,
id: resp[yrIdx].months[mnIdx][0] + '-' + resp[yrIdx].year,
data: [],
events: {
// Cannot get the drilldown event to fire for some reason!
click: function (e) {
if (e.point.drilldown) {
// Show the loading label
chart.showLoading('Loading...');
$.getJSON('highgraphs/historicRainDayHour.php', {datadate: e.point.id}, function (data) {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, data);
chart.subtitle.text = data.name;
});
}
}
}
});
for (var dyIdx = 0; dyIdx < resp[yrIdx].months[mnIdx][2].length; dyIdx++) {
options.drilldown.series[options.drilldown.series.length - 1].data[dyIdx] = {
name: resp[yrIdx].months[mnIdx][2][dyIdx][0] + '-' + resp[yrIdx].months[mnIdx][0],
id: resp[yrIdx].year + '-' + ('0' + (mnIdx + 1)).slice(-2) + '-' + ('0' + (dyIdx + 1)).slice(-2),
y: resp[yrIdx].months[mnIdx][2][dyIdx][1],
drilldown: resp[yrIdx].months[mnIdx][2][dyIdx][1] !== 0
};
}
}
}
chart = new Highcharts.Chart(options);
}
});
};
var rainDaily = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'Le total pluie jour.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicRainDaily.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'column',
marginRight: 30
},
rangeSelector: {
selected: 1
},
navigator: {
series: {
type: 'column',
color: 'rgba(124,181,236,0.6)'
}
},
credits: {
enabled: false
},
title: {
text: 'Historique Pluie Jour (mm)'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b %y',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
yAxis: [{
// left y axis
// min: 0,
title: {
text: null
},
labels: {
align: 'left',
x: 5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
}
}],
legend: {
enabled: false
},
tooltip: {
valueSuffix: ' mm',
valueDecimals: 1,
xDateFormat: '%d %b %Y'
},
plotOptions: {
column: {
pointPadding: 0.05,
borderWidth: 0,
cropThreshold: 500,
minPointLength: 2,
groupPadding: 0.1
// shadow: false
}
},
series: [{
name: 'Pluie Jour',
pointInterval: 24 * 3600 * 1000,
pointStart: resp[0],
data: resp[1]
}]
});
}
}); // end ajax()
};
var humidity = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'Le maximum et le minimum humidité record jour.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicHumidityDaily.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'columnrange',
marginRight: 30
},
rangeSelector: {
selected: 1
},
credits: {
enabled: false
},
title: {
text: 'Historique Relative Humidité (%)'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
labels: {
align: 'left'
},
maxPadding: 0,
minPadding: 0,
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{
// left y axis
title: {
text: null
},
max: 100,
minRange: 40,
labels: {
align: 'left',
x: 5,
formatter: function () {
return parseInt(this.value, 10);
}
},
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)'
}]
}],
legend: {
enabled: false
},
tooltip: {
shared: true,
crosshairs: true,
valueSuffix: '%',
xDateFormat: '%d %b %Y'
},
plotOptions: {
series: {
cursor: 'pointer',
lineWidth: 1,
pointInterval: 24 * 3600 * 1000,
states: {
hover: {
lineWidth: 1
}
}
},
columnrange: {
groupPadding: 0.05
}
},
series: [{
name: 'Humidité',
data: resp
}]
});
}
});
};
var humidityByMonth = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'The average maximum and minimum relative humidity recorded for each month, grouped by year. ' +
'The lowest ever realtive humidty recorded for each month is also plotted.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicHumidityByMonth.php',
datatype: 'json',
success: function (resp) {
var options = {
chart: {
renderTo: 'graph_container',
type: 'columnrange'
},
credits: {
enabled: false
},
title: {
text: 'Historique Moy Humidité Mois (%)'
},
subtitle: {
text: ''
},
xAxis: {
categories: shortMonths
},
yAxis: [{
// left y axis
min: 0,
max: 100,
title: {
text: null
},
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: false,
borderWidth: 0
},
tooltip: {
formatter: function () {
if (this.series.options.type === 'columnrange') {
return '' + this.x + ' ' + this.series.name + ': ' + this.point.low + '% - ' + this.point.high + '%';
} else {
return '' + this.x + ' ' + this.series.name + ': ' + this.y + '%';
}
}
},
plotOptions: {
columnrange: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0
},
line: {
step: 'center',
marker: {
enabled: false
}
}
},
series: [{}]
};
var i = 0;
var numYears = resp[0].length;
// create some progressive shading for the columns
for (; i < numYears; i++) {
options.series[i] = {
name: resp[0][i],
data: resp[1][i],
// color: ColorLuminance('6060FF', -(0.8 / steps) * i),
color: ColorLuminance('6060FF', 0.6 / numYears * i - 0.6),
type: 'columnrange'
};
}
// add the min values
options.series[i] = {
name: 'min value',
data: resp[2],
color: 'blue',
type: 'line'
};
chart = new Highcharts.Chart(options);
}
}); // end ajax()
};
var sunshine = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
' Solaire heures .'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicSunshineDaily.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'column'
},
rangeSelector: {
selected: 1
},
navigator: {
series: {
type: 'column',
color: 'rgba(218,165,32,0.6)'
}
},
credits: {
enabled: false
},
title: {
text: 'Historique Solaire Jour (hrs)'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
yAxis: [{
// min: 0,
title: {
text: null
},
labels: {
align: 'left',
x: 5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
}
}],
legend: {
enabled: false
},
tooltip: {
valueSuffix: ' hrs',
xDateFormat: '%d %b %Y'
},
plotOptions: {
column: {
pointPadding: 0.05,
borderWidth: 0,
cropThreshold: 500,
minPointLength: 2,
groupPadding: 0.1
}
},
series: [{
name: 'Solaire jour',
pointInterval: 24 * 3600 * 1000,
pointStart: resp[0],
color: '#DAA520',
data: resp[1]
}]
});
}
});
};
var rainrate = function() {
try {
chart.showLoading();
}
catch (e) {}
$('#graph_description').text('The highest daily rainfall rates.');
$.ajax({
url: '../utils/historicRainRateDaily.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'area'
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'RainRate',
scale: 1,
chartOptions: {
subtitle: null
}
},
rangeSelector: {
selected: 1
},
navigator: {
series: {
type: 'area',
color: 'rgba(218,165,32,0.6)'
}
},
credits: {
enabled: false
},
title: {
text: 'Historic Daily Rainfall Rates (mm/hr)'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b',
month: '%b',
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
yAxis: [{
//min: 0,
title: {
text: null
},
labels: {
align: 'left',
x: 5,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
}
}],
legend: {
enabled: false
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
xDateFormat: '%d %b %Y',
useHTML: true,
valueSuffix: " mm/hr",
},
plotOptions: {
column: {
pointPadding: 0.05,
borderWidth: 0,
cropThreshold: 500,
minPointLength: 2,
groupPadding: 0.1
}
},
series: [{
name: 'Max Rain Rate',
pointInterval: 24 * 3600 * 1000,
pointStart: resp[0],
color: '#4897F1',
data: resp[1],
shadow: {
color: 'black',
width: 3,
offsetX: 0,
offsetY: 0
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, 'rgba(72,151,241,0.4)'],
[1, 'rgba(72,151,241,0.1)']
]
}
}]
});
}
});
};
var solar = function() {
try {
chart.showLoading();
}
catch (e) {}
$('#graph_description').text('The highest daily solar radiation value.');
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicSolarDaily.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'area'
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'Solar',
scale: 1,
chartOptions: {
subtitle: null
}
},
rangeSelector: {
selected: 1
},
navigator: {
series: {
type: 'area',
color: 'rgba(218,165,32,0.6)'
}
},
credits: {
enabled: false
},
title: {
text: 'Historic Daily Solar Radiation (Wm/2)'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b',
month: '%b',
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
yAxis: [{
//min: 0,
title: {
text: null
},
labels: {
align: 'left',
x: 5,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
}
}],
legend: {
enabled: false
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
xDateFormat: '%d %b %Y',
useHTML: true,
valueSuffix: " Wm⁻²",
},
plotOptions: {
column: {
pointPadding: 0.05,
borderWidth: 0,
cropThreshold: 500,
minPointLength: 2,
groupPadding: 0.1
}
},
series: [{
name: 'Max Solar Radiation',
pointInterval: 24 * 3600 * 1000,
pointStart: resp[0],
color: '#EE5744',
data: resp[1],
shadow: {
color: 'black',
width: 3,
offsetX: 0,
offsetY: 0
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, 'rgba(238,87,68,0.3)'],
[1, 'rgba(238,87,68,0.1)']
]
}
}]
});
}
});
};
var uv = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'Maximum (UV index), records depuis le : 07 Mars 2017.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicUVDaily.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'area'
},
exporting: {
sourceWidth: 900,
sourceHeight: 500,
scale: 1.5,
chartOptions: {
subtitle: null
}
},
rangeSelector: {
selected: 1
},
navigator: {
series: {
type: 'area',
color: 'rgba(218,165,32,0.6)'
}
},
credits: {
enabled: false
},
title: {
text: 'Historique quotidien index UV '
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b',
month: '%b',
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
yAxis: [
{
//min: 0,
title: {
text: null
},
labels: {
align: 'left',
x: 5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
}
}
],
legend: {
enabled: false
},
tooltip: {
shared: true,
crosshairs: true,
valueSuffix: ' (index UV)',
valueDecimals: 1,
xDateFormat: '%d %b %Y'
},
plotOptions: {
column: {
pointPadding: 0.05,
borderWidth: 0,
cropThreshold: 500,
minPointLength: 2,
groupPadding: 0.1
}
},
series: [
{
name: 'Max UV',
pointInterval: 24 * 3600 * 1000,
pointStart: resp[0],
color: '#FB651B',
data: resp[1],
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, 'rgba(242,255,0,0.3)'],
[1, 'rgba(14,242,10,0.1)']
]
}
}
]
});
}
});
};
var sunshineByMonth = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'The total sunshine hours recorded each month grouped by year. You can enable the regional average plot by clicking on it in the graph legend.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicSunshineByMonth.php',
datatype: 'json',
success: function (resp) {
// Create the chart options
var options = {
chart: {
renderTo: 'graph_container'
},
credits: {
enabled: false
},
title: {
text: 'Historique Solaire Mois (hrs)'
},
subtitle: {
text: ''
},
xAxis: {
categories: shortMonths
},
yAxis: [{
// left y axis
// min: 0,
title: {
text: null
},
labels: {
align: 'right',
// x: -5,
formatter: function () {
return Highcharts.numberFormat(this.value, 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: false,
borderWidth: 0
},
tooltip: {
shared: true,
valueDecimals: 1,
useHTML: true,
headerFormat: '{point.key} (hours)',
pointFormat: '\u25CF{series.name}: | ' +
'{point.y} |
',
footerFormat: '
'
},
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0
}
},
series: [{}]
};
var i = 0,
m = 0,
tmp, y, j,
avg = [],
numYears = resp[0].length;
// create some progressive shading for the columns
for (; i < numYears; i++) {
options.series[i] = {
type: 'column',
name: resp[0][i],
data: resp[1][i],
// color: ColorLuminance('FFD700', -(0.8 / steps) * i)
color: ColorLuminance('FFD700', 0.6 / numYears * i - 0.6)
};
}
options.series[i++] = {
name: 'Moy Normale.',
marker: {
enabled: false
},
step: 'center',
//data: [52.5, 73.9, 64.0, 99.0, 146.9, 188.3, 172.5, 179.7, 166.3, 131.2, 59.5, 47.1],
data: [86, 104, 156.8, 167.7, 204.9, 227.4, 238.2, 231, 191.5, 133.3, 81.4, 77.6],
color: 'rgba(240,96,96,0.6)',
visible: false
};
// Create station averages
for (; m < 12; m++) {
tmp = 0;
for (y = 0, j = 0; y < resp[0].length; y++) {
if (resp[1][y][m]) {
tmp += resp[1][y][m];
j++;
}
}
tmp = j > 1 ? Math.round(tmp / j * 10) / 10 : tmp;
avg.push(tmp);
}
options.series[i++] = {
name: 'Station Avg.',
marker: {
enabled: false
},
step: 'center',
data: avg,
color: 'rgba(96,240,96,0.6)'
};
chart = new Highcharts.Chart(options);
}
}); // end ajax()
};
var sunshineByHour = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'The percentage of the possible time that the sun has actually been shining for each hour of the day.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicSunshineHourly.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container',
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Historic Percentage Sunshine by Hour of Day (UTC)'
},
subtitle: {
text: ''
},
xAxis: {
categories: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12',
'13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
},
yAxis: [{
// left y axis
// min: 0,
title: {
text: null
},
labels: {
align: 'right',
// x: -5,
formatter: function () {
return Highcharts.numberFormat(this.value, 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: {
enabled: false
},
tooltip: {
shared: true,
valueSuffix: ' %'
// formatter: function () {
// return '' + this.x + ' ' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1) + ' hrs';
// }
},
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0
}
},
series: [{
data: resp,
name: 'Solaire Heures',
color: '#DAA520',
marker: {
enabled: false
}
}]
});
}
});
};
var sunshineByYear = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'The total sunshine grouped by year. You can drill down to the monthly totals for each by clicking ' +
'on the required yearly plot. Likewise from the monthly plot you can drill down to the daily totals for each month'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicSunshineByYear.php',
datatype: 'json',
success: function (resp) {
// Create the chart options
var options = {
chart: {
renderTo: 'graph_container',
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Historique Solaire Année (hrs)'
},
subtitle: {
text: ''
},
xAxis: {
type: 'category'
},
yAxis: [{
// left y axis
// min: 0,
title: {
text: null
},
labels: {
align: 'right',
// x: -5
// formatter: function () {
// return Highcharts.numberFormat(this.value, 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: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
if (this.y > 0) {
return Highcharts.numberFormat(this.y, 1);
} else {
return '0';
}
}
}
}
},
series: [{
name: 'Years',
color: '#DAA520'
}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: -20
}
},
series: []
}
};
options.series[0].data = [];
options.drilldown.series = [];
options.series[0].name = 'Years';
for (var yrIdx = 0; yrIdx < resp.length; yrIdx++) {
options.series[0].data[yrIdx] = {
name: resp[yrIdx].year,
y: resp[yrIdx].total,
drilldown: resp[yrIdx].year
};
options.drilldown.series[yrIdx] = {
name: resp[yrIdx].year,
id: resp[yrIdx].year,
color: '#DAA520',
data: []
};
for (var mnIdx = 0; mnIdx < resp[yrIdx].months.length; mnIdx++) {
options.drilldown.series[yrIdx].data[mnIdx] = {
name: resp[yrIdx].months[mnIdx][0] + '-' + resp[yrIdx].year,
y: resp[yrIdx].months[mnIdx][1],
drilldown: resp[yrIdx].months[mnIdx][0] + '-' + resp[yrIdx].year
};
}
}
for (yrIdx = 0; yrIdx < resp.length; yrIdx++) {
for (mnIdx = 0; mnIdx < resp[yrIdx].months.length; mnIdx++) {
options.drilldown.series.push({
name: resp[yrIdx].months[mnIdx][0] + '-' + resp[yrIdx].year,
id: resp[yrIdx].months[mnIdx][0] + '-' + resp[yrIdx].year,
color: '#DAA520',
data: [],
events: {
// Cannot get the drilldown event to fire for some reason!
click: function (e) {
if (e.point.drilldown) {
// Show the loading label
chart.showLoading('Loading...');
$.getJSON('highgraphs/historicSunshineDayHour.php', {datadate: e.point.id}, function (data) {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, data);
chart.subtitle.text = data.name;
});
}
}
}
});
for (var dyIdx = 0; dyIdx < resp[yrIdx].months[mnIdx][2].length; dyIdx++) {
options.drilldown.series[options.drilldown.series.length - 1].data[dyIdx] = {
name: resp[yrIdx].months[mnIdx][2][dyIdx][0] + '-' + resp[yrIdx].months[mnIdx][0],
id: resp[yrIdx].year + '-' + ('0' + (mnIdx + 1)).slice(-2) + '-' + ('0' + (dyIdx + 1)).slice(-2),
y: resp[yrIdx].months[mnIdx][2][dyIdx][1],
drilldown: resp[yrIdx].months[mnIdx][2][dyIdx][1] !== 0
};
}
}
}
chart = new Highcharts.Chart(options);
}
}); // end ajax()
};
var sunshineHourlyMonth = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'The average percentage of the time that the sun is shining for each hour of the day plotted per month.'
);
$.ajax({
url: 'http://www.meteosegur.fr/utils/historicSunshineHourlyMonth.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container',
type: 'heatmap'
},
credits: {
enabled: false
},
title: {
text: 'Monthly Avg Sunshine by [UTC] Hour (%)'
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'00-01', '01-02', '02-03', '03-04', '04-05',
'05-06', '06-07', '07-08', '08-09', '09-10',
'10-11', '11-12', '12-13', '13-14', '14-15',
'15-16', '16-17', '17-18', '18-19', '19-20',
'20-21', '21-22', '22-23', '23-00'
]
},
yAxis: [
{ // left y axis
title: {
text: null
},
categories: Highcharts.getOptions().lang.shortMonths,
reversed: true
}
],
colorAxis: {
min: 0,
stops: [
[0.0, '#3FBAD8'],
[0.001, '#FF6C01'],
[0.5, '#FFFF00'],
[1.0, '#FFFFFF']
]
},
legend: {
enabled: true,
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '' + this.series.yAxis.categories[this.point.y] + ', ' +
this.series.xAxis.categories[this.point.x] + ':00 sunshine ' +
(this.point.value === 0 ? '0' : Highcharts.numberFormat(this.point.value, 1)) + '%';
}
},
plotOptions: {
},
series: [{
name: 'Percentage sunshine per hour',
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
if (this.point.value > 0) {
return Highcharts.numberFormat(this.point.value, 0);
}
},
style: {
color: 'rgba(0,0,0,0.5)',
fontSize: '9px',
textOutline: 'none'
}
},
data: resp
}]
});
}
});
};
var insolation = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'The total global insolation for each day. Note that values from 2017 onwards are probably more accurate!'
);
$.ajax({
url: 'highgraphs/historicInsolationDaily.php',
datatype: 'json',
success: function (resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'column'
},
rangeSelector: {
selected: 1
},
navigator: {
series: {
type: 'column',
color: 'rgba(6,181,37,0.6)'
}
},
credits: {
enabled: false
},
title: {
useHTML: true,
text : 'Historic Daily Global Insolation (kWh/m2)'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
yAxis: [{
// min: 0,
title: {
text: null
},
labels: {
align: 'left',
x: 5,
formatter: function () {
return Highcharts.numberFormat(this.value, 0);
}
}
}],
legend: {
enabled: false
},
tooltip: {
useHTML : true,
valueSuffix: ' kWhm-2',
xDateFormat: '%d %b %Y'
},
plotOptions: {
column: {
pointPadding: 0.05,
borderWidth: 0,
cropThreshold: 500,
minPointLength: 2,
groupPadding: 0.1
}
},
series: [{
name: 'Daily insolation',
pointInterval: 24 * 3600 * 1000,
pointStart: resp[0],
color: '#06b525',
data: resp[1]
}]
});
}
});
};
var insolationByMonth = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'The total global insolation recorded each month grouped by year. Note that values from 2017 onwards are probably more accurate!'
);
$.ajax({
url: 'highgraphs/historicInsolationByMonth.php',
datatype: 'json',
success: function (resp) {
// Create the chart options
var options = {
chart: {
renderTo: 'graph_container'
},
credits: {
enabled: false
},
title: {
useHTML: true,
text : 'Historic Global Insolation by Month (kWh/m2)'
},
subtitle: {
text: ''
},
xAxis: {
categories: shortMonths
},
yAxis: [{
// left y axis
// min: 0,
title: {
text: null
},
labels: {
align: 'right',
// x: -5,
formatter: function () {
return Highcharts.numberFormat(this.value, 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: false,
borderWidth: 0
},
tooltip: {
shared: true,
valueDecimals: 1,
useHTML: true,
headerFormat: '{point.key} (hours)',
pointFormat: '\u25CF{series.name}: | ' +
'{point.y} kWhm-2 |
',
footerFormat: '
'
},
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0
}
},
series: [{}]
};
var i = 0,
m = 0,
tmp, y, j,
avg = [],
numYears = resp[0].length;
// create some progressive shading for the columns
for (; i < numYears; i++) {
options.series[i] = {
type: 'column',
name: resp[0][i],
data: resp[1][i],
color: ColorLuminance('06b525', 0.6 / numYears * i - 0.6)
};
}
// Create station averages
for (; m < 12; m++) {
tmp = 0;
for (y = 0, j = 0; y < resp[0].length; y++) {
if (resp[1][y][m]) {
tmp += resp[1][y][m];
j++;
}
}
tmp = j > 1 ? Math.round(tmp / j * 10) / 10 : tmp;
avg.push(tmp);
}
options.series[i++] = {
name: 'Average.',
marker: {
enabled: false
},
step: 'center',
data: avg,
color: 'rgba(96,240,96,0.6)'
};
chart = new Highcharts.Chart(options);
}
}); // end ajax()
};
document.changeImage = function (im) {
$('#table_menu').find('*').removeClass('picked');
$(im).addClass('picked');
switch ($(im).attr('data-id')) {
case 'temp':
temperature();
break;
case 'tempByMon':
temperatureByMonth();
break;
case 'tempHiLo':
temperatureHiLo();
break;
case 'tempByHr':
temperatureHourlyMonth();
break;
case 'tempComfort':
temperatureComfort();
break;
case 'press':
pressure();
break;
case 'wind':
wind();
break;
case 'windByMon':
windByMonth();
break;
case 'windHiLo':
windHiLo();
break;
case 'rain':
rainDaily();
break;
case 'rainMon':
rainMonthly();
break;
case 'rainByMon':
rainByMonth();
break;
case 'rainByYr':
rainByYear();
break;
case 'hum':
humidity();
break;
case 'humByMon':
humidityByMonth();
break;
case 'sun':
sunshine();
break;
case 'sunByMon':
sunshineByMonth();
break;
case 'sunByHr':
sunshineByHour();
break;
case 'sunByYr':
sunshineByYear();
break;
case 'sunByMH':
sunshineHourlyMonth();
break;
case 'insol':
insolation();
break;
case 'insolByMon':
insolationByMonth();
break;
}
};
$(document).ready(function () {
temperature();
});