I have a problem with displaying data downloaded from the API in the form of json. The data is not displayed/refresh in the pie chart, ngx-chart, static data work well. I have already read all posts about ngx-chart and Angular, but I have not found a solution to my problem.
Code for ts
public memoryapi
public memoryinfo
public single = [
{
"name": "",
"value": 34,
},
{
"name": "Free Memory",
"value": 8,
}
];
ngOnInit(){
this.getInfo()
}
getInfo() {
let info;
info = this.http.get('request to API')
info.subscribe(listcapacityresponse => {
this.memoryapi = listcapacityresponse.listcapacityresponse.capacity[0]
this.single[0].name = this.memoryapi.name
this.single[0].value = this.memoryapi.percentused
}
)}
view: any[] = [350, 300];
// options
showLegend = false;
colorScheme = {
domain: ['#5AA454', '#A10A28']
};
// pie
showLabels = true;
explodeSlices = true;
doughnut = true;
onSelect(event) {
console.log(event);
}
}
Template file:
<div *ngIf="single > 0" class="grid-item">
<ngx-charts-pie-chart
[view]="view"
[scheme]="colorScheme"
[results]="single"
[legend]="showLegend"
[explodeSlices]="explodeSlices"
[labels]="showLabels"
[doughnut]="doughnut"
[gradient]="gradient"
(select)="onSelect($event)">
</ngx-charts-pie-chart>
</div>
//API RESPONSE
{"listcapacityresponse":{"count":10,"capacity":[{"type":0,"name":"MEMORY","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityallocated":2952790016,"capacityused":2952790016,"capacitytotal":34359738368,"percentused":"8.59"},{"type":1,"name":"CPU","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityallocated":2500,"capacityused":2500,"capacitytotal":128000,"percentused":"1.95"},{"type":2,"name":"STORAGE","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":0,"capacitytotal":4398046511104,"percentused":"0"},{"type":3,"name":"STORAGE_ALLOCATED","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":138512695596,"capacitytotal":8796093022208,"percentused":"1.57"},{"type":4,"name":"VIRTUAL_NETWORK_PUBLIC_IP","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":3,"capacitytotal":199,"percentused":"1.51"},{"type":5,"name":"PRIVATE_IP","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":6,"capacitytotal":199,"percentused":"3.02"},{"type":6,"name":"SECONDARY_STORAGE","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":0,"capacitytotal":0,"percentused":"0"},{"type":7,"name":"VLAN","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":1,"capacitytotal":101,"percentused":"0.99"},{"type":19,"name":"GPU","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityused":0,"capacitytotal":0,"percentused":"0"},{"type":90,"name":"CPU_CORE","zoneid":"5f0d15e3-5937-42f6-95bc-e13f2e15ab9d","zonename":"Sandbox-simulator","capacityallocated":4,"capacityused":4,"capacitytotal":16,"percentused":"25"}]}}
Same issue happened to me two years ago. This is the solution. Just change your logic to,
public single = [];
...
getInfo() {
let info;
info = this.http.get('request to API')
info.subscribe(listcapacityresponse => {
this.memoryapi = listcapacityresponse.listcapacityresponse.capacity[0]
this.single =
[{
"name": this.memoryapi.name,
"value": this.memoryapi.percentused
},
{
"name": "Free Memory",
"value": 8
}]
You need to initialize your array at once time. Your *ngIf usage is correct but its useless in your case because you are already defining your single variable in class definition.