Stacked Bar Chart Update DataSource not drawing

4 posts, 0 answers
  1. James
    James avatar
    38 posts
    Member since:
    Sep 2014

    Posted 31 Dec 2015 Link to this post

    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.

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 04 Jan Link to this post

    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
     
    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
  4. James
    James avatar
    38 posts
    Member since:
    Sep 2014

    Posted 04 Jan in reply to Iliana Nikolova Link to this post

    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.

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 06 Jan Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready