add updateData and removeAllData methods to donut chart

This commit is contained in:
Jesse Lucas 2020-03-24 13:16:22 -04:00
parent 05f01a5d94
commit 7d59dc6c18

View File

@ -1,5 +1,6 @@
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
import { Chart } from 'chart.js' import { Chart } from 'chart.js'
import { LabelOptions } from '@angular/material/core';
@Component({ @Component({
selector: 'app-donut-chart', selector: 'app-donut-chart',
@ -23,6 +24,16 @@ export class DonutChartComponent {
} }
} }
updateData(data: { label: string, count: number }[]): void {
//Using object destructuring
for (let i = 0; i < data.length; i++) {
let s = data[i];
this.chart.data.labels[i] = s.label;
this.chart.data.datasets[0].data[i] = s.count;
}
this.chart.update();
}
addData(data: number): void { addData(data: number): void {
// this.chart.data.labels.push(label); // this.chart.data.labels.push(label);
this.chart.data.datasets.forEach((dataset) => { this.chart.data.datasets.forEach((dataset) => {
@ -31,6 +42,14 @@ export class DonutChartComponent {
this.chart.update(); this.chart.update();
} }
removeAllData(withAnimation: boolean): void {
this.chart.data.labels.pop();
this.chart.data.datasets.forEach((dataset) => {
dataset.data = [];
});
this.chart.update(withAnimation);
}
ngAfterViewInit(): void { ngAfterViewInit(): void {
this.canvas = document.getElementById(this.elementID); this.canvas = document.getElementById(this.elementID);
this.ctx = this.canvas.getContext('2d'); this.ctx = this.canvas.getContext('2d');