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.

runTarm · Accepted Answer · 2014-08-09 18:21:53Z

1

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.

answered Aug 9, 2014 at 18:21

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rituraj ratan · Accepted Answer · 2014-08-09 19:33:36Z

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

Instead of new Date(2014, 5, 11).getTime() you can use Date.UTC();

Collectives™ on Stack Overflow

How to show time values in stacked column using High stock

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related