Highcharts Demo

author(s): Torstein Hønsi

by Ying Chor Ding

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>

<div id="container" style="width: 800px;"></div>

JavaScript

var yAxiscategories = ['AM', 'PM'],
  xAxiscategories = ['BO602', 'BO615', 'BO665', 'BO666', 'BO688', 'BO689', 'BO690', 'BO695'];

Highcharts.chart('container', {
  chart: {
    type: 'columnrange',
    inverted: true,
    events: {
      load: function() {
        var xAxis = this.xAxis[0],
          yAxis = this.yAxis[0],
          newYaxiscategories = [],
          newXaxiscategories = [],
          numberOfYZones,
          numberOfXZones;

        xAxis.setExtremes(0, 7);
        yAxis.setExtremes(0, 12);

        numberOfYZones = Math.ceil((this.yAxis[0].options.max - 1) / yAxiscategories.length);
        while (numberOfYZones--) {
          newYaxiscategories.push({
            name: '14-03-2016',
            categories: yAxiscategories
          });
          
					//addPlotLine Center
          yAxis.addPlotLine({
            color: 'gray',
            width: 1,
            value: 2 * numberOfYZones - 0.5,
            zIndex: 5
          });

        }

        yAxis.update({
          categories: newYaxiscategories
        });

        numberOfXZones = Math.ceil((this.xAxis[0].options.max - 1) / xAxiscategories.length);
        //alert(numberOfXZones)
        
        while (numberOfXZones--) {
          newXaxiscategories = newXaxiscategories.concat(xAxiscategories);
        }

        xAxis.update({
          categories: newXaxiscategories
        });
      }
    }
  },
  title: {
    text: ''
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  xAxis: {
    min: 0,
    max: 100,
    tickWidth: 0,
    gridLineWidth: 1,
    scrollbar: {
      enabled: false
    }
  },
  yAxis: {
    min: 0,
    max: 100,
    gridLineWidth: 1,
    opposite: true,
    tickInterval: 1,
    title: {
      text: ''
    },
    labels: {
      rotation: 0,
      style: {
        fontSize: 9
      }
    },
    scrollbar: {
      enabled: true
    }
  },
  plotOptions: {
    columnrange: {
      pointPadding: 0,
      groupPadding: 0.05,
     ...