Currently, I am facing an issue with populating my charts using real data from an API. Here is the HTML code snippet in question:
<ngx-charts-bar-vertical
[results]="popularCountriesData"
[legend]="false"
[showXAxisLabel]="false"
[showYAxisLabel]="false"
[xAxis]="true"
[yAxis]="false"
[gradient]="false">
</ngx-charts-bar-vertical>
In addition, this is a segment of the TypeScript file being utilized:
import {Component, OnInit} from '@angular/core';
import {ResearcherService} from "../../../services/researcher.service";
import {HttpErrorResponse} from "@angular/common/http";
import {PostCollection} from "../../../models/PostCollection";
@Component({
selector: 'app-dashboard-custom',
templateUrl: './dashboard-custom.component.html',
styleUrls: ['./dashboard-custom.component.css']
})
export class DashboardCustomComponent implements OnInit {
popularCountriesData: any = [];
constructor(private researcherService: ResearcherService) { getData(); }
private getData() {
this.researcherService.restGetStatisticsCountry().subscribe((data: PostCollection[]) => {
for (let i = 0; i < data.length; i++)
this.popularCountriesData.push({ name: data[i].name, value: data[i].posts.length });
console.log(this.popularCountriesData)
},
(err: HttpErrorResponse) => {
console.log(err.error);
});
}
ngOnInit(): void {
}
}
The challenge arises when running the code as the chart appears empty even though the console logs show the following data:
[
{
"name": "Japan",
"value": 1
},
{
"name": "Russia",
"value": 1
},
{
"name": "Netherlands",
"value": 8
}
]
To troubleshoot, I hardcoded the data directly into the TypeScript file as shown below:
popularCountriesData = [
{
"name": "Japan",
"value": 1
},
{
"name": "Russia",
"value": 1
},
{
"name": "Netherlands",
"value": 8
}
];
Surprisingly, this resulted in a proper chart display, which can be viewed at the following link: https://i.sstatic.net/Y3HXu.png
If you have any insights on what might be causing the initial issue, please share your thoughts.