[Please let me know if there is a way to improve this question for better clarity on the situation and what I am seeking]
I am currently working on updating a chart in my Angular application that was previously built using ng2-charts. Initially, we utilized TWO JSONs/Arrays for data. However, the REST service (which is sourced from a third-party provider and cannot be altered) has undergone changes. The new structure of the REST service is as follows. I attempted to work with a single JSON, and I managed to display the graph successfully when using a hardcoded JSON directly in the .ts file.
However, I encountered difficulties when attempting to retrieve the JSON via a REST(GET) call.
As an FYI, I can view the JSON output in the console. Please refer to the image for further details.
I am encountering the following error:
Cannot read property 'data' of undefined
Here are two StackBlitz examples - one with hardcoded JSON and the other using a REST call:
https://stackblitz.com/edit/ng2-charts-line-template-iq1mia
https://stackblitz.com/edit/ng2-charts-line-template-voazjk
public summaryboardJson: Summaryboard[];
public lineChartLegend = true;
public lineChartType = 'line';
public lineChartPlugins = [];
public lineChartOptions: (ChartOptions & { annotation: any }) = {
responsive: true,
};
public lineChartColors: Color[] = [
{
borderColor: 'black',
backgroundColor: 'rgba(255,0,0,0.3)',
},
];
public lineChartData: ChartDataSets[];
public lineChartLabels: Label[];
ngOnInit() {
this.http
.get("https://api.jsonbin.io/b/5c90f7d86892a7259f084846")
.toPromise()
.then(response => {
const data = response.json();
this.summaryboardJson = data;
console.log(this.summaryboardJson);
//START: put data in Bar Chart
this.lineChartData = [
{ data: this.summaryboardJson.map(a => a.noOfDefects), label: 'Defects' },
];
this.lineChartLabels = this.summaryboardJson.map(a => a.Month);
//END: put data in Bar Chart
})
.catch(error => {
console.log(error);
return Observable.of<Summaryboard[]>([]);
});
If anyone can provide insight on how to effectively utilize the JSON obtained from a REST call to generate the same chart, it would be greatly appreciated.