This is a migrated thread and some comments may be shown as answers.

Refresh Chart on DataSource update using promise

1 Answer 204 Views
Charts
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 28 Dec 2015, 03:18 PM
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) {
            //console.log('barchart read called');
            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"
                }
            }
        }
    }
});

1 Answer, 1 is accepted

Sort by
0
James
Top achievements
Rank 1
answered on 29 Dec 2015, 02:11 PM

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"
                }
            }
        }
    }
});

Tags
Charts
Asked by
James
Top achievements
Rank 1
Answers by
James
Top achievements
Rank 1
Share this question
or