CODEWITHSUNDEEP
kendo-uikendo-ui-angular2kendo-chart
Chandra Eskay
Chandra Eskay

Reputation: 2203

How to wire Kendo UI Angular Chart to a datasource?

I have a Kendo UI chart with some series data. When I update the series, the chart data does not change. I see from the documentation that it needs to be wired to a datasource. But the datasource property is not available in Angular tag.

HTML

<kendo-chart
  [series]="chartConfig.series"
  [valueAxis] ="chartConfig.valueAxes"
  [legend]="chartConfig.legend"
  [title]="chartConfig.title"
  [tooltip]="chartConfig.tooltip"
  (seriesClick)="onSeriesClick($event)"
  (drag)="onDrag($event)"
  (dragStart)="dragStart($event)"
  (dragEnd)="dragEnd($event)">
</kendo-chart>

Typescript

public chartConfig = {
title: {
  text: 'Insight'
},
legend: {
  position: 'bottom'
},

series: [], //Some data 
valueAxes: [], //Some data
categoryAxis: {
  categories: [],

  axisCrossingValues: [24, 24, 0],
  justified: true
},
tooltip: {
  visible: true,
  format: '{0}',
  template: '#= category #/03: #= value #'
}
};

When I have an updated value, then I update the series like this. 

this.chartConfig.series[seriesIndex].data[xAxisIndex] = parseInt(updatedValue.Value);

But the Chart doesn't get updated.

Upvotes: 1

Views: 351

Answers (1)

igg
igg

Reputation: 2250

There is no datasource directive, you don't need anything like that. The problem is Angular not picking up changes to this.chartConfig.series.

Angular change detection checks for reference changes, not simply value changes. The simplest solution for this problem is after whatever updates you perform, change the reference of this.chartConfig.series like so:

this.chartConfig.series[seriesIndex].data[xAxisIndex] = parseInt(updatedValue.Value);
this.chartConfig.series = [...this.chartConfig.series];

That final line basically creates a new array with the same elements as the original and changes the reference of this.chartConfig.series to point to the newly created array. This makes it more likely to be picked up by Angular's change detection.

Upvotes: 1

Related Questions