// graph_temp_max.js
var obs = [[1750464000000,31.6],[1750550400000,27.8],[1750636800000,22.9],[1750723200000,22.8],[1750809600000,29.2],[1750896000000,22],[1750982400000,24.3],[1751068800000,25.3],[1751155200000,28.6],[1751241600000,32.3],[1751328000000,35.9],[1751414400000,33.3],[1751500800000,22.4],[1751587200000,25.3],[1751673600000,25.2],[1751760000000,18.3],[1751846400000,19.8],[1751932800000,19.1],[1752019200000,24.7],[1752105600000,26.6],[1752192000000,25.6],[1752278400000,25.8],[1752364800000,26.1],[1752451200000,25.4],[1752537600000,22.6],[1752624000000,21.9],[1752710400000,25.5],[1752796800000,28.2],[1752883200000,29.8],[1752969600000,23.1],[1753056000000,22.1],[1753142400000,23.6]];
var obs30 = [[1750464000000,22.2],[1750550400000,22.7],[1750636800000,22.9],[1750723200000,23],[1750809600000,23.4],[1750896000000,23.6],[1750982400000,23.7],[1751068800000,23.9],[1751155200000,24],[1751241600000,24.2],[1751328000000,24.7],[1751414400000,25.2],[1751500800000,25.2],[1751587200000,25.4],[1751673600000,25.6],[1751760000000,25.5],[1751846400000,25.6],[1751932800000,25.7],[1752019200000,25.9],[1752105600000,26.2],[1752192000000,26.3],[1752278400000,26.1],[1752364800000,25.9],[1752451200000,25.8],[1752537600000,25.8],[1752624000000,25.8],[1752710400000,25.7],[1752796800000,25.7],[1752883200000,25.8],[1752969600000,25.7],[1753056000000,25.4],[1753142400000,25.3]];
var obs30avg = [[1750464000000,20.5],[1750550400000,20.5],[1750636800000,20.6],[1750723200000,20.7],[1750809600000,20.7],[1750896000000,20.8],[1750982400000,20.9],[1751068800000,21],[1751155200000,21.1],[1751241600000,21.2],[1751328000000,21.3],[1751414400000,21.3],[1751500800000,21.4],[1751587200000,21.5],[1751673600000,21.6],[1751760000000,21.7],[1751846400000,21.8],[1751932800000,21.8],[1752019200000,21.8],[1752105600000,21.9],[1752192000000,21.9],[1752278400000,22],[1752364800000,22.1],[1752451200000,22.1],[1752537600000,22.2],[1752624000000,22.3],[1752710400000,22.3],[1752796800000,22.4],[1752883200000,22.4],[1752969600000,22.5],[1753056000000,22.6],[1753142400000,22.7]];
var obs30ext = [[1750464000000,16.8,24.5],[1750550400000,17,24.9],[1750636800000,17.1,24.9],[1750723200000,17.2,24.9],[1750809600000,17.4,25.3],[1750896000000,17.5,25.3],[1750982400000,17.4,25.3],[1751068800000,17.3,25.4],[1751155200000,17.1,25.5],[1751241600000,17.2,25.4],[1751328000000,17.4,25.4],[1751414400000,17.6,25.5],[1751500800000,18.1,25.4],[1751587200000,18.6,25.4],[1751673600000,19.1,25.2],[1751760000000,19.4,25.2],[1751846400000,19.5,25.4],[1751932800000,19.4,25.6],[1752019200000,19,25.5],[1752105600000,19,25.4],[1752192000000,18.7,25.3],[1752278400000,18.6,25.1],[1752364800000,18.8,25.3],[1752451200000,18.9,25.5],[1752537600000,19,25.6],[1752624000000,19,25.7],[1752710400000,18.9,25.7],[1752796800000,18.8,25.8],[1752883200000,18.8,26.3],[1752969600000,18.9,26.9],[1753056000000,18.7,27.1],[1753142400000,18.4,27.2]];
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
series = [];
serie_obs = {
name: "Dagelijkse waarnemingen",
data: obs,
type: 'line',
color: '#7CB5EC',
marker: {
enabled: false,
symbol: 'circle'
}
};
series.push(serie_obs);
serie_obs30 = {
name: "Gemiddelde over 30 dagen, huidige situatie",
data: obs30,
type: 'spline',
color: '#313131',
marker: {
enabled: false,
symbol: 'circle'
}
};
series.push(serie_obs30);
serie_obs30avg = {
name: "Gemiddelde over 30 dagen, gemiddeld 1991-2020",
data: obs30avg,
type: 'spline',
color: '#F7A35C',
marker: {
enabled: false,
symbol: 'circle'
}
};
series.push(serie_obs30avg);
range_obs30ext = {
name: "Gemiddelde over 30 dagen, extreme waarden sinds 1991",
data: obs30ext,
type: 'arearange',
color: '#F7A35C',
fillOpacity: 0.3,
lineWidth: 0,
marker: {
enabled: false,
symbol: 'circle'
}
};
series.push(range_obs30ext);
Highcharts.chart('obs-graph-container', {
legend: {
layout: 'vertical',
itemMarginTop: 10,
title : {
text : 'Legende',
style:{"fontSize":"1.3rem","fontWeight": "normal"}
},
itemStyle: {
fontSize: "1.3rem",
fontWeight: 'normal'
}
},
chart: {
events: {
load: function() {
var downloadsymbol = document.getElementsByClassName('highcharts-button highcharts-contextbutton')[0].children[2];
downloadsymbol.setAttribute('fill','#3498df');
downloadsymbol.setAttribute('fill-opacity','1');
downloadsymbol.setAttribute('stroke','none');
downloadsymbol.setAttribute('stroke-width',0);
downloadsymbol.setAttribute('transform','matrix(2.123424,0,0,2.123424,0.95305272,0.39316552)');
downloadsymbol.setAttribute('d', "m 6.671875,1.1347656 a 0.59531254,0.59531254 0 0 0 -0.59375,0.5957031 v 7.3691407 a 0.59531254,0.59531254 0 0 0 0.59375,0.59375 0.59531254,0.59531254 0 0 0 0.5957031,-0.59375 V 1.7304687 A 0.59531254,0.59531254 0 0 0 6.671875,1.1347656 Z M 1.3222656,7.078125 A 0.59531254,0.59531254 0 0 0 0.72851562,7.6738281 V 11.90625 A 0.59537207,0.59537207 0 0 0 1.3222656,12.501953 H 11.90625 A 0.59537207,0.59537207 0 0 0 12.501953,11.90625 V 7.6738281 A 0.59531254,0.59531254 0 0 0 11.90625,7.078125 0.59531254,0.59531254 0 0 0 11.310547,7.6738281 V 11.310547 H 1.9179687 V 7.6738281 A 0.59531254,0.59531254 0 0 0 1.3222656,7.078125 Z M 6.6152344,0.9921875 A 0.59531254,0.59531254 0 0 0 6.0195312,1.5878906 v 7.671875 a 0.59531254,0.59531254 0 0 0 0.5957032,0.5957032 0.59531254,0.59531254 0 0 0 0.59375,-0.5957032 v -7.671875 a 0.59531254,0.59531254 0 0 0 -0.59375,-0.5957031 z M 3.7539063,5.2285156 A 0.59531254,0.59531254 0 0 0 3.3203125,5.3671875 0.59531254,0.59531254 0 0 0 3.25,6.2050781 l 2.9101562,3.4394532 a 0.59537207,0.59537207 0 0 0 0.9082032,0 L 9.9785156,6.2050781 A 0.59531254,0.59531254 0 0 0 9.9101563,5.3671875 0.59531254,0.59531254 0 0 0 9.0703125,5.4355469 L 6.6132812,8.3378906 4.1582031,5.4355469 A 0.59531254,0.59531254 0 0 0 3.7539063,5.2285156 Z");
return;
}
},
zoomType: 'x'
},
title: {
text: "Maximumtemperatuur(°C)",
style: {fontSize: "2.0rem"}
},
subtitle: {
text: "Dit is een interactieve grafiek, je kan de legende gebruiken als filter",
style: {fontSize: "1.3rem"}
},
xAxis: {
type: 'datetime',
labels:{
useHTML: true,
formatter: function() {
var date = new Date(this.value);
var dateLabel = formatShortDay(date);
return dateLabel ;
}
},
plotLines: [{
color: '#293a4b',
width: 2,
dashStyle: 'dash',
value: firstDay.getTime()
}]
},
yAxis: {
title: {
text: undefined,
style: {fontSize: "1.25em"}
},
plotLines: [{
color: '#A9A9A9',
width: 2,
value: 0
}]
},
tooltip: {
crosshairs: true,
shared: true,
useHTML: true,
formatter: function(){
var date = new Date(this.x);
var result = formatFullDate(date, language, false) ;
for(var i = 0 ; i < series.length ; ++i)
{
var obsLabel = null ;
if(this.points[i].point.low)
{
obsLabel = '' + this.points[i].series.name + ': ' + this.points[i].point.low + '/' + this.points[i].point.high + '°C' + '
';
}
else
{
obsLabel = '' + this.points[i].series.name + ': ' + this.points[i].y + '°C' + '
';
}
result += '
' + obsLabel ;
}
return result ;
}
},
credits: {
enabled: false
},
series: series
});