Ng2 charts plot does not display data / graph labels
I have structured a horizontal bar chart using ng2 charts in angular2, but I'm not sure why I can't see the graph data, and I don't see any errors in my console.
HTML:
<canvas baseChart [data]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
</canvas>
component:
result: Iresult[] = [];
barChartLabels: string[] =[];
barChartType: string = 'horizontalBar';
barChartLegend: boolean = true;
barChartData: any[] = [];
barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true
};
barChartLabels: string[] =[];
barChartType: string = 'horizontalBar';
barChartLegend: boolean = true;
barChartData: any[] = [];
getData(){
this.dataService.getData().subscribe(
data => {
this.result = data;
this.barChartLabels = this.result.map(item => item.label);
console.log(this.barChartLabels); // RESULT: ["test 1", "test 2"]
this.barChartData = this.result.map(item => item.data);
console.log(this.barChartData); // RESULT: [25, 55]
},
error => this.errorMessage = <any>error);
console.log(this.barChartLabels); // RESULT: []
console.log(this.barChartData); // RESULT: []
}
JSON file:
[
{
"id": 5,
"label": "test 1",
"data": 25
},
{
"id": 6,
"label": "test 2",
"data": 55
}
]
Service file:
getData(): Observable<IChartData[]>{
return this._http.get('https://api.myjson.com/bins/ywavt')
.map((res:Response) => <IChartData[]> res.json())
.do(data => console.log('All: ' + JSON.stringify(data))) //DEBUG USE
.catch(this.handleError);
}
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
//Console do result: All: [{"id":5,"label":"test 1","data":25},{"id":6,"label":"test 2","data":55}]
Interface class
export interface IChartData {
id: number;
label: string;
data: any;
}
UPDATE
Here is a plunker of what I have so far: https://plnkr.co/edit/0GyFTkuqF7m8JhUKK6Kl?p=preview
Labels are not displayed, but the colored horizontal bar is not positioned properly.
source to share
UPDATE 2
Since the issue still occurs when initializing asynchronous chart data insubscribe
, a working solution is to use the load flag in conjunction with
*ngIf
to wait for the data to be loaded from the service before initializing the chart.
It will look like this:
Template:
<canvas *ngIf="loaded" baseChart [data]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
component:
loaded = false;
getData(){
this.dataService.getData().subscribe(data => {
this.resultData = data;
this.barChartLabels = this.resultData.map(item => item.label);
this.barChartData = this.resultData.map(item => item.data);
this.loaded = true;
}
}
Here is PLUNKER
UPDATE 1
As per your comment, this helped to display the data, but the labels are still not showing. From the code you provided it is really hard to see why, but there is probably something wrong with your data. Can you write down
barChartData
and
barCharLabels
so I can look at it?
Here is a working plunker for your example, but with hardcoded data: PLUNKER
Original
In the chart, ng2 is used ngOnChanges
internally to catch changes to its input. This means that changing the arrays that you entered into it will not change. And since your is an array barChartLabels
and is barChartData
already initialized as empty arrays, this is what the diagram will use.
What you need to do to get it started ngOnChanges
is changing the actual instances barChartLabels
and barChartData
when new data is received.
Replace this inside the method getData
:
this.result.forEach( item => {
this.barChartLabels.push(item.label);
this.barChartData.push(item.dataInfo);
})
Something like that:
this.barChartLabels = this.result.map(item => item.label);
this.barChartDatat = this.result.map(item => item.dataInfo);
source to share