Highcharts Demo

author(s): Torstein Hønsi

by Matt Howey

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Get selected points</button>

JavaScript

var chart = Highcharts.chart('container', {
    xAxis: {
    	type: 'datetime',
      text: 'Date Range',
      min: 1498914474000,
      max: 1509541674000,
      tickInterval: 1000000000
    },
    plotOptions: {
        series: {
            allowPointSelect: false
        },
        line: {
        	marker: {
      			enabled: true,
          	radius: 7
          },
        	color: 'purple',
          lineWidth: 5
        }
    },
    yaxis: {
      	min: 0,
        max: 300
    },
    series: [
    {	name: 'weight',
      data: [
      {
        x: 1498914474000,
        y: 220
      },
      {
        x: 1501027200000,
        y: 200
      },
      {
      	x: 1504012074000,
        y: 190
      }]
    },
    {	name: 'milestones',
      data: [
      {
      	name: 'BEGINNING',
        y: 8,
        x: 1502541674000
      },
      {
      	name: 'SURGERY',
        x: 1504012074000,
        y: 8
      },
      {
      	name: 'ANOTHER',
        y: 8,
        x: 1509541674000
      }]
    },
    ]
});


// the button action
$('#button').click(function () {
    var selectedPoints = chart.getSelectedPoints();

    if (chart.lbl) {
        chart.lbl.destroy();
    }
    chart.lbl = chart.renderer.label('You selected ' + selectedPoints.length + ' points', 100, 60)
        .attr({
            padding: 10,
            r: 5,
            fill: Highcharts.getOptions().colors[1],
            zIndex: 5
        })
        .css({
            color: 'white'
        })
        .add();
});