Highcharts: creating gantt chart with complex rows

Question

I am creating a gantt diagram using Highcharts for a process that has three-phase request, presentation, and approval. It has two stacks for planned and actual. I used highcharts stacked bars to represent the data constructed this way jsFiddle of Gantt
Instead of data like

           series: [{
            name: 'Requested',
            data: [1,3,4,5,6],
            stack: 'Planned'
        }, {
            name: 'Requested',
            data: [2,4,5,7,8],
            stack: 'Actual'
        }, {
            name: 'Submitted',
            data: [2,3,2,3,4],
            stack: 'Planned'
        }, {
            name: 'Submitted',
            data: [3,5,2,3,4],
            stack: 'Actual'
        }, {
            name: 'Approved',
            data: [6,3,2,3,4],
            stack: 'Planned'
        }, {
            name: 'Approved',
            data: [2,4,2,3,4],
            stack: 'Actual'
        }]

I want the data to be dates here. I have the first, second and third dates for Requested, Submission and Approval, respectively.

 series: [{
            name: 'Part1',
            data: [Date.UTC(2013,01,12),Date.UTC(2013,01,23),Date.UTC(2013,02,05)],
            stack: 'Planned'
        }, {
            name: 'Part1',
            data: [Date.UTC(2013,01,15),Date.UTC(2013,01,29),Date.UTC(2013,02,05)],
            stack: 'Actual'
        },]

I need the series name along the y axis to be taken from serial data

 xAxis: {
               categories: ['Part1', 'Part2', 'Part3', 'Part4', 'Part5']             
            },

and 1. the beginning should be from the data [0], which means that it will contain two bars and three points. 2. I need a date difference in the bar, so I can show the time for each activity.

jsfiddle,

Answer 1

"low" "y" , X-, " Gantt":

, :

var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container',
    type: 'bar'
},

title: {
    text: 'Gantt module development plan'  
},

subtitle: {
    text: 'Using fake data'
},

xAxis: {
    categories: ['Planning', 'Development', 'Testing', 'Documentation']
},

yAxis: {
    type: 'datetime',
    min: Date.UTC(2012, 0, 1)
},

        tooltip: {
            formatter: function() {
                 console.log(this.point);
                var point = this.point;
                return '<b>'+ point.category +'</b><br/>'+
                    Highcharts.dateFormat('%b %e, %Y', point.low) + ' - ' +
                    Highcharts.dateFormat('%b %e, %Y', point.y);
            } 
        },

series: [{
    data: [{
        low: Date.UTC(2011, 11, 20),
        y: Date.UTC(2012, 0, 15)
    }, {
        low: Date.UTC(2012, 0, 10),
        y: Date.UTC(2012, 4, 28)
    }, {
        low: Date.UTC(2012, 3, 15),
        y: Date.UTC(2012, 4, 28)
    }, {
        low: Date.UTC(2012, 4, 15),
        y: Date.UTC(2012, 4, 28)
    }]
}]

});