Gantt Project Management

by therm81

HTML

<script src="https://code.highcharts.com/gantt/highcharts-gantt.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

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', {
  navigator: {
    enabled: true,
    liveRedraw: false,
    series: {
      type: 'gantt',
      pointPlacement: 0.5,
      pointPadding: 0.25
    },
    yAxis: {
      min: 0,
      max: 6,
      reversed: true,
      categories: []
    },
    verticalAlign: 'top',
    height: 80
  },
  credits: {
    enabled: false
  },
  scrollbar: {
    enabled: false
  },
  rangeSelector: {
    enabled: true,
    selected: 5,
    floating: false,
    y: 0
  },
  chart: {
    scrollablePlotArea: {
      minHeight: window.innerHeight,
      opacity: 1
    },
    marginRight: 30,
    height: window.innerHeight - 75
  },
  series: [{
    name: 'Offices',
    data: [{
      name: 'New offices',
      id: 'new_offices',
      owner: 'Peter'
    }, {
      name: 'Prepare office building',
      id: 'prepare_building',
      parent: 'new_offices',
      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: 'Passed inspection',
      id: 'passed_inspection',
      dependency: 'inspect_building',
      parent: 'new_offices',
      start: today + 9.5 * day,
      milestone: true,
      owner: 'Peter'
    }, {
      name: 'Relocate',
      id: 'relocate',
      dependency: 'passed_inspection',
      parent: 'new_offices',
      owner: 'Josh'
    }, {
      name: 'Relocate staff',
      id:...