Stacked Grouped Bar Chart

[James]

I am trying to create a Kendo stacked Bar chart. I am receiving the following data from the server. I then group it by carrier. I want to display a stacked bar chart for each month of data with all carriers stacked in a single bar. Below I have included sample data I am receiving from the server using an Angular service along with my chart options for the Kendo directive.

 

{
carrier: "xxx"
count: 24674
date: Sat Nov 01 2014 00:00:00 GMT-0500 (Central Daylight Time)
percent: 0.797711034237496
total: 30931
},
{
carrier: "yyyy"
count: 5608
date: Sat Nov 01 2014 00:00:00 GMT-0500 (Central Daylight Time)
percent: 0.18130677960622
total: 30931
}
{
carrier: "xxx"
count: 28025
date: Mon Dec 01 2014 00:00:00 GMT-0600 (Central Standard Time)
percent: 0.847983297527913
total: 33049
},
{
carrier: "yyyy"
count: 4475
date: Mon Dec 01 2014 00:00:00 GMT-0600 (Central Standard Time)
percent: 0.135405004690006
total: 33049
}

Below are my chart options. I am wanting to display the data in the count column which does not seem to be working.

vm.stackedBarChartOptions = {
dataSource: new kendo.data.DataSource({
    transport: {
        type: 'json',
        read: function (options) {
            shipmentService.getMixChartData()
                .then(function (result) {
                    options.success(result.data);
                    var chart = options.data.chart;
                    chart.refresh();
                }).catch(function (error) {
                    options.error(error);
                });
        }
    },
    group: [
        { field: "carrier" }
    ],
    sort: {
        field: "date",
        dir: "asc"
    },
    schema: {
        model: {
            fields: {
                date: {
                    type: "date"
                }
            }
        }
    }
}),
    theme: 'Office365',
    seriesDefaults: {
        type: 'column'
    },
    series: [
        {
            type: "column",
            field: "count",
            name: "#= group.value #",
            stack: {
                group: "carrier"
            }
        }
    ],
    categoryAxis: {
        field: "date",
        labels: {
            format: "MMM-yy"
        }
    },
    valueAxis: {
        line: {
            visible: false
        },
        labels: {
            rotation: "auto"
        }
    },
    tooltip: {
        visible: true,
        template: "#= series.name #: #= value #"
    },
    render: function(e) {
        //vm.setChartOptions(e);
    }
}

 

When I try to display my data there is nothing in the chart. What am I missing?

[Iliana Dyankova]

Hi James,

I believe the issue is caused by invalid JSON (most probably there are some errors in the browser console). Modifying the JSON seems fixing the issue (dojo).

Regards,
Iliana Nikolova
Telerik