Highcharts Stacked Area Data

Question

This is the source code http://jsfiddle.net/m5cvH/

Im not really sure why but I cannot get the x axis to display the correct timestamp information, the timestamp data is in unix timestamp format.. And I also cant figure out how to get these two graphs to stack properly.

Also I would like to Datagroup this data using the datagrouping method provided by the Highcharts library.

    var chart;
    chart = new Highcharts.Chart({
        chart: {
            renderTo: container,
            type: 'area',
            marginRight: 130,
            marginBottom: 85
        },
        title: {
            text: 'Patron Count Spring 2012',
            x: -20 //center
        },


 xAxis: {

         categories:  time,
                     labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                            }
                    }
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            marker: {
                enabled: false
            }
        },

    },
    yAxis: {
        title: {
            text: 'Count'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -10,
        y: 100,
        borderWidth: 0
    },
    series: date
});

jlbriggs jlbriggs · Accepted Answer · 2013-06-17T18:39:39

The times do not display correctly because javascript uses milliseconds - you need to multiply your time stamps * 1000.
in order to use data grouping, you need to use Highstock.

{{Edit:

in looking through your fiddle example, there are a variety of things happening that are not going to work right.

1) you can't combine categorical and datetime axes - it's one or the other. If you want your data to show on a datetime axis, you need to do the following:

make your timestamps milliseconds instead of seconds (as noted above)
you need to create your data array so that the x values are the time stamps, as opposed to having a separate array of timestamps. ie:

this:

"data": [3, 9, null]"

becoms:

"data": [[1370799000000,3], [1370802600000,9], [1370806200000,null]]"

Highcharts Stacked Area Data

1 Answers