Having some difficulty setting up a Chart with Angular and Chart.JS.
I'm struggling to pass my Observable data into the Chart, no matter what I try.
error TS2339: Property 'cool_data' does not exist on type 'Observable<Object>'.I suspect that the Observable takes some time to populate with data (roughly 50k data sets), leading to the error because it's empty when the Chart is created. Any suggestions on how to successfully pass my Observable data into the Chart or other solutions?
Here is the Service function I'm currently using:
...
getData(id: number): Observable<Data[]> {
return this.http.get<Data[]>(this.dataUrl + id);
console.log(this.http.get<Data[]>(this.dataUrl));
}
}
And my Component looks like this. I've tried using data: this.data.cool_data but encountered the error mentioned above.
...
data: Data[];
getData(): void{
const id = +this.route.snapshot.paramMap.get('id');
this.coolService.getData(id)
.subscribe(data => this.data = data);
}
goBack(): void{
this.location.back();
}
ngOnInit(): void {
this.getData();
}
lineChartData: ChartDataSets[] = [
{ data: this.data.cool_data, label: 'Crude oil prices' },
];
lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];
lineChartOptions = {
responsive: true,
};
lineChartColors: Color[] = [
{
borderColor: 'black',
backgroundColor: 'rgba(255,255,0,0.28)',
},
];
lineChartLegend = true;
lineChartPlugins = [];
lineChartType = 'line';
}
The HTML template for the component:
<div *ngIf="data">
<div style="display: block;">
<canvas baseChart width="400" height="400"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
[plugins]="lineChartPlugins">
</canvas>
</div>