add Series Example using Lines of y Axis

This example show plotting lines over y axis for given time duration. Use Null to fill time gap

HTML

<script type="text/javascript" src="http://www.highcharts.com/js/highcharts.js"></script>

<div id="container" style="height: 180px"></div>

JavaScript

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

// 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 = [];
function toSeries(tasks) {
    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: seriesIndex,
                label: interval.label,
                from: interval.from,
                to: interval.to
            }, {
                x: interval.to,
                y: seriesIndex,
                from: interval.from,
                to: interval.to
            });
     ...