Highchart - ghantt chart - vertical - NICE

by bizamajig

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 600px; width: 300px"></div>

JavaScript

// Define tasks
var tasks = [{
    name: 'Sleep',
    intervals: [{ // From-To pairs
        from: Date.UTC(0, 0, 0, 0),
        to: Date.UTC(0, 0, 0, 6)
    }, {
        from: Date.UTC(0, 0, 0, 22),
        to: Date.UTC(0, 0, 0, 24)
    }]
}, {
    name: 'Family time',
    intervals: [{ // From-To pairs
        from: Date.UTC(0, 0, 0, 6),
        to: Date.UTC(0, 0, 0, 8)
    }, {
        from: Date.UTC(0, 0, 0, 16),
        to: Date.UTC(0, 0, 0, 22)
    }]
}, {
    name: 'Eat',
    intervals: [{ // From-To pairs
        from: Date.UTC(0, 0, 0, 7),
        to: Date.UTC(0, 0, 0, 8),
        label: 'Breakfast'
    }, {
        from: Date.UTC(0, 0, 0, 12),
        to: Date.UTC(0, 0, 0, 12, 30)
    }, {
        from: Date.UTC(0, 0, 0, 16),
        to: Date.UTC(0, 0, 0, 17),
        label: 'Dinner'
    }, {
        from: Date.UTC(0, 0, 0, 20, 30),
        to: Date.UTC(0, 0, 0, 21)
    }]
}, {
    name: 'Work',
    intervals: [{ // From-To pairs
        from: Date.UTC(0, 0, 0, 8),
        to: Date.UTC(0, 0, 0, 16)
    }]
}];

// Define milestones
var milestones = [{
    name: 'Get to bed',
    time: Date.UTC(0, 0, 0, 22),
    task: 1,
    marker: {
        symbol: 'triangle',
        lineWidth: 1,
        lineColor: 'black',
        radius: 8
    }
}];

// re-structure the tasks into line seriesvar series = [];
var series = [];
$.each(tasks, function(i, task) {
    var item = {
        name: task.name,
        data: []
    };
    $.each(task.intervals, function(j, interval) {
        item.data.push(
            { x: interval.from, y: i, label: interval.label },
            [interval.to, i]
        );
        
        // add a null value between intervals
        if (task.intervals[j + 1]) {
            item.data.push(
                [(interval.to + task.intervals[j + 1].from) / 2, null]
            );
        }

    });

    series.push(item);
});

// restructure the milestones
$.each(milestones, function(i, milestone) {
    var item = Highcharts.extend(milestone, {
 ...