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 = [],
          counter = 0,
          numberOfYZones,
          numberOfXZones,
          min = 10,
          max = 100;

        xAxis.setExtremes(-0.5, 7);
        yAxis.setExtremes(0, 11);

        numberOfYZones = Math.ceil((max - 1) / yAxisCategories.length);
        while (numberOfYZones--) {

          newYaxisCategories.push({
            name: Highcharts.dateFormat('%Y-%m-%d', Date.UTC(2017, 0, (1 + counter))),
            categories: yAxisCategories
          });
          counter++;

          yAxis.addPlotLine({
            color: 'gray',
            width: 1,
            value: 2 * numberOfYZones,
            zIndex: 5
          });
        }

        yAxis.update({
          categories: newYaxisCategories,
          tickmarkPlacement: 'on'
        });

        numberOfXZones = Math.ceil((max - 1) / xAxisCategories.length);
        while (numberOfXZones--) {
          newXaxisCategories = newXaxisCategories.concat(xAxisCategories);
        }

        xAxis.update({
          categories: newXaxisCategories,
          tickmarkPlacement: 'between'
        });
      }
    }
  },
  title: {
    text: ''
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  xAxis: {
    max: 100,
    tickWidth: 0,
    gridLineWidth: 1,
    scrollbar: {
      enabled: false
    }
  },
  yAxis: {
    max: 100,
    gridLineWidth: 1,
    opposite: true,
    tickInterval: 1,
    title: {
      text: ''
    },
    labels: {
      rotation: 0,
      style: {
        fontSize: 9
      }
    },
    scrollbar: {
      enabled: true
    }
  },
  plotOptions: {
   ...