Refresh Chart on DataSource update using promise

2 posts, 0 answers
  1. James
    James avatar
    37 posts
    Member since:
    Sep 2014

    Posted 28 Dec 2015 Link to this post

    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"
                    }
                }
            }
        }
    });
  2. James
    James avatar
    37 posts
    Member since:
    Sep 2014

    Posted 29 Dec 2015 Link to this post

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

  3. Kendo UI is VS 2017 Ready
Back to Top