I am currently working on a project that involves showcasing real-time data in a ChartJS graph. The data is retrieved from an external web server, and I have managed to store the data in 6 arrays (which are constantly changing) with each array containing 10 values:
for (const module of parsedListResults) {
this._consoAir[module.id - 1].shift();
this._consoAir[module.id - 1].push(module.consoAir);
}
As a result, every 5 seconds, the data arrays undergo changes:
0: (10) [0, 0, 0, 0, 0, 0, 6.865885, 6.865885, 6.865885, 6.865885]
1: (10) [0, 0, 0, 0, 0, 0, 6.865885, 6.865885, 6.865885, 6.865885]
2: (10) [0, 0, 0, 0, 0, 0, 6.865885, 6.865885, 6.865885, 6.865885]
3: (10) [0, 0, 0, 0, 0, 0, 6.865885, 6.865885, 6.865885, 6.865885]
4: (10) [0, 0, 0, 0, 0, 0, 6.865885, 6.865885, 6.865885, 6.865885]
5: (10) [0, 0, 0, 0, 0, 0, 4.654, 4.654, 4.654, 4.654, _chartjs: {…}, push: ƒ, pop: ƒ, shift: ƒ, splice: ƒ, …]
length: 6
The graph is displayed on a specific page identified by an ID. For example, for page 3, we access it through localhost:4200/lines/3. In order to display the correct data array on the graph for this page, I have implemented the following code snippet:
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
// Other required imports...
@Component({
selector: 'app-conso-graph',
templateUrl: './conso-graph.component.html',
styleUrls: ['./conso-graph.component.scss']
})
export class ConsoGraphComponent implements OnDestroy{
// Class properties...
constructor(private lineService: LineService,
private route: ActivatedRoute) {
this.chartIt();
setInterval(() => {
this.chartIt();
}, 5000);
}
// Other methods...
}
In the HTML file, the graph component is structured as follows:
<div class="doubleTrp">
<canvas baseChart
[chartType]="chartType"
[datasets]="dataType"
[labels]="this._time"
[colors]="[{
backgroundColor: ['rgb(255, 182, 0)'],
hoverBackgroundColor: ['rgb(185, 30, 30)'],
borderWidth: 1
}]"
[options]="{
responsive: true,
cutoutPercentage: 100,
animation: {
duration: 0
},
title : {
display: true,
text: 'Consommation Air',
fontSize: 25
}
}"
[legend]="true"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
The issue arises when navigating to a different page while the graph is being displayed. An error message "ERROR TypeError: Cannot read property '_model' of null" occurs, and I am seeking assistance in resolving this problem. Thank you in advance for any valuable insights or solutions provided.