Highcharts Stock Demo

author(s): Torstein Hønsi

by Mike Jacobson

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container" style="height: 400px; min-width: 600px"></div>

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

JavaScript

var seriesOptions = [],
    seriesCounter = 0,
    names = ['MSFT', 'AAPL', 'GOOG'];

/**
 * Create the chart when all data is loaded
 */
function createChart() {
var dataPoints = [
	{ date: '2011-10-22', event: 'Adult BMI Assessment' },
	{ date: '2011-11-09', event: 'Adult BMI Assessment' },
	{ date: '2012-03-30', event: 'Adult BMI Assessment' },
	{ date: '2012-04-07', event: 'Adult BMI Assessment' },
	{ date: '2012-09-15', event: 'Adult BMI Assessment' },
	{ date: '2013-06-01', event: 'Adult BMI Assessment' },
	{ date: '2015-02-09', event: 'Adult BMI Assessment' },
	{ date: '2016-04-24', event: 'Adult BMI Assessment' }
];

var data = dataPoints.map(function (p) {
	var d = new Date(p.date);
	return {
  	x: d.getTime(),
    y: 20,
    dateDisplay: p.date,
    event: p.event
  };
});

console.log("Data: ", data);

seriesOptions = [
	{
  	name: 'Utilizations',
    data: data
  }
];
var count = 0;
    Highcharts.stockChart('container', {
    		lineWidth: 0,

        rangeSelector: {
            selected: dataPoints.length - 1
        },

        plotOptions: {
            series: {
            		dataLabels: {
                	enabled: true,
                  align: 'center',
                  useHTML: true,
                	formatter: function() {
                  	return '<span style="display: inline-block; max-width: 70px; text-align: left; white-space: normal">' + this.point.event + '</span><span style="position: absolute; left: 0; bottom: -20px">' + this.point.dateDisplay + '</span>';
                  	return '<span style="position: absolute; left: 0; bottom: -20px">' + this.point.dateDisplay + '</span><span style="max-width: 70px; text-align: left; white-space: normal">' + this.point.event + '</span>';
                  }
                },
                showInNavigator: true,
                marker: { enabled: true, fillColor: '#7cb5ec', radius: 3}
            }
        },

        tooltip: {
            pointFormat: '<span...