Stav Alfi Stav Alfi - 1 month ago 29
Javascript Question

Is there a way to use rxjs with ng2-charts?

I cant find a way to implement a live charts with ng2-charts.

I get an error when I do :

<div *ngIf="(lineChartData$ | async)!=null">
....
<canvas baseChart width="100" height="200"
[datasets]="lineChartData$ | async" <<-ERROR: "Cannot read property 'data' of undefined"
....
</canvas>
</div>


I think that even if I would make it work some how, it would be the worst way to do it.




Please recommend on any other liberies that has a build-in live charts if there is no solution to this error.




EDIT:

app.component.html:

<div *ngIf="(lineChartData$ | async)!=null">
<div class="row">
<div class="col-md-6">
<div style="display: block;">
<canvas baseChart width="100" height="200"
[datasets]="lineChartData$ | async" <<<-- ERROR
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
<div class="col-md-6" style="margin-bottom: 10px">
<table class="table table-responsive table-condensed">
<tr>
<th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j=index"></td>
</tr>
</table>
</div>
</div>
</div>


app.component.ts:

import {Component, OnInit} from '@angular/core';
import {Observable} from "rxjs";
import {Store} from "@ngrx/store";
import {AppState} from "../../redux/design/app-state";
import {AngularFire, AuthProviders, FirebaseObjectObservable} from "angularfire2";
import 'rxjs/add/operator/withLatestFrom';
import {AuthActions} from "../../redux/actions/auth.actions";
import {UserService} from "../../services/user.service";

@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit
{
private lineChartData$:Observable<Array<any>>;
constructor(private authActions: AuthActions,
private af: AngularFire,
private userService:UserService,
private store:Store<AppState>){}
public ngOnInit(): void {
this.lineChartData$=Observable.interval(500)
.map(index=>[{data: [65, 59, index, 81, 56, 55, 40], label: 'Series A'},
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
{data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
]);
}
// lineChart
public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public lineChartOptions:any = {
animation: false,
responsive: true,
maintainAspectRatio: false
};
public lineChartColors:Array<any> = [
{ // 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)'
},
{ // dark grey
backgroundColor: 'rgba(77,83,96,0.2)',
borderColor: 'rgba(77,83,96,1)',
pointBackgroundColor: 'rgba(77,83,96,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(77,83,96,1)'
},
{ // 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);
}
}

Answer

I don't know much about ng2-charts but the error suggests the problem is somewhere else.

The doc on ngOnInit says:

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.

So this lifecycle event is called after the view is initialized. Your lineChartData$ is defined as:

private lineChartData$:Observable<Array<any>>;

... and it's not initialized until ngOnInit() call. So the view tries to bind lineChartData$ which is still undefined at that time. Thus the error message thrown probably from ng2-charts internals.