Highcharts Gantt Demo

Highcharts Gantt example chart

HTML

<script src="https://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 Timeline'
    },
    xAxis: {
        min: today - 10 * day,
        max: today
    },

    /*
    plotOptions: {
        gantt: {
            pathfinder: {
                type: 'simpleConnect'
            }
        }
    },
    */

    series: [{
        name: 'State 1',
        data: [{
            taskName: 'System 1',
            start: today - 10 * day,
            end: today - 7 * day
        }, {
            taskName: 'System 2',
            start: today - 6 * day,
            end: today - 3 * day
        }, {
            taskName: 'System 3',
            start: today - 7 * day,
            end: today - 2 * day
        },{
            taskName: 'System 1',
            start: today - 3 * day,
            end: today - 0 * day
        }]
    }, {
        name: 'State 2',
        data: [{
            taskName: 'System 1',
            start: today - 7 * day,
            end: today - 3 * day
        }, {
            taskName: 'System 2',
            start: today - 10 * day,
            end: today - 6 * day
        }, {
            taskName: 'System 3',
            start: today - 2 * day,
            end: today - 0 * day
        }]
    }, {
        name: 'State 3',
        data: [{
            taskName: 'System 2',
            start: today - 3 * day,
            end: today - 0 * day
        }, {
            taskName: 'System 3',
            start: today - 10 * day,
            end: today - 7 * day
        }]
    }]
});