Using Trellis Chart with Stacked Columns in Highcharts

Question

I have a time series data which I want to show as a trellis chart:

Here is a basic version of Trellis Chart from the Highcharts website:

Instead of Erik, Gert, Helge, Torstein, I am working to replace it with groups: Client, DII, FII, PRO.

In this chart below, fruits name is a simple series but here I have a time series data: Fut Index Longs and Fut Index Shorts . Each of the above groupings( Client, DII...) have their own version of Fut Index Longs and Fut Index Shorts.

I want to show Fut Index Longs, Fut Index Shorts as stacked with the x-axis denoting the different days.

I have tried to use a nested series to accomplish this, but there is no data being displayed. Here is my source:

var charts = [],
    $containers = $('#trellis td'),

datasets = [
    {
        name: 'Client',
        data: 
            [
                {
                    name: "Fut Index Longs",
                    data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
                },
                {
                    name: "Fut Index Shorts",
                    data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
                }
            ]
    },
    {
        name: 'DII',
        data: 
            [
                {
                    name: "Fut Index Longs",
                    data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
                },
                {
                    name: "Fut Index Shorts",
                    data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
                }
            ]
    },
    {
        name: 'FII',
        data: 
            [
                {
                    name: "Fut Index Longs",
                    data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
                },
                {
                    name: "Fut Index Shorts",
                    data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
                }
            ]
    },
    {
        name: 'PRO',
        data: 
            [
                {
                    name: "Fut Index Longs",
                    data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
                },
                {
                    name: "Fut Index Shorts",
                    data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
                }
            ]
    }
];


$.each(datasets, function(i, dataset) {
    charts.push(new Highcharts.Chart({

        chart: {
            renderTo: $containers[i],
            type: 'bar',
            marginLeft: i === 0 ? 100 : 10
        },

        title: {
            text: dataset.name,
            align: 'left',
            x: i === 0 ? 90 : 0
        },

        credits: {
            enabled: false
        },

        xAxis: {
                    type: 'datetime'
            },

        yAxis: {
            allowDecimals: false,
            title: {
                text: null
            },
            min: 0,
            max: 10
        },

        plotOptions: {
        column: {
            stacking: 'normal'
            }
            },

        legend: {
            enabled: false
        },

        series: [dataset]

    }));
});

The link to jsfiddle: http://jsfiddle.net/g6jLhux2/

What am I doing wrong?

Answer 1

In your case, you need to use

series: dataset.data

Also, your x-axis are not datetime but categories, because datetime are supposed to be passed as numbers (milliseconds). You must then use:

xAxis: {
  type: 'category'
},

if you want to properly show the data in your charts. See updated jsfiddle

Does it help you ?