Kendo + Angular chart data

Question

I'm trying out Kendo charts with angular, and I have problem displaying data, here is my code:

HTML:

<div  kendo-chart="rchart" data-k-options="chartOptions" data-role="chart" class="k-chart" style="position: relative;"></div>

Javascript:

resultService.getResult().then(function (resultResponse) {
         $scope.data = resultResponse.data;
         $scope.oldReps = _.pluck($scope.data.TreningScores.Item1, 'Item2');
         $scope.newReps = _.pluck($scope.data.TreningScores.Item2, 'Item2');
         $scope.categories = _.pluck($scope.data.TreningScores.Item1, 'Item1');
     });


$scope.chartOptions = {

         legend: {
             position: "bottom"
         },
         seriesDefaults: {
             type: "column"
         },
         series: [{
             name: "Total Visits",
             data: $scope.oldReps
         }, {
             name: "Unique visitors",
             data: $scope.newReps
         }],
         valueAxis: {
             line: {
                 visible: false
             }
         },

         tooltip: {
             visible: true,
             format: "{0}"
         }
     };

The problem is chart isn't updated after data is fetched from server, I've tried refreshing chart like this (but with no luck):

$scope.chart = {        
        refreshChart : function() {
            $scope.rchart.refresh();
        },
    };

And calling this method in:

resultService.getResult().then(function (resultResponse) {});

And I've also tried to define $scope.chartOptions inside same function, but nothing. Is there any way to fix this ?

Answer 1

It's not well documented, but to get a UI control with remote data-binding to update after data has been returned from a server requires both watching the collection for updates from the Angular side and rebinding the data object to its respective UI control from the Kendo side.

In your controller, watch for changes to your data objects using $watchCollection, and update the objects/properties which are bound to those collections:

// API call
$http.get('...').success(function(data){
   $scope.data = data;
});

// KendoUI config object
$scope.chart = {
    dataSource: {
        data: $scope.data
    }
};

// Watch for changes to $scope.data
$scope.$watchCollection('data', function(newData) {

    // Update data bindings with changes
    $scope.chart.dataSource.data = newData;
});

In your view, define the object your UI control should be bound to when changes are made via the k-rebind Angular-Kendo directive:

<div kendo-chart k-options="chart" k-rebind="chart"></div>

Here is an example of a chart bound to remote data:

http://codepen.io/micjamking/pen/4980a5e22cbd4de01264fadae5f25f06