/* global Highcharts:false */
/* eslint-env jquery */
/* 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 = 'rgba(';
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(10);
rgb += c + ',';
}
rgb += '0.7)'; // 0.7 transparaency
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: 'https://www.meteosegur.fr/utils/historicTemperatureDailyNews1.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('Ooops! Failed to load the chart.');
}
$('#graph_description').text('Average temperatures grouped by month. You can enable the regional average plot by clicking on it in the graph legend.');
$.ajax({
url: '../utils/historicTemperatureByMonthNews1.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container'
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'TemperatureByMonth',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Historique Mois Température. Moy (°C)'
},
subtitle: {
text: ''
},
xAxis: {
categories: shortMonths,
},
yAxis: [{ // left y axis
// min: 0,
max: 22,
endOnTick: false,
tickInterval: 2,
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, .9)'
}, {
// 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,
endOnTick: false,
title: {
text: null
},
tickInterval: 2,
labels: {
align: 'left',
// x: 5,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
}
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 0,
floating: false,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
useHTML: true,
valueSuffix: ' °C',
},
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0.7,
}
},
series: []
});
var i = 0,
m = 0,
y, tmp, j,
avg = [],
numYears = resp[0].length,
steps = numYears + 1;
// create some progressive shading for the columns
for (; i < numYears; i++) {
chart.addSeries({
type: 'column',
name: resp[0][i],
data: resp[1][i],
borderColor: '#303030',
lineWidth: 0.9,
shadow: true,
color: ColorLuminance('7bf418', -(0.8 / steps) * i),
}, false);
}
chart.addSeries({
name: 'Moy Normale',
marker: {
enabled: false
},
step: 'center',
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: '#ff4747',
lineWidth: 0.9,
visible: true,
shadow: {
color: 'black',
width: 1,
offsetX: 0,
offsetY: 0
},
}, 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: 'Moy Station ',
marker: {
enabled: false
},
step: 'center',
data: avg,
color: '#3fa2ff',
lineWidth: 0.9,
visible: false,
shadow: {
color: 'black',
width: 1,
offsetX: 0,
offsetY: 0
},
}, 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: 'https://www.meteosegur.fr/utils/historicTemperatureHiLoNews1.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)',
}, {
// visualize 30+
from: +30,
to: 50,
color: 'rgba(225, 60, 22, .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: 0,
floating: false,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
xDateFormat: '%a, %b %d, %Y',
valueSuffix: " °C",
},
plotOptions: {
columnrange: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0.7,
}
},
series: [{
name: 'Extrême Max',
type: 'spline',
color: '#F9314D',
lineWidth: 0.9,
shadow: true,
data: resp[0],
}, {
name: 'Moy Min Max',
type: 'columnrange',
borderColor: '#303030',
lineWidth: 0.9,
shadow: true,
data: resp[2],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0.3,
y1: 1
},
stops: [
[0, 'rgba(0,162,255, .5)'],
[1, 'rgba(249,49,77, .7)'],
]
},
}, {
name: 'Extrême Min',
type: 'spline',
color: '#00A2FF',
lineWidth: 0.9,
shadow: true,
data: resp[1],
}]
});
}
});
};
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: 'https://www.meteosegur.fr/utils/historicTemperatureHourlyMonthNews1.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: 'https://www.meteosegur.fr/utils/historicTemperatureComfortNews1.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('Ooops! Failed to load the chart.');
}
$('#graph_description').text('The daily pressure range.');
$.ajax({
url: '../utils/historicPressureDaily1.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'columnrange',
marginRight: 35
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'Pressure',
scale: 1.1,
buttons: {
contextButton: {
menuItems: ['viewFullscreen', 'printChart', 'downloadPNG', 'downloadJPEG', 'downloadSVG'],
},
},
chartOptions: {
subtitle: null,
chart: {
style: {
fontFamily: "'Verdana', sans-serif"
}
}
}
},
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);
}
},
plotBands: [ // visualize record ranges
{
// 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: {
split: true,
distance: 30,
padding: 3,
crosshairs: true,
valueSuffix: ' hPa',
valueDecimals: 1,
xDateFormat: '%d %b %Y',
useHTML: true,
},
plotOptions: {
series: {
cursor: 'pointer',
lineWidth: 1,
borderWidth: 0.7,
},
columnrange: {
groupPadding: 0.05
}
},
series: [{
name: 'Pression min max',
borderColor: '#303030',
color: 'rgba(5,141,199, 0.70)',
data: resp[2]
}]
});
}
});
};
var wind = function() {
try {
chart.showLoading();
}
catch (e) {
$('#graph_container').text('Ooops! Failed to load the chart.');
}
$('#graph_description').text('The daily maximum gust recorded, plus the average speed for the day.');
$.ajax({
url: '../utils/historicWindDaily1.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'spline',
marginRight: 30
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'Wind',
scale: 1,
chartOptions: {
subtitle: null
}
},
rangeSelector: {
selected: 1
},
credits: {
enabled: false
},
title: {
text: 'Historique Jour Vitesse Du Vent (kmh)'
},
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: {
split: true,
distance: 30,
padding: 3,
shared: true,
crosshairs: true,
valueSuffix: ' kmh',
xDateFormat: '%d %b %Y',
useHTML: true,
},
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: ' Rafale max ',
color: '#E13C16',
pointStart: resp[0],
data: resp[2],
shadow: {
color: 'black',
width: 4,
offsetX: 0,
offsetY: 0
},
}, {
name: 'Vent moy',
color: '#196EB7',
pointStart: resp[0],
data: resp[1],
shadow: {
color: 'black',
width: 4,
offsetX: 0,
offsetY: 0
},
}]
});
}
});
};
var windByMonth = function() {
try {
chart.showLoading();
}
catch (e) {
$('#graph_container').text('Ooops! Failed to load the chart.');
}
$('#graph_description').text('The average wind speed for each month, plotted for each year.');
$.ajax({
url: '../utils/historicWindByMonth1.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container'
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'WindByMonth',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Historique Mois Vitesse Moy Du Vent (kmh)'
},
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: -10,
floating: false,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
valueDecimals: 1,
useHTML: true,
valueSuffix: " kmh",
},
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0.7,
}
},
series: []
});
var i = 0,
numYears = resp[0].length,
steps = numYears + 1;
// create some progressive shading for the columns
for (; i < numYears; i++) {
chart.addSeries({
type: 'column',
name: resp[0][i],
data: resp[1][i],
borderColor: '#303030',
color: ColorLuminance('7D69A2', -(0.8 / steps) * i),
}, false);
}
chart.redraw();
}
});
};
var windHiLo = function() {
try {
chart.showLoading();
}
catch (e) {
$('#graph_container').text('Ooops! Failed to load the chart.');
}
$('#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: '../utils/historicWindHiLo1.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container',
type: 'column',
},
exporting: {
sourceWidth: 950,
sourceHeight: 550,
filename: 'WindHiLo',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Historique Du Vent Mois (kmh)'
},
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: -10,
floating: false,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
xDateFormat: '%d %B',
useHTML: true,
valueSuffix: " kmh",
},
plotOptions: {
column: {
grouping: false,
groupPadding: 0.05,
shadow: false,
borderWidth: 0.7
},
line: {
step: 'center',
marker: {
enabled: false
}
}
},
series: [{
name: 'Max Rafale',
pointPadding: 0.3,
borderColor: '#303030',
color: 'rgba(192,38,38,0.7)',
data: resp[0],
}, {
name: 'Max 10min Moy',
pointPadding: 0.2,
borderColor: '#303030',
color: 'rgba(242,143,67,0.7)',
data: resp[1],
}, {
name: 'Max Moy Jour',
pointPadding: 0.1,
borderColor: '#303030',
color: 'rgba(73,41,112,0.7',
data: resp[2],
}, {
name: 'Moyenne',
pointPadding: 0,
borderColor: '#303030',
color: 'rgba(108,146,210,0.7)',
data: resp[3],
}]
});
}
});
};
var rainMonthly = function() {
try {
chart.showLoading();
}
catch (e) {
$('#graph_container').text('Ooops! Failed to load the chart.');
}
$('#graph_description').text('The total rainfall recorded for each month.');
$.ajax({
url: '../utils/historicRainMonthlyAll1.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'column'
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'RainMonthly',
scale: 1,
chartOptions: {
subtitle: null
}
},
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(25, 110, 183, 0.7)',
}
},
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: {
split: true,
distance: 30,
padding: 3,
valueDecimals: 1,
xDateFormat: '%b %Y',
valueSuffix: " mm",
},
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0.7
}
},
series: [{
name: 'Pluie Mois',
borderColor: '#303030',
color: 'rgba(25, 110, 183, 0.7)',
data: resp,
shadow: {
color: 'black',
width: 2,
offsetX: 0,
offsetY: 0
},
}]
});
}
});
};
var rainByMonth = function() {
try {
chart.showLoading();
}
catch (e) {
$('#graph_container').text('Ooops! Failed to load the chart.');
}
$('#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: '../utils/historicRainByMonth1.php',
datatype: 'json',
success: function(resp) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container'
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'RainByMonth',
scale: 1,
chartOptions: {
subtitle: null
}
},
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: -10,
floating: false,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
useHTML: true,
valueSuffix: " mm",
},
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0.7
}
},
series: []
});
var i = 0,
m = 0,
tmp, y, j,
avg = [],
numYears = resp[0].length,
steps = numYears + 1;
// create some progressive shading for the columns
for (; i < numYears; i++) {
chart.addSeries({
type: 'column',
name: resp[0][i],
data: resp[1][i],
borderColor: '#303030',
color: ColorLuminance('789FF6', -(0.9 / steps) * i),
// color: 'rgb(' + (170 - i * 20) + ',' + (170 - i * 20) + ',' + (255 - i * 20) + ')'
});
}
chart.addSeries({
name: 'Moy normale',
marker: {
enabled: false
},
step: 'center',
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: '#991F08',
visible: true,
shadow: {
color: 'black',
width: 3,
offsetX: 0,
offsetY: 0
},
});
// 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: 'Moy station.',
marker: {
enabled: false
},
step: 'center',
data: avg,
color: '#0F3E11',
visible: false,
shadow: {
color: 'black',
width: 4,
offsetX: 0,
offsetY: 0
},
});
}
});
};
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: '../utils/historicRainByYear1.php',
datatype: 'json',
success: function(resp) {
var options = {
chart: {
renderTo: 'graph_container',
type: 'column'
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'Température',
scale: 1,
},
credits: {
enabled: false
},
title: {
text: 'Historique Pluie Année (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: {
borderColor: '#303030',
color: 'rgba(25, 110, 183, 0.7)',
borderWidth: 0.7,
dataLabels: {
enabled: true,
formatter: function() {
if (this.y > 0) {
return Highcharts.numberFormat(this.y, 1);
}
else {
return '0';
}
}
}
}
},
series: [{}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'regular',
color: '#413F3F'
},
activeDataLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic',
color: '#413F3F'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: -4,
x: -50
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'black',
r: 0,
states: {
hover: {
fill: '#66A4D9'
},
select: {
stroke: '#039',
fill: '#a4edba'
}
}
}
},
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('../utils/historicRainDayHour1.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('Ooops! Failed to load the chart.');
}
$('#graph_description').text('The total daily rainfall recorded for each day.');
$.ajax({
url: '../utils/historicRainDaily1.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'column',
marginRight: 30
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'RainDaily',
scale: 1,
chartOptions: {
subtitle: null
}
},
rangeSelector: {
selected: 1
},
navigator: {
series: {
type: 'column',
color: 'rgba(25, 110, 183, 0.7)',
}
},
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: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: false,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0.7
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
xDateFormat: '%d %b %Y',
valueSuffix: " mm",
},
plotOptions: {
column: {
pointPadding: 0.05,
borderWidth: 0.7,
cropThreshold: 500,
minPointLength: 2,
groupPadding: 0.1
// shadow: false
}
},
series: [{
name: 'Pluie Jour',
borderColor: '#303030',
pointInterval: 24 * 3600 * 1000,
pointStart: resp[0],
color: 'rgba(25, 110, 183, 0.7)',
data: resp[1],
}]
});
}
}); // end ajax()
};
var humidity = function() {
try {
chart.showLoading();
}
catch (e) {
$('#graph_container').text('Ooops! Failed to load the chart.');
}
$('#graph_description').text('The maximum and minimum relative humidity recorded for each day.');
$.ajax({
url: '../utils/historicHumidityDaily1.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'columnrange',
marginRight: 30
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'Humidity',
scale: 1,
chartOptions: {
subtitle: null
}
},
rangeSelector: {
selected: 1
},
credits: {
enabled: false
},
title: {
text: 'Historique 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: {
split: true,
distance: 30,
padding: 3,
shared: true,
crosshairs: true,
useHTML: true,
valueSuffix: " %",
},
plotOptions: {
series: {
cursor: 'pointer',
lineWidth: 1,
borderWidth: 0.7,
pointInterval: 24 * 3600 * 1000,
states: {
hover: {
lineWidth: 1
}
}
},
columnrange: {
groupPadding: 0.05
}
},
series: [{
name: 'Humidité',
borderColor: '#303030',
color: 'rgba(24,191,210, 0.7)',
data: resp,
}]
});
}
});
};
var humidityByMonth = function() {
try {
chart.showLoading();
}
catch (e) {
$('#graph_container').text('Ooops! Failed to load the chart.');
}
$('#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: '../utils/historicHumidityByMonth1.php',
datatype: 'json',
success: function(resp) {
var options = {
chart: {
renderTo: 'graph_container',
type: 'columnrange'
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'HumidityByMonth',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Historique Humidité Moy 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: -10,
floating: false,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
valueDecimals: 1,
useHTML: true,
valueSuffix: " %",
},
plotOptions: {
columnrange: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0.7
},
line: {
step: 'center',
marker: {
enabled: false
}
}
},
series: [{}]
};
var i = 0;
var numYears = resp[0].length;
var steps = numYears + 1;
// create some progressive shading for the columns
for (; i < numYears; i++) {
options.series[i] = {
name: resp[0][i],
data: resp[1][i],
borderColor: '#303030',
color: ColorLuminance('18BFD2', -(0.8 / steps) * i),
type: 'columnrange'
};
}
// add the min values
options.series[i] = {
name: 'min value',
data: resp[2],
color: '#3686F3',
type: 'line',
shadow: {
color: 'black',
width: 3,
offsetX: 0,
offsetY: 0
},
};
chart = new Highcharts.Chart(options);
}
}); // end ajax()
};
var sunshine = function() {
try {
chart.showLoading();
}
catch (e) {
$('#graph_container').text('Ooops! Failed to load the chart.');
}
$('#graph_description').text('The total sunshine hours recorded for each day.');
$.ajax({
url: '../utils/historicSunshineDaily1.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'graph_container',
type: 'column'
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'Sunshine',
scale: 1,
chartOptions: {
subtitle: null
}
},
rangeSelector: {
selected: 1
},
navigator: {
series: {
type: 'column',
color: 'rgba(253,174,45, 0.70)',
}
},
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: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
xDateFormat: '%d %b %Y',
valueSuffix: " heures",
},
plotOptions: {
column: {
pointPadding: 0.05,
borderWidth: 0.7,
cropThreshold: 500,
minPointLength: 2,
groupPadding: 0.1
}
},
series: [{
name: 'Solaire Jour',
borderColor: '#303030',
pointInterval: 24 * 3600 * 1000,
pointStart: resp[0],
color: 'rgba(253,174,45, 0.70)',
data: resp[1],
}]
});
}
});
};
var sunshineByMonth = function() {
try {
chart.showLoading();
}
catch (e) {
$('#graph_container').text('Ooops! Failed to load the chart.');
}
$('#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: '../utils/historicSunshineByMonth1.php',
datatype: 'json',
success: function(resp) {
// Create the chart options
var options = {
chart: {
renderTo: 'graph_container'
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'SunshineByMonth',
scale: 1,
chartOptions: {
subtitle: null
}
},
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: 0,
floating: false,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
useHTML: true,
valueSuffix: "heures",
},
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0.7
}
},
series: [{}]
};
var i = 0,
m = 0,
tmp, y, j,
avg = [],
numYears = resp[0].length,
steps = numYears + 1;
// create some progressive shading for the columns
for (; i < numYears; i++) {
options.series[i] = {
type: 'column',
name: resp[0][i],
data: resp[1][i],
borderColor: '#303030',
color: ColorLuminance('FDAE2D', -(0.8 / steps) * i),
shadow: {
color: 'black',
width: 2,
offsetX: 0,
offsetY: 0
},
// color: 'rgb(' + (170 - i * 20) + ',' + (170 - i * 20) + ',' + (255 - i * 20) + ')'
};
}
options.series[i++] = {
name: 'Moy normale',
marker: {
enabled: false
},
step: 'center',
data: [86, 104, 156.8, 167.7, 204.9, 227.4, 238.2, 231, 191.5, 133.3, 81.4, 77.6],
color: '#991F08',
visible: true,
shadow: {
color: 'black',
width: 3,
offsetX: 0,
offsetY: 0
},
};
// 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: 'Moy station',
marker: {
enabled: false
},
step: 'center',
data: avg,
color: '#0F3E11',
visible: false,
shadow: {
color: 'black',
width: 3,
offsetX: 0,
offsetY: 0
},
};
chart = new Highcharts.Chart(options);
}
}); // end ajax()
};
var sunshineByHour = function() {
try {
chart.showLoading();
}
catch (e) {
$('#graph_container').text('Ooops! Failed to load the chart.');
}
$('#graph_description').text('The percentage of the possible time that the sun has actually been shining for each hour of the day.');
$.ajax({
url: 'https://www.meteosegur.fr/utils/historicSunshineHourlyNews1.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container',
type: 'column'
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'SunshineByHour',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Historic Percentage Sunshine by Hour of Day (UTC)'
},
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
// 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: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
xDateFormat: '%d %B',
valueSuffix: " %",
},
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0.7
}
},
series: [{
data: resp,
name: 'Hourly Sunshine',
borderColor: '#303030',
color: 'rgba(253,174,45, 0.70)',
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: '../utils/historicSunshineByYear1.php',
datatype: 'json',
success: function(resp) {
// Create the chart options
var options = {
chart: {
renderTo: 'graph_container',
type: 'column'
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'SunshineByYear',
scale: 1,
chartOptions: {
subtitle: null
}
},
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: {
borderColor: '#303030',
color: 'rgba(253,174,45, 0.70)',
borderWidth: 0.7,
dataLabels: {
color: '#413F3F',
enabled: true,
formatter: function() {
if (this.y > 0) {
return Highcharts.numberFormat(this.y, 1);
}
else {
return '0';
}
}
}
}
},
series: [{
name: 'Years',
borderColor: '#303030',
color: 'rgba(253,174,45, 0.70)',
}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'regular',
color: '#413F3F'
},
activeDataLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic',
color: '#413F3F'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: -4,
x: -50
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'black',
r: 0,
states: {
hover: {
fill: '#F8C36B'
},
select: {
stroke: '#039',
fill: '#a4edba'
}
}
}
},
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,
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('https://www.meteosegur.fr/utils/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('Ooops! Failed to load the chart.');
}
$('#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: 'https://www.meteosegur.fr/utils/historicSunshineHourlyMonthNews1.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container',
type: 'heatmap'
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'SunshineHourlyMonth',
scale: 1,
chartOptions: {
subtitle: null
}
},
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: {
reversed: false,
textcolor: 'black',
gridLineColor: 'black',
min: 0,
max: 65,
marker: {
color: 'black'
},
stops: [
[0.0, '#36626D'],
[0.001, '#FF6C01'],
[0.5, '#FFFF00'],
[1.0, '#FFFFFF']
]
},
legend: {
enabled: true,
align: 'right',
layout: 'vertical',
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] + ' | Sunshine: ' + Highcharts.numberFormat(this.point.value, 1) + ' %';
}
},
plotOptions: {},
series: [{
name: 'Percentage sunshine per hour',
borderWidth: 0,
states: {
hover: {
color: '#a4edba',
borderColor: '#000000'
}
},
dataLabels: {
enabled: true,
style: {
color: '#000000',
textOutline: '1px',
fontWeight: 'normal',
},
formatter: function() {
if (this.point.value > 0) {
return Highcharts.numberFormat(this.point.value, 0);
}
}
},
data: resp
}]
});
}
});
};
var rainrate = function() {
try {
chart.showLoading();
}
catch (e) {}
$('#graph_description').text('The highest daily rainfall rates.');
$.ajax({
url: '../utils/historicRainRateDaily1.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: 'Historique Jour Intensité Pluie (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 Intensité pluie',
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: 'https://www.meteosegur.fr/utils/historicSolarDailyNews1.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: 'Historique Jour Radiation Solaire (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 Radiation Solaire',
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: 'https://www.meteosegur.fr/utils/historicUVDaily1.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 Jour 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 windrun = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'The daily total Windrun recorded (km).'
);
$.ajax({
url: '../utils/historicWindrunDailyNews1.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 Jour Parcours Du Vent (km)'
},
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',
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: 'Total Parcours Du Vent',
pointStart: resp[0],
data: resp[1]
}
]
});
}
});
};
var windrunByMon = function () {
try {
chart.showLoading();
} catch (e) {
$('#graph_container').text('Chart is not loaded.');
}
$('#graph_description').text(
'The total Windrun grouped by month and year.'
);
$.ajax({
url: '../utils/historicWindrunByMonthNews1.php',
datatype: 'json',
success: function (resp) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container'
},
credits: {
enabled: false
},
title: {
text: 'Historique Mois Parcours Du Vent (km)'
},
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: 0,
floating: false,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
useHTML: true,
valueSuffix: ' km',
},
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0
}
},
series: []
});
var i = 0,
m = 0,
tmp, y, j,
avg = [],
numYears = resp[0].length,
steps = numYears + 1;
// 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: 'rgb(' + (170 - i * 20) + ',' + (170 - i * 20) + ',' + (255 - i * 20) + ')'
});
}
// 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: 'Moy station.',
marker: {
enabled: false
},
step: 'center',
data: avg,
color: 'rgba(240,96,96,0.6)'
});
}
});
};
var pressureHiLo = function() {
try {
chart.showLoading();
}
catch (e) {
$('#graph_container').text('Ooops! Failed to load the chart.');
}
$('#graph_description').text('The min and max pressure recorded for each month, plus the average min and max plotted as an area. ' + 'You can enable/disable the individual series plots by clicking on them in the graph legend.');
$.ajax({
url: 'https://www.meteosegur.fr/utils/historicPressureHiLoNews1.php',
datatype: 'json',
success: function(resp) {
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_container',
type: 'columnrange'
},
exporting: {
sourceWidth: 950,
sourceHeight: 450,
filename: 'PressureHiLo',
scale: 1,
chartOptions: {
subtitle: null
}
},
credits: {
enabled: false
},
title: {
text: 'Historique Mois Haute & Basse Pression (hPa)'
},
subtitle: {
text: ''
},
xAxis: {
categories: shortMonths
},
yAxis: [{ // left y axis
maxPadding: 0,
minPadding: 0,
title: {
text: null
},
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},} ],
legend: {
align: 'left',
verticalAlign: 'top',
y: 0,
floating: false,
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6,
borderWidth: 0
},
tooltip: {
split: true,
distance: 30,
padding: 3,
shared: true,
valueDecimals: 1,
xDateFormat: '%a, %b %d, %Y',
valueSuffix: " hPa",
},
plotOptions: {
columnrange: {
groupPadding: 0.1,
pointPadding: 0.1,
borderWidth: 0.7,
}
},
series: [{
name: 'Extrême Max',
type: 'spline',
color: '#F9314D',
data: resp[0],
shadow: {
color: 'black',
width: 3,
offsetX: 0,
offsetY: 0
},
}, {
name: 'Moy Min Max',
type: 'columnrange',
borderColor: '#303030',
data: resp[2],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0.3,
y1: 1
},
stops: [
[0, 'rgba(0,162,255, .5)'],
[1, 'rgba(249,49,77, .7)'],
]
},
}, {
name: 'Extrême Min',
type: 'spline',
color: '#00A2FF',
data: resp[1],
shadow: {
color: 'black',
width: 3,
offsetX: 0,
offsetY: 0
},
}]
});
}
});
};