// graph_temp_max.js var obs = [[1739318400000,4.8],[1739404800000,3.4],[1739491200000,1.4],[1739577600000,3.4],[1739664000000,3.8],[1739750400000,4.4],[1739836800000,4.8],[1739923200000,8.1],[1740009600000,12.5],[1740096000000,18.2],[1740182400000,12.5],[1740268800000,14.8],[1740355200000,12.9],[1740441600000,12.6],[1740528000000,10],[1740614400000,6.9],[1740700800000,8.4],[1740787200000,6],[1740873600000,9.8],[1740960000000,11.8],[1741046400000,14.5],[1741132800000,16.7],[1741219200000,17.8],[1741305600000,18.3],[1741392000000,19.7],[1741478400000,19.7],[1741564800000,16.4],[1741651200000,8.3],[1741737600000,8.1],[1741824000000,7.4],[1741910400000,7.2],[1741996800000,7.4]]; var obs30 = [[1739318400000,5.7],[1739404800000,5.7],[1739491200000,5.6],[1739577600000,5.6],[1739664000000,5.7],[1739750400000,5.8],[1739836800000,6],[1739923200000,6.3],[1740009600000,6.6],[1740096000000,7],[1740182400000,7.2],[1740268800000,7.4],[1740355200000,7.5],[1740441600000,7.6],[1740528000000,7.5],[1740614400000,7.4],[1740700800000,7.4],[1740787200000,7.4],[1740873600000,7.5],[1740960000000,7.7],[1741046400000,7.9],[1741132800000,8.2],[1741219200000,8.7],[1741305600000,9.2],[1741392000000,9.6],[1741478400000,10.1],[1741564800000,10.3],[1741651200000,10.3],[1741737600000,10.5],[1741824000000,10.6],[1741910400000,10.7],[1741996800000,10.8]]; var obs30avg = [[1739318400000,6.2],[1739404800000,6.1],[1739491200000,6.1],[1739577600000,6.2],[1739664000000,6.2],[1739750400000,6.3],[1739836800000,6.3],[1739923200000,6.3],[1740009600000,6.4],[1740096000000,6.4],[1740182400000,6.5],[1740268800000,6.5],[1740355200000,6.6],[1740441600000,6.7],[1740528000000,6.8],[1740614400000,6.9],[1740700800000,7],[1740787200000,7.1],[1740873600000,7.2],[1740960000000,7.3],[1741046400000,7.4],[1741132800000,7.5],[1741219200000,7.5],[1741305600000,7.6],[1741392000000,7.8],[1741478400000,7.9],[1741564800000,8],[1741651200000,8.2],[1741737600000,8.3],[1741824000000,8.5],[1741910400000,8.6],[1741996800000,8.8]]; var obs30ext = [[1739318400000,1.5,10.4],[1739404800000,1.4,10.5],[1739491200000,1.3,10.6],[1739577600000,1.3,10.6],[1739664000000,1.2,10.7],[1739750400000,1,10.7],[1739836800000,1,11],[1739923200000,1.1,11.3],[1740009600000,0.9,11.4],[1740096000000,1.1,11.3],[1740182400000,1.4,11.3],[1740268800000,1.8,11.2],[1740355200000,2.2,11],[1740441600000,2.5,11],[1740528000000,2.7,10.9],[1740614400000,2.8,10.8],[1740700800000,3.1,10.8],[1740787200000,3.2,11],[1740873600000,3.5,11.3],[1740960000000,3.6,11.6],[1741046400000,3.9,11.9],[1741132800000,4,12.1],[1741219200000,3.9,12.3],[1741305600000,3.9,12.5],[1741392000000,3.8,12.6],[1741478400000,3.8,12.7],[1741564800000,3.8,12.8],[1741651200000,3.7,12.8],[1741737600000,3.6,12.8],[1741824000000,3.5,12.9],[1741910400000,3.4,13],[1741996800000,3.7,13.1]]; 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 });