How to populate pie chart by calling a function

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(...)