Refresh Kendo Chart when DataSource is Updated using a promise

Question

I am displaying a series of charts in an Angular application. I need to update the data source for each chart and redraw it. My dataSource is updated using an Angular service which returns a promise. I can get the data to update but can not seem to get the graphs to redraw once this is complete. Can you provide some help? Below is the datasource information for my chart.

chartDataEl.dataSource = new kendo.data.DataSource({
    transport: {
        type: 'json',
        read: function(options) {
            var request = vm.shipmentManagementRequest;
            request.RequestType = myChart.chartData.htmlID;
            shipmentService.getBasicChartData(request)
                .then(function(result) {
                    options.success(result.data);
                }).catch(function(error) {
                    options.error(error);
                });
        }
    },
    sort: {
        field: "date",
        dir: "asc"
    },
    schema: {
        model: {
            fields: {
                date: {
                    type: "date"
                }
            }
        }
    }
});

Have you tried this? stackoverflow.com/questions/14029364/… — devlin carnate
I have tried that, and the problem I am having is that refresh is called right after the read but before the promise is returned. I need to refresh after the promise is returned since that is when my data is actually updated. — James

James James · Accepted Answer · 2015-12-28T17:02:24

I was able to pass the chart into the read function using options data and then call refresh after the promise returned.

chartDataEl.dataSource = new kendo.data.DataSource({
    transport: {
        type: 'json',
        read: function(options) {
            shipmentService.getBasicChartData()
                .then(function(result) {
                    options.success(result.data);
                    var chart = options.data.chart;
                    chart.refresh();
                }).catch(function(error) {
                    options.error(error);
                });
        }
    },
    sort: {
        field: "date",
        dir: "asc"
    },
    schema: {
        model: {
            fields: {
                date: {
                    type: "date"
                }
            }
        }
    }
});

Refresh Kendo Chart when DataSource is Updated using a promise

1 Answers