highcharts tooltip not working properly for hacked gantt chart

Question

The tooltips for my hacked gantt chart using highcharts doesnt seem to be working properly. I used the gantt chart provided by the highcharts team from here-:

http://jsfiddle.net/highcharts/r6emu/

I am using UnixTime and that seems to be somehow throwing off the tooltips. Here-:

http://jsfiddle.net/bootkick/NFS5M/

// Define tasks
var tasks = [{
"name": "a",
    "intervals": [{
    "from": 1366005607000,
        "to": 1366006490000
}]
}, {
"name": "b",
    "intervals": [{
    "from": 1366059607000,
        "to": 1366061858000
}, {
    "from": 1366056006000,
        "to": 1366058223000
}, {
    "from": 1366047007000,
        "to": 1366049299000
}, {
    "from": 1366034407000,
        "to": 1366036682000
}, {
    "from": 1366030808000,
        "to": 1366033050000
}, {
    "from": 1366027208000,
        "to": 1366029512000
}, {
    "from": 1366018209000,
        "to": 1366021296000
}]
}, {
"name": "c",
    "intervals": [{
    "from": 1366018209000,
        "to": 1366019966000
}]
}, {
"name": "d",
    "intervals": [{
    "from": 1366005607000,
        "to": 1366047612000
}, {
    "from": 1366002007000,
        "to": 1366002202000
}]
}];


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


// create the chart
var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container'
},

title: {
    text: 'Daily activities'
},

xAxis: {
    type: 'datetime'
},

yAxis: {
    tickInterval: 1,
    labels: {
        formatter: function () {
            if (tasks[this.value]) {
                return tasks[this.value].name;
            }
        }
    },
    startOnTick: false,
    endOnTick: false,
    title: {
        text: 'Activity'
    },
    minPadding: 0.2,
    maxPadding: 0.2
},

legend: {
    enabled: false
},

tooltip: {
    formatter: function () {
        return '<b>' + tasks[this.y].name + '</b><br/>' + Highcharts.dateFormat('%H:%M', this.point.options.from) +
            ' - ' + Highcharts.dateFormat('%H:%M', this.point.options.to);
    }
},

plotOptions: {
    line: {
        lineWidth: 9,
        marker: {
            enabled: false
        },
        dataLabels: {
            enabled: true,
            align: 'left',
            formatter: function () {
                return this.point.options && this.point.options.label;
            }
        }
    }
},

series: series

});

I am relatively new to Javascript and Highcharts so pardon the obvious if any.

Answer 1

I figured it out. The problem was that the from,to timestamp pairs within a name/category are not in the ascending order. For the tooltip to work correctly, they need to be in the ascending order which is kinda weird.