Highcharts timeline

by Ryan Brackett

HTML

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

<div id="container" style="width: 100%; height: 300px;"></div>

JavaScript

$(function() {
   $('#container').highcharts({
     chart: {
       type: 'columnrange',
       inverted: true
     },
     title: {
       text: 'Equipment Status'
     },
     scrollbar: {
       enabled: true
     },
     xAxis: {
       type: 'datetime',
       visible: false,
       max: 5,
     },
     yAxis: {
       type: 'datetime',
       title: {
         text: ''
       },
       visible: true,
     },
     tooltip: {
       formatter: function() {
         return false;
       }
     },
     plotOptions: {
       series: {
         groupPadding: .1,
         pointPadding: 0,
         borderWidth: 0
       }
     },
     series: [{
       data: [{
         name: 1,
         low: Date.UTC(2016, 07, 01),
         high: Date.UTC(2017, 04, 04),
         color: '#556b2f'
       }, {
         name: 2,
         low: Date.UTC(2016, 05, 01),
         high: Date.UTC(2017, 01, 04),
         color: '#556b2f'
       }, {
         name: 3,
         low: Date.UTC(2016, 03, 01),
         high: Date.UTC(2017, 02, 04),
         color: '#FFFF99'
       }, {
         name: 4,
         low: Date.UTC(2016, 09, 28),
         high: Date.UTC(2017, 04, 04),
         color: 'red'
       }, {
         name: 5,
         low: Date.UTC(2016, 04, 01),
         high: Date.UTC(2017, 03, 04),
         color: '#556b2f'
       }, {
         name: 6,
         low: Date.UTC(2016, 11, 28),
         high: Date.UTC(2017, 07, 04),
         color: 'red'
       }, {
         name: 7,
         low: Date.UTC(2016, 11, 28),
         high: Date.UTC(2017, 07, 04),
         color: 'blue'
       }, {
         name: 8,
         low: Date.UTC(2016, 11, 28),
         high: Date.UTC(2017, 07, 04),
         color: 'gree'
       }, {
         name: 9,
         low: Date.UTC(2016, 11, 28),
         high: Date.UTC(2017, 07, 04),
         color: 'red'
       }, {
         name: 10,
         low: Date.UTC(2016, 11, 28),
         high: Date.UTC(2017, 07, 04),
         color: 'blue'
       }, {
         name: 11,
...