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