This is a migrated thread and some comments may be shown as answers.

Stacked Grouped Bar Chart

1 Answer 174 Views
Charts
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 29 Dec 2015, 02:10 PM

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?

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 04 Jan 2016, 09:15 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
James
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or