Project Management

author(s): Jon Arild Nygård

by YameenYasin

HTML

<script src="https://code.highcharts.com/gantt/highcharts-gantt.src.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>

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

CSS

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

JavaScript

(function(H) {
  H.wrap(
    H._modules["Core/Axis/TreeGridAxis.js"].Additions.prototype,
    'collapse',
    function(proceed, node) {

      H.fireEvent(this.axis, 'collapse', {
        axis: this.axis,
        node: node
      });

      var ret = proceed.apply(this, Array.prototype.slice.call(arguments, 1));

      H.fireEvent(this.axis, 'afterCollapse', {
        axis: this.axis,
        node: node
      });

      return ret;
    }
  );

  H.wrap(
    H._modules["Core/Axis/TreeGridAxis.js"].Additions.prototype,
    'expand',
    function(proceed, node) {

      H.fireEvent(this.axis, 'expand', {
        axis: this.axis,
        node: node
      });

      var ret = proceed.apply(this, Array.prototype.slice.call(arguments, 1));

      H.fireEvent(this.axis, 'afterExpand', {
        axis: this.axis,
        node: node
      });

      return ret;
    }
  );
})(Highcharts);

var today = new Date(),
  day = 1000 * 60 * 60 * 24,
  // Utility functions
  dateFormat = Highcharts.dateFormat,
  defined = Highcharts.defined,
  isObject = Highcharts.isObject,
  reduce = Highcharts.reduce;

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();

Highcharts.ganttChart('container', {
  yAxis: {
    events: {
      afterExpand: function(event) {
        console.log(event);
      }
    }
  },
  series: [{
    name: 'Offices',
    data: [{
      name: 'New offices',
      id: 'new_offices',
      owner: 'Peter'
    }, {
      name: 'Prepare office building',
      id: 'prepare_building',
      parent: 'new_product',
      start: today - (2 * day),
      end: today + (6 * day),
      completed: {
        amount: 0.2
      },
      owner: 'Linda'
    }, {
      name: 'Inspect building',
      id: 'inspect_building',
      dependency: 'prepare_building',
      parent: 'new_offices',
      start: today + 6 * day,
      end: today + 8 * day,
      owner: 'Ivy'
    }, {
      name:...