I came across this sample code at https://stackblitz.com/edit/angular-chartjs-multiple-charts and tried using it. Everything was working well with static data, but when I attempted to push data retrieved from the Firebase Realtime Database into the chart, it failed to render. However, the data is being successfully pushed.
Here is the method used to retrieve the data:
retrieveResults(): void {
this.srService.getAll().snapshotChanges().pipe(
map(changes =>
changes.map(c =>
({ key: c.payload.key, ...c.payload.val() })
)
)
).subscribe(data => {
this.result = data;
/**
* Iterating through each entity
*/
this.result.forEach(e => {
/**
* Push dataset retrieved from database into line chart
*/
/*
this.lineChartData.push(
{
labels: ['0', '10', '20', '30', '40', '50'],
datasets: [{
data: [
this.lineChartStart,
e.resultOne,
e.resultTwo,
e.resultThree,
e.resultFour,
this.lineChartEnd].reverse(),
borderColor: 'yellow',
fill: false
}]
});
});
});