loading graph data from json object in angular2 using ng2-charts

Question

I currently have a component in which i will be displaying multiple graphs on one page and each from a separate json file. I am using ng2-charts and angular2 and i am not sure how to have my graph load up based on json data and what is the best way of setting up multiple graph data in one component.

Here is my get call that returns an object in my component file:

dataType: any=[];
 getData(){
    this.dataService.getDataType().subscribe((response) => {this.dataType = response; 
    for(let item of this.dataType){
      this.barChartLabels.push(this.dataType.name);
    }
    console.log(this.itemNames);

    });
  }

This is my code for loading my graph in component file:

public barChartOptions: any = {
  scaleShowVerticalLines: false,
  responsive: true
};
public barChartLabels: any =[]; //LOAD from dataType.label
public barChartType: string = 'horizontalBar';
public barChartLegend: boolean = true;

public barChartData: any[] = //LOAD from dataType.data

Sample json data:

[
  {
    "id": 1,
    "name": "Test 1",
    "display": "Test 1",
    "score": 45
  }, ...
]

My html - using ng2-charts:

<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
                    </canvas>

Currently- i was able to see in the console that i have an array of labels but for some reason they are not being displayed on the graph even though i have pushed my returned labels into the barChartLabels array which is used in the html.

What does your data look like? I.e. Object/array etc does it look like this {[{graph1}, {graph2} ]} etc? — Joe Keene
– Joe Keene, Commented Apr 27, 2017 at 14:26
@JoeKeene i went ahead and updated my post with a short sample json data. Each graph has their own json file of data. I just want to know how can i reference my graph binding options like labels and dataset from my json into my html. — bluePearl
– bluePearl, Commented Apr 27, 2017 at 15:42
Sorry can you also show me your HTML and what you're trying to link up? — Joe Keene
– Joe Keene, Commented Apr 27, 2017 at 18:28
@JoeKeene i further updated my post with i have so far - i was able to return data and see it in the console but my issue now is when i push my desired data into the array that is being used in the html to display data - it is not showing anything. — bluePearl
– bluePearl, Commented Apr 27, 2017 at 18:54
@bluePearl I had a similar problem. I don't think the ng2-charts library likes dynamically changing the data inside the barChartData object. Instead, I fixed it by creating empty data at the beginning: barChartData: any[] = [], then reassigning the entire object after the data is loaded: barChartData = retrievedData. — HaveSpacesuit
– HaveSpacesuit, Commented May 31, 2017 at 15:29

Michael.Ha · Accepted Answer · 2017-04-28 07:17:07Z

2

I also had the same problem when retrieving data and labels from my RESTful service into my charts. I resolved this problem by calling ngOnChanges() on the chart.

import { Component, AfterViewInit, OnInit, ViewChild, SimpleChanges } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';

export class DashboardComponent implements OnInit, AfterViewInit {
    @ViewChild(BaseChartDirective)
    public chart: BaseChartDirective;

    ngAfterViewInit() {
        this.updateCharts();
    }

    public updateCharts(): void {
        console.log('updateCharts()');

        setTimeout(() => {
            this.chart.ngOnChanges({} as SimpleChanges);
        }, 100);
    }
}

Update:

There was problems with loading a second chart witin the same component when using the above approach.

The ngOnChanges() will only update/load the first chart.

Instead I used the ngIf directive within each canvas and all charts load now.

<canvas baseChart *ngIf="pastChartLabels.length > 0" [colors]="pastChartColors" [datasets]="pastChartData" [labels]="pastChartLabels" [options]="pastChartOptions"
    [chartType]="pastChartType" [legend]="pastChartLegend" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>

<canvas baseChart *ngIf="recentChartLabels.length > 0" [colors]="recentChartColors" [datasets]="recentChartData" [labels]="recentChartLabels" [options]="recentChartOptions"
    [chartType]="recentChartType" [legend]="recentChartLegend" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>

edited Apr 28, 2017 at 7:17

answered Apr 28, 2017 at 1:37

Michael.Ha

213 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bluePearl Over a year ago

how were you loading your data and labels? I am currently pulling them out of a json and each into their own array but for some reason my graph is not displaying any data and no errors are appearing in console

Collectives™ on Stack Overflow

loading graph data from json object in angular2 using ng2-charts

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related