How to populate pie chart by calling a function - html

Question

Application used: angular 2
Plattform: Visual Studio Code.
I want to display a pie chart, having its values fixed from the beginning with the number of entries in 4 tables. The tables are given by the table types: firstlevel, secondlevel, critical, secondlevel100.
Now I don't want to just throw in the pieChartData some numbers, instead, I want to call the function populatePiechart() which populates the pie chart.
Sites I visited:
this is one of the links I visited, but it didn't help
the second link I visited, and also didn't help
cockpit.component.ts
// Pie
public pieChartType: string = 'pie';
public pieChartLabels: string[] = ['Anzahl FirstLevel-Tickets', 'Anzahl SecondLevel-Tickets', 'Anzahl SecondLevel-Tickets 100%', 'Anzahl Kritische-Tickets'];
public pieChartData: number[] = [ ]; //How do I call the function here??
private pieChartColors: any[] = [{ backgroundColor: ["rgba(35, 35, 255, 1)", "rgba(0, 0, 155, 1)", "rgb(138,43,226)", "rgba(199, 19, 62, 1)"] }];
populatePiechart(ticketType:string,number: number):number[]{
this.pieChartData[ticketType]=number;
let num:number[] = this.pieChartData;
this.pieChartData=num;
return this.pieChartData;
}
changeFirstLevel(number: number) { //EventListener-anzahl tickets tabelle
// console.log(this.pieChartData[0], number );
this.pieChartData[0] = number;
let num:number[] = this.pieChartData;
this.pieChartData=num;
}
changeSecondLevel(number: number) {
this.pieChartData[1] = number;
let num:number[] = this.pieChartData;
this.pieChartData=num;
}
changeSecondLevel100(number: number){
// this.pieChartData[2] = number;
this.pieChartData[2] = number;
let num:number[] = this.pieChartData;
this.pieChartData=num;
}
changeCritical(number: number) {
this.pieChartData[3] = number;
let num:number[] = this.pieChartData;
this.pieChartData=num;
}
cockpit.component.html:
<div class="row">
<div class="col-md-6 noPaddingRight"> <!-- TABELLEN TICKETS -->
<ticket-table ticketType="critical" (ticketChanger)="changeCritical($event)"></ticket-table> <!-- Wenn sich Anzahl Tickets im System ändert (Tabellen) ändert sich PieChart -->
<ticket-table ticketType="firstlevel" (ticketChanger)="changeFirstLevel($event)"></ticket-table>
</div>
<div class="col-md-6 noPaddingLeft">
<ticket-table ticketType="secondlevel" (ticketChanger)="changeSecondLevel($event)"></ticket-table>
<ticket-table ticketType="secondlevel100" (ticketChanger)="changeSecondLevel100($event)"></ticket-table> <!-- NICHT ÄNDERN, SLA in TABELLE nicht gewünscht -->
<!--populating piechart-->
<ticket-table ticketType="firstlevel" (ticketChanger)="populatePiechart(firstlevel,$event)"></ticket-table>
<ticket-table ticketType="secondlevel" (ticketChanger)="populatePiechart(secondlevel,$event)"></ticket-table>
<ticket-table ticketType="secondlevel100" (ticketChanger)="populatePiechart(secondlevel100,$event)"></ticket-table>
<ticket-table ticketType="critical" (ticketChanger)="populatePiechart(critical,$event)"></ticket-table>
</div>
ticket-table.component.ts:
cockpitList: ICockpit[];
collapsed: boolean = true;
progress: number;
cockpitUpdate: Date;
#Output() ticketChanger: EventEmitter<number> = new EventEmitter<number>(); //
panelColor: string;
#Input() ticketType: string; //
constructor(private _cockpitService: CockpitService,
private _toasterService: ToasterService) { moment.locale('de'); }
ngOnInit() {
this.refreshCockpitList();
setInterval(() => { this.refreshCockpitList(); }, 1000 * 60);
}
refreshCockpitList() {
this._cockpitService.getCockpits(this.ticketType).subscribe(data => { //BACKEND
this.cockpitList = data;
console.log(this.ticketType, this.cockpitList.length);
this.ticketChanger.emit(this.cockpitList.length);
console.log(this.ticketType, this.cockpitList.length);
this.cockpitUpdate = new Date();
});
}
By the way, I am new to angular and I am unsure of where do I get the number(since I am just doing adjustments to the app, I am not the developer) and where to call the function populatePiechart(...)