// graph_temp_max.js

var obs = [[1762819200000,12.5],[1762905600000,14.9],[1762992000000,16.2],[1763078400000,16.5],[1763164800000,14.2],[1763251200000,11.7],[1763337600000,7.7],[1763424000000,5],[1763510400000,5.9],[1763596800000,2.8],[1763683200000,4.2],[1763769600000,3.9],[1763856000000,5.7],[1763942400000,8],[1764028800000,5.9],[1764115200000,6.8],[1764201600000,7.3],[1764288000000,9.3],[1764374400000,10.6],[1764460800000,7.4],[1764547200000,7.4],[1764633600000,9.8],[1764720000000,8.8],[1764806400000,9.1],[1764892800000,6.9],[1764979200000,10.4],[1765065600000,14.2],[1765152000000,14.3],[1765238400000,14.5],[1765324800000,13.7],[1765411200000,9],[1765497600000,10.8]];
var obs30 = [[1762819200000,14.1],[1762905600000,14.1],[1762992000000,14.1],[1763078400000,14.2],[1763164800000,14.2],[1763251200000,14.2],[1763337600000,13.9],[1763424000000,13.6],[1763510400000,13.2],[1763596800000,12.8],[1763683200000,12.4],[1763769600000,12.1],[1763856000000,11.9],[1763942400000,11.8],[1764028800000,11.7],[1764115200000,11.5],[1764201600000,11.3],[1764288000000,11.1],[1764374400000,11],[1764460800000,10.8],[1764547200000,10.6],[1764633600000,10.5],[1764720000000,10.3],[1764806400000,10.1],[1764892800000,9.7],[1764979200000,9.5],[1765065600000,9.4],[1765152000000,9.4],[1765238400000,9.4],[1765324800000,9.5],[1765411200000,9.4],[1765497600000,9.3]];
var obs30avg = [[1762819200000,13.3],[1762905600000,13.1],[1762992000000,12.9],[1763078400000,12.8],[1763164800000,12.6],[1763251200000,12.4],[1763337600000,12.2],[1763424000000,12.1],[1763510400000,11.9],[1763596800000,11.7],[1763683200000,11.5],[1763769600000,11.3],[1763856000000,11.1],[1763942400000,11],[1764028800000,10.8],[1764115200000,10.6],[1764201600000,10.5],[1764288000000,10.3],[1764374400000,10.1],[1764460800000,10],[1764547200000,9.8],[1764633600000,9.6],[1764720000000,9.4],[1764806400000,9.2],[1764892800000,9],[1764979200000,8.9],[1765065600000,8.7],[1765152000000,8.6],[1765238400000,8.5],[1765324800000,8.3],[1765411200000,8.2],[1765497600000,8]];
var obs30ext = [[1762819200000,9.7,17.4],[1762905600000,9.4,17.5],[1762992000000,9.2,17.5],[1763078400000,9.3,17.3],[1763164800000,9.2,17.1],[1763251200000,9,16.9],[1763337600000,8.8,16.6],[1763424000000,8.6,16.4],[1763510400000,8.4,16],[1763596800000,8.2,15.6],[1763683200000,7.9,15.2],[1763769600000,7.6,14.9],[1763856000000,7.3,14.6],[1763942400000,7,14.4],[1764028800000,6.9,14.1],[1764115200000,6.7,13.8],[1764201600000,6.3,13.6],[1764288000000,5.8,13.3],[1764374400000,5.6,13.2],[1764460800000,5.5,13],[1764547200000,5.4,12.7],[1764633600000,5.4,12.5],[1764720000000,5.2,12.6],[1764806400000,5,12.6],[1764892800000,4.8,12.8],[1764979200000,4.8,12.8],[1765065600000,4.5,12.8],[1765152000000,4.2,12.7],[1765238400000,3.8,12.6],[1765324800000,3.6,12.5],[1765411200000,3.5,12.4],[1765497600000,3.7,12.3]];

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 = '<div style="display:inline-block; border-radius: 50%;width:10px;height:10px;background:' + this.points[i].series.color + ';" ></div><div style="display:inline-block;padding-left: 3px;">' + this.points[i].series.name + ': <b>' + this.points[i].point.low + '</b>/<b>' + this.points[i].point.high + '</b>°C' + '</div></div>';
        }
        else
        {
          obsLabel = '<div style="display:inline-block; border-radius: 50%;width:10px;height:10px;background:' + this.points[i].series.color + ';" ></div><div style="display:inline-block;padding-left: 3px;">' + this.points[i].series.name + ': <b>' + this.points[i].y + '</b>°C' + '</div></div>';
        }
        result += '<br />' + obsLabel ;
      }
      return result ;
    }
 },
 credits: {
  enabled: false
 },

 series: series

});