Highcharts Demo

author(s):

by Nhi Nguyen

HTML

<!-- <script src="https://code.highcharts.com/highcharts.js"></script> -->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

(function (H) {
		H.wrap(H.Chart.prototype, 'zoom', function (proceed, event) {
			 console.log(event);
				// Run the original proceed method
				proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });
}(Highcharts));
$(function () {
var  starts = []
var ends = []
var start_dt = 1537430400000
starts.push(start_dt)
for(var i = 0; i<24;i++){
	 start_dt = start_dt + 3600000 
   starts.push(start_dt)
   ends.push(start_dt)
}
ends.push(start_dt+3600000)
console.log(ends)
Highcharts.chart('container', {
    chart: {
        type: 'xrange',
        height: 300,
        //zoomType: 'x',
        scrollablePlotArea:{
        	minWidth:720,
          scrollPositionX: 4
        }
        //plotAreaHeight: 200
    },
   /*  tooltip: {
        enabled: true
    }, */
     title: {
        text: ''
    }, 
    
    xAxis: {
        type: 'datetime',
        min: starts[0],
        max: starts[9],
         /* scrollbar: {
                 enabled: true
             }, */
    /* navigator: {
          enabled: true
        }, */
        /* min: starts[0],
                max: starts[4] */
    },
    legend: {
        enabled: false
    },
	exporting: {
        buttons: {
            contextButton: {
                enabled: false
            }    
        }
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['Weather', 'Road', 'Blowing Snow','Bridge Frost'],
        reversed: true
    },
    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        location.href = this.options.url;
                    }
                }
            }
        }
    },

    series: [{
        name: 'Project 1',
        // pointPadding: 0,
        // groupPadding: 0,
        borderColor: 'gray',
        pointWidth: 50,
        data: [{
            x: starts[0],
            x2: ends[0],
            y: 0,
            color: 'green',
...