Ng2-charts: Refresh chart when binded dataset changes

[Sfairet]

Hello,

364

I think, i have some problem. I just try update chart on run time with change dataset variable.
http://plnkr.co/edit/gyCBnoQLehDgfcLntjuG?p=preview - on click chart dataset changed, but chart not refreshed.

[Hongbo-Miao]

It is because Angular 2 change detection only runs when value or reference changes to guarantee the performance.
datasets is an array. Your way does not trigger that Change Detection.

So you can manually trigger the Change Detection, or give a different reference.

For example, you can use let datasets = this.datasets.slice();.
The working demo:
http://plnkr.co/edit/m3fBiHpKuDgYG6GVdJQD?p=preview

[Sfairet]

@Hongbo-Miao sorry for false issue, i am new in Angular. Thank you for help.
But, on your example, chart refresh with blink. All points renders as new. On clear JS chart show animation for only changed data: https://plnkr.co/edit/QI3DyM6gKyY5kaYLrS9d?p=preview
If you can, please show,how i can get same effect?

[Hongbo-Miao]

@Sfairet it is fine, we were all new before.

For that, I saw DmitryEfimenko talked about that at that bottom in this issue.
Maybe related with https://github.com/chartjs/Chart.js/issues/1997?

[Sfairet]

@Hongbo-Miao yes, i read this.
I dont try delete data, how in 1997. I just try add point or change it.
In this example on pure JS https://plnkr.co/edit/QI3DyM6gKyY5kaYLrS9d?p=preview chart don't redraw fully, it just animate adding data, as expected. On Angular chart redraw with blink. So, i don't think is issue for Chart.js...

[Hongbo-Miao]

@Sfairet I run out of ideas.

Would u mind creating an new issue, because that is a different issue. Thanks

[Sfairet]

@Hongbo-Miao ok, thank you!

[Hongbo-Miao]

You are welcome!

[Meiyananth]

How to update this data of the charts using angular 2? I will write the http service and the data is coming from database and i will subscribe it. i need to to update the lineChartData:Array one by one. First data[0] = 55, data[0] = 65 viceversa. its like moving kind of charts?
my json:
{
"data":[ "55", "65", "42","66","78","80" ]
}
My home.ts will be like this

import { Component} from '@angular/core';
import { NavController } from 'ionic-angular';
import { ParameterServices } from '../../app/services/parameter/parameter.services';
import { Chart } from 'chart.js';
import { ListPage } from '../list/list';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

linechartdata: any;
constructor(public navCtrl: NavController , private parameterServices : ParameterServices) {

}
open(){
    this.navCtrl.setRoot(ListPage);
}
ngOnInit(){
    this.parameterServices.getlinechartdata().subscribe(linechartdata=>{
       // here is the doubt
    });  
}
public lineChartData:Array<any> = [
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'}

];
public lineChartLabels:Array = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public lineChartOptions:any = {
responsive: true
};
public lineChartColors:Array = [
{ // grey
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}
];
public lineChartLegend:boolean = true;
public lineChartType:string = 'line';

// events
public chartClicked(e:any):void {
console.log(e);
}

public chartHovered(e:any):void {
console.log(e);
}
}

My services will be:

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions} from '@angular/http';
import 'rxjs/Rx';

@Injectable()

export class ParameterServices{
http : any;
parameterUrl : String;

constructor(http : Http){
    this.http = http;
    this.parameterUrl = 'https://api.mlab.com/api/1/databases/healthmonitoring/collections/linechartdata?apiKey=a5WyJTnTG8xC26vl95R7aBoc5V0nZV6k';
}

getlinechartdata(){
    return this.http.get(this.parameterUrl)
        .map(res => res.json());
}

}

My home.html