Topic: How to re-bind Charts components to re-render on setInterval?
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, NgZone, OnInit } from '@angular/core';
@Component({
selector: 'px-charts-line-chart',
templateUrl: './line-chart.component.html',
styleUrls: ['./line-chart.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class LineChartComponent implements OnInit {
public chartType: string = 'line';
public chartDatasets: Array<any> = [
{data: [], label: 'NETWORK DEVICE'},
{data: [], label: 'DB SYSTEM'},
{data: [], label: 'APP SERVICE'},
{data: [], label: 'OS'},
];
constructor(private ref: ChangeDetectorRef, private zone: NgZone) {
this.initiateChart();
setInterval(() => {
this.update();
}, 5000);
}
public update() {
try {
this.zone.run(() => {
this.initiateChart();
console.log(Date.now());
});
}
catch (error) {
// blah
}
}
public chartLabels: Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
public chartColors: Array<any> = [
{
backgroundColor: 'rgba(3, 169, 244, 0.2)',
borderColor: 'rgba(220,220,220,1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(220,220,220,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(220,220,220,1)'
},
{
backgroundColor: 'rgba(151,187,205,0.2)',
borderColor: 'rgba(151,187,205,1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(151,187,205,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)'
},
{
backgroundColor: 'rgba(151,187,205,0.2)',
borderColor: 'rgba(151,187,205,1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(151,187,205,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)'
},
{
backgroundColor: 'rgba(0, 188, 212, 0.7)',
borderColor: 'rgba(151,187,205,1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(151,187,205,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)'
}
];
public chartOptions: any = {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: 500,
min: 0
}
}]
}
};
public chartClicked(e: any): void {
}
public chartHovered(e: any): void {
}
ngOnInit() {
}
private initiateChart() {
for (let j = 0, i = 0; j < 4; j++) {
while (i <= 12) {
this.chartDatasets[j].data[i] = Math.round((Math.random() * (500 - 0)) + 0);
i++;
}
i = 0;
}
}
}
Add comment
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No