Stacked Grouped Bar Chart

2 posts, 0 answers
  1. James
    James avatar
    37 posts
    Member since:
    Sep 2014

    Posted 29 Dec 2015 Link to this post

    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?

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 04 Jan Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top