How to show time values in stacked column using High stock

Question

I am trying to created stacked columns in Highstock. in following js fiddle. The code is

    //http://jsfiddle.net/nishants/y0t130f3/2/

    $(function () {
        $('#container').highcharts('StockChart',{
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: [new Date(2014, 5, 30).getTime()/1000,new Date(2014, 5, 29).getTime()/1000,new Date(2014, 5, 28).getTime()/1000,new Date(2014, 5, 27).getTime()/1000,new Date(2014, 5, 26).getTime()/1000,new Date(2014, 5, 25).getTime()/1000,new Date(2014, 5, 24).getTime()/1000,new Date(2014, 5, 23).getTime()/1000,new Date(2014, 5, 22).getTime()/1000,new Date(2014, 5, 21).getTime()/1000,new Date(2014, 5, 20).getTime()/1000,new Date(2014, 5, 19).getTime()/1000,new Date(2014, 5, 18).getTime()/1000,new Date(2014, 5, 17).getTime()/1000,new Date(2014, 5, 16).getTime()/1000,new Date(2014, 5, 15).getTime()/1000,new Date(2014, 5, 14).getTime()/1000,new Date(2014, 5, 13).getTime()/1000,new Date(2014, 5, 12).getTime()/1000,new Date(2014, 5, 11).getTime()/1000 ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -70,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function () {
                    return '' + this.x + '
' +
                        this.series.name + ': ' + this.y + '
' +
                        'Total: ' + this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        }
                    }
                }
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,]
            }]
        });
    });

The code on x axis should be dates from 11/05/2014 to 30/05/2014 . I tried all new Date unix time stamp and unix time stamp /1000. but nothing works. What I want to achieve is very straight forward => How to put the dates on x axis of highstock.

Answer 1

When we make Highstock graph by series then we can't pass x-axis seprated data as per like Highchart like in your code

 xAxis: {
                categories: [new Date(2014, 5, 30).getTime()/1000,new Date(2014, 5, 29).getTime()/1000,new Date(2014, 5, 28).getTime()/1000,new Date(2014, 5, 27).getTime()/1000,new Date(2014, 5, 26).getTime()/1000,new Date(2014, 5, 25).getTime()/1000,new Date(2014, 5, 24).getTime()/1000,new Date(2014, 5, 23).getTime()/1000,new Date(2014, 5, 22).getTime()/1000,new Date(2014, 5, 21).getTime()/1000,new Date(2014, 5, 20).getTime()/1000,new Date(2014, 5, 19).getTime()/1000,new Date(2014, 5, 18).getTime()/1000,new Date(2014, 5, 17).getTime()/1000,new Date(2014, 5, 16).getTime()/1000,new Date(2014, 5, 15).getTime()/1000,new Date(2014, 5, 14).getTime()/1000,new Date(2014, 5, 13).getTime()/1000,new Date(2014, 5, 12).getTime()/1000,new Date(2014, 5, 11).getTime()/1000 ]
            },

its not work in HighStock

for this you need to pass these each separate value on each series like below

{
    name: 'John',
    data: [
        [new Date(2014, 5, 11).getTime(), 5],
        [new Date(2014, 5, 12).getTime(), 3],
        ...
    ]
},name: 'Jane',

          data: [
        [new Date(2014, 5, 11).getTime(), 2],
        [new Date(2014, 5, 12).getTime(), 3],
        ...
    ])
        }, {
            name: 'Joe',
             data: [
        [new Date(2014, 5, 11).getTime(), 5],
        [new Date(2014, 5, 12).getTime(), 4],
        ...
    ]}

and as per @ranTarm dates must be in ascending order and dataGrouping as mention in his comment

Answer 2

Unlike HighCharts, I don't think HighStock support the xAxis.categories config.

However, you could specify the dates directly in serie.data like this:

{
    name: 'John',
    data: [
        [new Date(2014, 5, 11).getTime(), 5],
        [new Date(2014, 5, 12).getTime(), 3],
        [new Date(2014, 5, 13).getTime(), 4],
        ...
    ]
}

And the dates must be in ascending order, otherwise the chart will be broken.

Another thing is you might want to set this to make columns align with date labels correctly.

plotOptions: {
    column: {

        ...

        dataGrouping: {
            enabled: true,
            forced: true,
            units: [
                ['day', [1]]
            ]
        }
    }
},

Example JSFiddle: http://jsfiddle.net/1xLny72q/2/

Hope this helps.