I am currently working on generating a chart using data obtained from an API call. To achieve this, I am utilizing the google-charts-angular package within my HTML:
<google-chart [title]="title" [type]="type" [data]="data" [options]="options"></google-chart>
My main objective is to pass the fetched data to the chart. This process is handled in my component.ts file. Initially, I tested it with randomly created data:
title = 'Issues';
type = 'Gantt';
data = [
['1', 'Read', 'whatever', //More data ....],
['2', 'Write', 'whatever', // More data ...,
];
columnNames = [
['string', 'Task ID'],
['string', 'Task Name'],
['string', 'Resource'],
// More columns ...
];
The above setup works as expected. Moving forward, I intend to utilize data retrieved from the API. The GetIssues function returns an Observable through the http.get() method:
ngOnInit(): void {
this.apiService.getIssues().subscribe(response => {})
}
However, I am encountering difficulty in passing asynchronously retrieved data from the subscription to the chart. My attempt to add new arrays to the data array using push did not yield the desired outcome:
issues = [];
data = [
['1', 'Read', 'whatever', new Date(2015, 0, 1), new Date(2015, 0, 3), 1, 100, null],
['2', 'Write', 'whatever', new Date(2015, 0, 4), new Date(2015, 0, 7), 1, 100, null],
];
ngOnInit(): void {
this.apiService.getIssues().subscribe(response => {
this.issues = response;
if (this.issues) {
let id = 3;
for (let issue of this.issues) {
this.data.push([id, issue.title, 'whatever', new Date(2015, 0, 4), new Date(2015, 0, 7), 1, 100, null]);
id += 1;
}
}
});
}
It appears that the chart displays the two predefined arrays in "data," but fails to show the new arrays added via push. This issue may be attributed to the chart being rendered before the asynchronous operation completes. If indeed this is the root cause, I am uncertain about how to trigger the chart rendering post completion of the asynchronous task.