Kendo + Angular chart data

Question

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

HTML:

Answer 1

The use of $watchCollection to track and assign the dataSource.data in the accepted answer and others is a needlessly convoluted approach.

Here's a straightforward implementation:

view:

controller:

$scope.chart = {
  dataSource: new kendo.data.DataSource({
    data: [{ title: "Loading", value: 100, color: '#EFEFEF' }]
  }),
  series: [{ field: 'value', categoryField: 'title', padding: 0, holeSize: 25 }],
  seriesDefaults: { type: 'donut', startAngle: 90 }
};

Using the dataSource.data() method instead of assigning dataSource.data as an array is the key here:

payrollService.load(userId).then(function (result) {
  $scope.chart.dataSource.data(result.items); //where result.items is an array like so:
  //[
  //  { title: "Net Pay", value: 60, color: '#6BAE4B' },
  //  { title: "Taxes", value: 15, color: '#ED6347' },
  //  { title: "Deductions", value: 25, color: '#8161C2' }
  //]
});

Codepen Demo: http://codepen.io/TaeKwonJoe/pen/WGOpEv