[Solved] Stacked Bar Chart Update DataSource not drawing

[James]

I have an Angular app that draws multiple charts. I am trying to set the chart options in code using the k-options directive.  Below are my options for the stackedBarCode.

vm.stackedBarChartOptions = {
    //dataSource: new kendo.data.DataSource({
    //    transport: {
    //        type: 'json',
    //        read: function (options) {
    //            var request = new ShipmentManagementRequest(11736);
    //            request.Carriers = vm.shipmentManagementRequest.Carriers;
    //            request.RequestType = "CarMix";
    //                shipmentService.getMixChartData(request)
    //                    .then(function(result) {
    //                        options.success(result.data);
    //                        console.log("Original Read Called");
    //                    }).catch(function(error) {
    //                        options.error(error);
    //                    });
    //        }
        //},
        //group: [
        //    { field: "category" }
        //],
        //sort: {
        //    field: "date",
        //    dir: "asc"
        //},
        //schema: {
        //    model: {
        //        fields: {
        //            date: {
        //                type: "date"
        //            }
        //        }
        //    }
        //}
    //}),
    theme: 'Office365',
    seriesDefaults: {
        stack: {
            type: "100%"
        }
    },
    series: [
        {
            field: 'percent',
            name: '#= group.value #',
        }
    ],
    categoryAxis: {
        field: "date",
        labels: {
            format: "MMM-yy"
        }
    },
    legend: {
        position: "bottom",
        visible: false
    },
    valueAxis: {
        line: {
            visible: false
        },
        labels: {
            rotation: "auto"
        }
    },
    tooltip: {
        visible: true,
        template: "#= series.name #: #= kendo.format('{0:p2}',value) #"
    },
    render: function(e) {
        vm.setChartOptions(e);
    }
}

 Since each chart has a different set of data being used for the graph I cannot set a single datasource in the options.  I am trying to set the datasource in the code as shown below.

                    var chartDataEl = $('#' + myChart.chartData.htmlID).data('kendoChart');
                    if (myChart.chartData.chartOptions === 'stackedBarChartOptions') {
                        chartDataEl.dataSource = new kendo.data.DataSource({
                            transport: {
                                type: 'json',
                                read: function (options) {
                                    var request = new ShipmentManagementRequest(11736);
                                    request.Carriers = vm.shipmentManagementRequest.Carriers;
                                    request.RequestType = options.data.htmlId;
                                    shipmentService.getMixChartData(request)
                                        .then(function (result) {
                                            options.success(result.data);
                                            var chart = options.data.chart;
                                            chart.refresh();
                                            chart.redraw();
                                        }).catch(function (error) {
                                            options.error(error);
                                        });
                                }
                            },
                            group: [
                                { field: "category" }
                            ],
                            sort: {
                                field: "date",
                                dir: "asc"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        date: {
                                            type: "date"
                                        }
                                    }
                                }
                            }
                        });
}else{
/* set data source for other chart types */
}

 This works for other chart types (i.e. pie, standard bar, line), but when I perform the refresh for the stacked bar the horizontal axis loads the date information from the response but no bars are drawn.  See attached.  What is happening that is preventing the data from displaying since it works on the other chart types.

[Iliana Dyankova]

Hello James,

Apologies for the delayed reply.

This is not a known issue and I am not quite sure what causes it. Are there any errors in the browser console? If there are not any, could you please provide an isolated runnable example which I could test locally - this way I would be able to check what exactly is going wrong and provide concrete recommendations? 

Regards,
Iliana Nikolova
Telerik

 

 

[James]

I have created the following dojo which shows what I am seeing happening.  It seems the more I work with the charts to be something with the grouping of the data source.  If you look at the samples, I have 3 different charts 2 where the data is grouped and one where it is not.

1. Stacked bar chart (grouped)
2. Normal bar chart (ungrouped)
3. Normal bar chart (grouped)

I have set up each chart where you can set the dataSource in the options section or comment it out and set it after all the page content is loaded.  All three charts work correctly when loaded in the options section but only the ungrouped chart works when setting the dataSource after content is loaded.

[Iliana Dyankova]

Hi James,

Thank you for the provided dojo. In order to dynamically assign a dataSource to Kendo UI Chart you could use the setDataSource method. For your convenience here is the updated dojo.

Regards,
Iliana Nikolova
Telerik