Project Management

author(s): Jon Arild Nygård

by Black Label

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

(function(H) {
	  H.Renderer.prototype.symbols.diamond = H.Renderer.prototype.symbols.triangle
	})(Highcharts);



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

	// 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', {
	  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,
	      dataLabels: {
	        enabled: true,
	        inside: true,
	        format: 'XYZ',
	        y: -10
	      },
	      owner: 'Peter'
	    }, {
	      name: 'Relocate',
	      id: 'relocate',
	      dependency: 'passed_inspection',
	      parent: 'new_offices',
	      owner: 'Josh'
	    }, {
	      name: 'Relocate staff',
	      id: 'relocate_staff',
	      parent: 'relocate',
	      start: today + 10 * day,
	      end: today + 11 * day,
	      owner: 'Mark'
	    }, {
	      name: 'Relocate test facility',
	      dependency: 'relocate_staff',
	      parent: 'relocate',
	      start: today + 11 * day,
	      end: today + 13 * day,
	      owner: 'Anne'
	    }, {
	      name: 'Relocate...