how to initialize chart with API fetch data?

Question

I want to use ngx-charts for my project. The problem is I don't understand how to initialize my chart with data I got from my api.

The vertical bar chart seems easy. The data is of the following type:

https://stackblitz.com/edit/vertical-bar-chart?embed=1&file=app/app.component.ts

When I assign in the constructor Object.assign(this, data) (the data I got from my api)) I receive the following error :

ERROR TypeError: Cannot read property 'toLocaleString' of undefined

Their data is the following type:

export var single = [{
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  },
  {
    "name": "France",
    "value": 7200000
  }
];

My data is :

[{
    "data": "2019-01-09",
    "totalConsum24": 66.66666666666667
  },
  {
    "data": "2019-02-03",
    "totalConsum24": 160
  },
  {
    "data": "2019-02-04",
    "totalConsum24": 153.84615384615384
  },
  {
    "data": "2019-02-05",
    "totalConsum24": 90.9090909090909
  }
]

Edit1: This is how i get my data from my backend. the data is the same as i posted above. In the COnstructor I begin with Object.assign(this, {single}) and initially single: any[];

ngOnInit() {
this.shipService.getConsumuriSiDataForShipById(this.shipId).subscribe(data 
=> {
  console.log(data);
  this.single = data;
});

Your example works for me, could you please provide an example when it fails, because it's difficult to understand as is. (If you want to simulate backend calls, you can use of(data) to get an observable similar as from HttpClient) — Amir Arbabian
– Amir Arbabian, Commented Feb 9, 2019 at 11:52

SiddAjmera · Accepted Answer · 2019-02-09 12:58:46Z

2

And in your Component, you'll have to map the data to the format that the ngx-charts understand. Here, give this a try:

...
import { ShipService } from './path-to-ship-service';

@Component({...})
export class AppComponent {

  ...,
  single = [];

  constructor(private shipService: ShipService) {}

  ngOnInit() {
    this.shipService.getConsumuriSiDataForShipById(this.shipId)
      .subscribe(data => {
        console.log(data);
        this.single = data.map(datum => ({ name: datum.data, value: datum.totalConsum24 }));
    });
  }

  ...
}

Here's a Working Sample StackBlitz for your ref.

edited Feb 9, 2019 at 12:58

answered Feb 9, 2019 at 11:52

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

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

3 Comments

gxg Over a year ago

My data that i fetch from my backend is very similar to single, why should i use multi ? I added an edit to provide more details

gxg Over a year ago

Yes, it works now. These things need to be in the documentations ! :) Kind regards !

SiddAjmera Over a year ago

There actually is a section named Data Format in the documentation. But yeah I agree that it must be explicitly mentioned that the data needs to be in the exact same format.

Collectives™ on Stack Overflow

how to initialize chart with API fetch data?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related