Highcharts Demo with min max flag

author(s): Torstein Hønsi

by jpeter06

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>



<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button onclick="mostrarOcultarMax()">
mostrar/ocultar MaxMix
</button>

JavaScript

// Data retrieved from http://vikjavev.no/ver/index.php?spenn=2d&sluttid=16.06.2015.
var curDate = "";
var dateArr = [];
var newArr = [];
var data = [0.3, 0.2, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.8, 1.7, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6];
var HC = Highcharts.chart('container', {
  chart: {
    type: 'spline',
    zoomType: 'x'
  },
  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)'
    },
    minorGridLineWidth: 0,
    gridLineWidth: 0,
    alternateGridColor: null,
    plotBands: []
  },
  tooltip: {
    valueSuffix: ' m/s'
  },

  plotOptions: {
    spline: {
      lineWidth: 4,
      states: {
        hover: {
          lineWidth: 5
        }
      },
      marker: {
        enabled: false
      },
      pointInterval: 3600000, // one hour
      pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
    }
  },
  series: [{
    name: 'Hestavollane',
    data: data

  }],
  navigation: {
    menuItemStyle: {
      fontSize: '10px'
    }
  }
});

function mostrarOcultarMax(){
 console.log(HC.series);
 if(HC.series.length == 1){console.log("add")
    HC.addSeries({
    							id: 'maxmin',
                  type: 'flags',
                  data: [{
                    x:Date.UTC(2015, 4, 31, 0, 0, 0) + 3600000 * 10,
                    y: 10,
                    title: 'Max:'+10,
                  },{
                    x: Date.UTC(2015, 4, 31, 0, 0, 0) + 3600000 * 14,
                    y:5,
                    title: 'Min: '+5,
                  }],
                }); 
 }else{
 console.log("remove")
 	HC.series[1].remove()
 }

}