Highcharts Demo with min max flag

author(s): Torstein Hønsi

by jpeter06

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

// Data retrieved from http://vikjavev.no/ver/index.php?spenn=2d&sluttid=16.06.2015.
var curDate = "";
var dateArr = [];
var newArr = [];
Highcharts.chart('container', {
  chart: {
    type: 'spline',
    zoomType: 'x',
    events: {
      load: function() {
        var chart = this;
        for (var i = 0; i < chart.series[0].processedXData.length; i++) {
          if (new Date(chart.series[0].processedXData[i]).getDate() != curDate) {
            if (newArr != undefined) {

              var maxY = Math.max.apply(Math, newArr.map(function(o) {
                return o.y;
              }));
              var minY = Math.min.apply(Math, newArr.map(function(o) {
                return o.y;
              }));
              maxIndex = newArr.findIndex(x => x.y == maxY);
							minIndex = newArr.findIndex(x => x.y == minY);

              this.addSeries({

                type: 'flags',
                data: [{
                  x: newArr[maxIndex].x,
                  y: newArr[maxIndex].y,
                  title: 'Max:'+newArr[maxIndex].y,
                },{
                  x: newArr[minIndex].x,
                  y: newArr[minIndex].y,
                  title: 'Min: '+newArr[minIndex].y,
                }],

              });
            }

            var newArr = []
          } else {
            newArr.push({
                y: chart.series[0].processedYData[i],
                x: chart.series[0].processedXData[i]
              })
              //console.log(chart.series[0].processedYData[i])
          }
          curDate = new Date(chart.series[0].processedXData[i]).getDate()
        }
      }
    }
  },
  title: {
    text: 'Wind speed during two days'
  },
  subtitle: {
    text: 'May 31 and and June 1, 2015 at two locations in Vik i Sogn, Norway'
  },
  xAxis: {
    type: 'datetime',
    labels: {
      overflow: 'justify'
    },
    gridLineWidth: 2,
    tickInterval: 24 * 3600 * 1000,
  },
  yAxis: {
    title: {
      text: 'Wind speed (m/s)'
    },
...