CODEWITHSUNDEEP
angularjschartskendo-uilocal
RedApple
RedApple

Reputation: 201

AngularJS + KendoUI Chart local binding

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

Upvotes: 3

Views: 3211

Answers (1)

Lars H&#246;ppner
Lars H&#246;ppner

Reputation: 18402

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

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

Upvotes: 2

Related Questions