kendo bar chart read never contatct server (cache disabled)

Question

When some external event is triggered I need to refresh chart datasource manually calling:

$(".k-chart").data("kendoChart").dataSource.read();

Everytime I call read, datasource requestEnd is called, but, obiviously no response is available on event handler object.

I can't see any error but the webservice specified in datasource.transport.read.url is never reached after the first request.

Chart load data by server only the first time, here is the configuration:

             $scope.chartopts = {
                charArea: {
                    height: 500,
                },
                title: {
                    position: "bottom",
                    text: "A / B"
                },
                legend: {
                    position: "top",
                    visible: true
                },
                chartArea: {
                    background: "transparent"
                },
                seriesDefaults: {
                    labels: {
                        visible: true,
                        background: "transparent",
                        template: "#= category #: (#= value #)",
                        align: "alignColumn"
                    }
                },
                series: [{
                    startAngle: 180,
                    categoryField: 'category',
                    field: 'value',
                    padding: 0
                }],
                dataSource: {
                    transport: {
                        read: {
                            url: wsurl,
                            type: 'POST',
                            data: {id: id},
                            dataType: 'json',
                            cache: false,
                        }
                    }, 
                    requestEnd: function(e){

                        if(e.type == 'read' && e.response){//works only the first time
                            var rsp = [];
                            var a = e.response.a;
                            var b = e.response.b;
                            var tot = a + b;
                            if(tot!=0){
                                var pa = parseFloat(100 * a / tot).toFixed(2);
                                var pb = parseFloat(100 * b / tot).toFixed(2);
                            }
                            else {
                                pa = 0;
                                pb = 0;
                            }
                            rsp = [{
                                category: "A",
                                value: a,
                                color: "#66FF99",
                            },{
                                category: "B",
                                value: b,
                                color: "#FF9900",
                            }];

                            this.data(rsp);
                        }
                    }
                },
                tooltip: {
                    visible: true,
                },
                valueAxis: {
                    majorGridLines: {
                        visible: false
                    },
                    visible: false
                },
                categoryAxis: {
                    majorGridLines: {
                        visible: false
                    },
                    line: {
                        visible: false
                    }
                }
            };

Here is the tag:

<div kendo-chart k-options='chartopts' ></div>

I also tried to call refresh method on chart. Widget on screen is refreshed but datasource remain unchanged.

score 0 · Accepted Answer · answered Jul 08 '15 at 16:02

Solved defining schema property in datasource configuration object and adapting/moving all the logic from requestEnd to schema.parse method.

        dataSource: {
                transport: {
                    read: {
                        url: wsurl,
                        type: 'POST',
                        data: {id: id},
                        dataType: 'json',
                        cache: false,
                    }
                }, 
                schema: {
                    data: 'results',
                    total: 'total',
                    parse: function(data){
                        var rsp = [];
                        var a = data.a;
                        var b = data.b;
                        var tot = a + b;
                        if(tot!=0){
                            var pa = parseFloat(100 * a / tot).toFixed(2);
                            var pb = parseFloat(100 * b / tot).toFixed(2);
                        }
                        else {
                            pa = 0;
                            pb = 0;
                        }
                        rsp = {results: [{
                            category: "A",
                            value: a,
                            color: "#66FF99",
                        },{
                            category: "B",
                            value: b,
                            color: "#FF9900",
                        }], total: 2};

                       return rsp;

                    }
                }
            }

Everytime I need to run datasource.read(), I also refresh chart:

var chart = $(".k-chart").data("kendoChart");
chart.dataSource.read();
chart.refresh();

kendo bar chart read never contatct server (cache disabled)

1 Answers1