Highcharts - Stacked column data series

1
votes

Im working with stacked column using Highcharts.

The data series im constructing is similar to this 

series: [{
            name: 'Apples',
            data: [['2014-01-01',5], ['2014-01-02',3], ['2014-01-04',2], ['2014-01-05',7], ['2014-01-06',8]]
        }, {
            name: 'Oranges',
            data: [['2014-01-01',3], ['2014-01-02',7], ['2014-01-04',9], ['2014-01-05',11], ['2014-01-06',19]]
        }, {
            name: 'Grapes',
            data: [['2014-01-01',15], ['2014-01-02',23], ['2014-01-03',12], ['2014-01-05',17], ['2014-01-06',18]]
        }]

http://jsfiddle.net/emgq47px/

If you take a closer look at the data, im missing 2014-01-04 data for Apples but instead the data is stacked on 2014-01-03.

One way of solving this would be to prepopulate categories and follow the same order for inserting my y values but that wont be a good way to solve as i may deal with large data sets down the line.

Any tips to head in the right direction is greatly appreciated.

UPDATE:

I'm populating my x and y co-ordinates with values from database. Database gives me date in (YYYY-mm-dd) format. So i'm converting that string to epoch time using strtotime function in PHP strtotime($res[0])

But then when I populate draw the highchart, i see wrong dates. I checked with online available epoch converters and it looks like conversion is right but i still cant figure out whats wrong here. Even the x axis ticks seems to be slightly off.

Many thanks for your suggestions.

http://jsfiddle.net/emgq47px/3/

RESOLVED:

I had to multiply epoch time with 1000. This works.

Original answer: HighCharts - timeseries chart - irregular datetime interval on xAxis

2
javascriptphpjqueryhighcharts
@ankurbhadania that will lead to manual changes and is not good when data is dynamic – Raunak Kathuria

2 Answers

1
votes

Probably the best way is to use a datetime axis. This allows highcharts to know the data contains dates, and it can sort out the axis properly.

    xAxis: {
        lineWidth: 2,
        type: 'datetime'
    },

Once you do this, you need to supply valid date times in your data like this:

 data: [[Date.UTC(2014,  0, 1),5],
        [Date.UTC(2014,  0, 2),3],
        [Date.UTC(2014,  0, 4),2],
        [Date.UTC(2014,  0, 5),7],
        [Date.UTC(2014,  0, 6),8]]

Note, months go from 0 to 11, not 1 to 12, so zero is January.

http://jsfiddle.net/0ofLx86d/

1
votes

The problem is that you are marking x-axis type is category

xAxis: {
     lineWidth: 2,
     type: 'category'
},

So when you assign data data: [['2014-01-01',5], ['2014-01-02',3], like this to it then the first value is considered as category so when you assign ['2014-01-03',12] as last then it replaces previous one ['2014-01-04',12]. You can test it by keeping first two as 03 and last one as 04, then it will take 04 and not show 03.

Solution

Replace

type: 'category' to 'datetime'

and date to epoch time

data: [[1388534400000,5], [1388620800000,3], [1388793600000,2], [1388880000000,7]]

You can use custom function for label if you want to display date on x-axis in different format or use Date.UTC

Demo