Highcharts: Creating gantt chart having stacked rows

Viewed 4450

I am creating a gantt chart using Highcharts for a process that has three phase Request, Submission and Approval. It has two stacks for Planned and Actual. I used the highcharts stacked bars to represent the data plotted like this jsFiddle of Gantt
Instead of data as

           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 as dates here I have the first,second and third dates respectively for Requested,Submission and Approval.

 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 on y-axis to be taken from the data in series

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

and 1. the start should be from the data[0] instead hence it will contain two bars and three points. 2. I need difference of dates in the bar so hence I can show the time for each activity.

I tried a with time in millisecondsjsfiddle but couldn't come to anything substantial

1 Answers
Related