Refresh chart data

Question

I just started using KendoUI for Angular.

What I'm trying to do is refreshing a chart view when I click a button. This is my code:

My html:

<kendo-chart [categoryAxis]="{ categories: categories }" (seriesClick)="onSeriesClick($event)">
    <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
    <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
    <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
    <kendo-chart-series>
        <kendo-chart-series-item *ngFor="let item of series" type="line" style="smooth" [data]="item.data" [name]="item.name">
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

My Component:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  private series: any[] = [{
    name: "India",
    data: [3.907, 7.943, ...]
  },{
    name: "World",
    data: [1.988, 2.733, ...]
  }];
  private categories: number[] = [2002, 2003, ...];


    public onSeriesClick(e): void {
        this.series[0].data[0] = this.series[0].data[0] + 4;
        // TODO update the chart view
    }
}

How can I reference the view to update it? Thanks a lot!

Answer 1

kendo-chart will use two day data binding so if you update any thing in the component class it will automatically reflect in the view. so if you update anything in the series variable it will automatically reflect in the charts.

plnkr will delete india from the chart. http://plnkr.co/edit/LdJOrU7oLOqB8e9RpNsc?p=preview

   onClickMe() {
     this.series = [ {
    name: "Russian Federation",
    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
  }, {
    name: "Germany",
    data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
  },{
    name: "World",
    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
  }];
  }