Highcharts Gantt Demo

Highcharts Gantt example chart

HTML

<script src="http://github.highcharts.com/gantt/highcharts-gantt.src.js"></script>

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

JavaScript

var today = new Date(),
    day = 1000 * 60 * 60 * 24;

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

// THE CHART
Highcharts.ganttChart('container', {
    title: {
        text: 'Gantt Chart Test'
    },
    xAxis: [{
        currentDateIndicator: true,
        min: today - 30 * day,
        max: today + 30 * day,
        labels: {
        	format: '{value:%B}'
        },
        tickInterval: day * 30 // Month
    }],
    
    yAxis: {
    	labels: {
      	useHTML: true
      }
    },
    
		tooltip: {
    	pointFormat: 'Custom tooltip: {point.id}'
    },

    series: [{
        name: 'Offices',
        data: [{
            taskName: 'New offices',
            id: 'new_offices',
            start: today - 2 * day,
            end: today + 14 * day,
            dataLabels: {
            	useHTML: true,
            	format: 'My custom label with link: <a href="http://www.google.com">Google</a>'
            }
        }, {
            taskName: 'Prepare office building',
            id: 'prepare_building',
            parent: 'new_offices',
            start: today - (2 * day),
            end: today + (6 * day),
            completed: {
                amount: 0.2
            }
        }, {
            taskName: 'Inspect building <a href="http://www.google.com">Google</a>',
            id: 'inspect_building',
            dependency: 'prepare_building',
            parent: 'new_offices',
            start: today + 6 * day,
            end: today + 8 * day
        }, {
            taskName: 'Passed inspection',
            id: 'passed_inspection',
            dependency: 'inspect_building',
            parent: 'new_offices',
            start: today + 9.5 * day,
            milestone: true
        }, {
            taskName: 'Relocate',
            id: 'relocate',
            dependency: 'passed_inspection',
            parent: 'new_offices',
           ...