HighCharts

Ploting task Completion

by abhisheksimion

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 580px"></div>

JavaScript

// Define tasks
var tasks = [{
    name: 't1',
    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: 't2',
    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: 't3',
    intervals: [{ // From-To pairs
        from: Date.UTC(0, 0, 0, 7),
        to: Date.UTC(0, 0, 0, 8)
    }, {
        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)
    }, {
        from: Date.UTC(0, 0, 0, 20, 30),
        to: Date.UTC(0, 0, 0, 21)
    }]
}, {
    name: 't4',
    intervals: [{ // From-To pairs
        from: Date.UTC(0, 0, 0, 8),
        to: Date.UTC(0, 0, 0, 16)
    }]
}];

// re-structure the tasks into line seriesvar series = [];
var series = [];
$.each(tasks.reverse(), 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,
            from: interval.from,
            to: interval.to
        }, {
            x: interval.to,
            y: i,
            from: interval.from,
            to: interval.to
        });

        // 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);
});

console.log(JSON.stringify(series));
console.log(JSON.stringify(tasks));
// create the chart
var chart = new Highcharts.StockChart({

    chart: {
        renderTo: 'container'
    },

    title: {
        text: 'Tasks'
    },

    xAxis: {
        type:...