AngularJS + KendoUI Chart local binding

Question

How do I implement the KendoUI with AngularJS chart with local data binding?

My local data:

var blogComments = [ {
  "blog": "My blog",
  "day": "1",
  "value": 3,
  "userColor": "#ffd600"
}, {
  "blog": "My blog",
  "day": "2",
  "value": 7,
  "userColor": "#ffd600"
}, {
  "blog": "My blog",
  "day": "11",
  "value": 14,
  "userColor": "#ffd600"
}, {
  "blog": "My blog",
  "day": "12",
  "value": 15,
  "userColor": "#ffd600"
}, {
  "blog": "My blog",
  "day": "30",
  "value": 6,
  "userColor": "#ffd600"
} ];

I want to use that as my data source:

$scope.theBlog = new kendo.data.DataSource({
  dataSource: {
    data: blogComments
  }
});

Here is my HTML:

<div kendo-chart
  k-legend="{ position: 'bottom' }"
  k-series-defaults="{ type: 'bar',  labels: {
    visible: true,
    background: 'transparent' } }"
  k-data-source="theBlog"
  k-series-hover="onSeriesHover"
  k-series="[{name:'Value', field:'value'}]">
</div>

It seems like it is not picking up the k-series from the data source. The chart is empty and it shows no data at all. All the samples on the KendoUI that has to do with AngularJS has JSON remote data. Please help. What am I missing?

Code on dojo: http://dojo.telerik.com/IziY/12

Answer 1

You're not creating the DS right - you have a level of nesting too many:

$scope.theBlog = new kendo.data.DataSource({
    data: blogComments
});