Highcharts Demo

author(s): Torstein Hønsi

by Sajeetharan Sinnathurai

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.0/highcharts.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="height: 600px"></div>

JavaScript

debugger;
var chart1;
var count = 0;
$(document).ready(function() {
  chart1 = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'column',
      events: {
        drilldown: function(event) {
          count += 1;
          for (i = 0; i < this.xAxis.length; ++i) {
            this.xAxis[i].update({
              visible: i == count
            });
          }
        },
        drillup: function(event) {
          count *= 1000;
          for (i = 0; i < this.xAxis.length; ++i) {
            this.xAxis[i].update({
              visible: i == count
            });
          }
        }
      }
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true
        }
      }
    },
    xAxis: [{
      dateTimeLabelFormats: {
        day: '%e-%b'
      },
      id: 'X0',
      title: {
        text: 'Parent'
      },
      type: 'datetime'
    }, {
      id: 'X1',
      title: {
        'text': 'Child'
      },
      type: 'category',
      visible: false
    }],
    series: [{
      name: 'Amount',
      id: 'Amount',
      data: [{
        name: '12-08-2016',
        x: Date.UTC(2016, 7, 12),
        y: 17070198.89,
        drilldown: '12-08-2016-Amount'
      }, {
        name: '13-08-2016',
        x: Date.UTC(2016, 7, 13),
        y: 5999332.35,
        drilldown: '13-08-2016-Amount'
      }, {
        name: '14-08-2016',
        x: Date.UTC(2016, 7, 14),
        y: 1937759.0,
        drilldown: '14-08-2016-Amount'
      }, {
        name: '26-08-2016',
        x: Date.UTC(2016, 7, 26),
        y: 100.0,
        drilldown: '26-08-2016-Amount'
      }],
      pointStart: 1470960000000,
      pointInterval: 86400000,
      pointRange: 86400000
    }],
    drilldown: {
      'series': [{
        id: '12-08-2016-Amount',
        xAxis: 'X1',
        data: [{
          name: 'B0019',
          y: 566489.9
        }, {
          name: 'C0051',
          y: 256365.0
        }, {
          name: 'F0040',
          y:...