When making a rest call to fetch data, I aim to populate the pieChartData with the obtained information. However, I am facing difficulties in achieving this task. Can someone guide me on how to accomplish this?
import { Component, OnInit} from '@angular/core';
import config from '../../config.json';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-analytics',
templateUrl: './analytics.component.html',
styleUrls: ['./analytics.component.css']
})
export class AnalyticsComponent {
public clickData;
public dataExtracted=[];
//public pieChartData=[0,0,0,0,0,0,0,0,0,0];
private readonly CLICK_DATA_GET = config["SettingsInfo"]['clickDataFetchEndpoint'];
public pieChartLabels:string[] = ['SC', 'CONF', 'ISS','KB','LOC','APP','PORTAL','UD','ANA','WATCH'];
public pieChartData=this.dataExtracted;
public pieChartType:string = 'pie';
constructor(private httpClient: HttpClient) {
this.getClickData();
// console.log("Array "+this.dataExtracted);
}
getClickData() {
var pieChartData=[0,0,0,0,0,0,0,0,0,0];
this.httpClient.get(this.CLICK_DATA_GET).subscribe(
(data) => {
this.clickData=data;
console.log("DATA COMING "+JSON.stringify(this.clickData));
for(var i=0;i<this.clickData.length;i++){
var type=this.clickData[i].u_type;
switch(type){
case "SC": pieChartData[0]+=1; console.log(pieChartData[0]); break;
case "CONF": pieChartData[1]+=1; console.log(pieChartData[1]); break;
case "ISS": pieChartData[2]+=1; console.log(pieChartData[2]); break;
case "KB": pieChartData[3]+=1; console.log(pieChartData[3]); break;
case "LOC": pieChartData[4]+=1; console.log(pieChartData[4]); break;
case "APP": pieChartData[5]+=1; console.log(pieChartData[5]); break;
case "PORTAL": pieChartData[6]+=1; console.log(pieChartData[6]); break;
case "UD": pieChartData[7]+=1; console.log(pieChartData[7]); break;
case "ANA": pieChartData[8]+=1; console.log(pieChartData[8]); break;
case "WATCH": pieChartData[9]+=1; console.log(pieChartData[9]); break;
default:
console.log("type:" + type + " not handled");
break;
}
}
console.log("ARRAY BEING RETURNED "+pieChartData);
this.dataExtracted=pieChartData;
}
)
// public pieChartData:number[]
// public pieChartType:string = 'pie';
}}
// getClickDataCallback(data: object) {
// this.setSettings(data);
// this.settingsUpdate.emit();
// }
Essentially, the problem lies in the pieChartData being either empty or consisting of zeros. My objective is to have the pieChartData filled with the local pieChartData within the getClickData() function.