Ng2-charts: Using dynamic data instead of static data for charts

[itanimo]

What is the proper way to display dynamic data fetched from Http into the charts? I attempted this and I got this promise error

Here

The charts work perfectly fine with static data, so thats why im sure my configuration is ok
And this is what caused it, I simply switched from the static numbers to my number in the stats array

   ngOnInit() {
    this._postService.getParams("myUrl").subscribe(S => {
      this.stat1 = S;
      this.lineChartData = [
    { data: [this.stat1[0].perc,this.stat1[0].perc+1,this.stat1[0].perc+3], label: 'Data Set 1' },
    { data: [this.stat1[1].perc,this.stat1[1].perc+1,this.stat1[1].perc+3], label: 'Data Set 2' },
    { data: [this.stat1[2].perc,this.stat1[2].perc+1,this.stat1[2].perc+3], label: 'Data Set 3' }
  ];
    });
  }

stat1[].perc returns a number, so im simply just adding them to test dynamic data

If theres a better way to display dynamic data in ng2-charts I would love to hear it .

Thank you

[tscrip]

I am running into the same issue. I am trying to generate a line graph based on an array of data from a service. I can't seem to get the graph to draw after my data is loaded.

[whyboris]

Unsure if this can solve your problem, but I had a similar issue (waiting for data to be inserted into my pre-made empty array from an API call) which was solved with an *ngIf
I got the idea from @bjines https://github.com/valor-software/ng2-charts/issues/855#issuecomment-313705242

[PhilFlash]

In constructor, use empty data like this:

constructor() {
this.lineChartData = [
{ data: [], label: 'Data Set 1' },
{ data: [], label: 'Data Set 2' },
{ data: [], label: 'Data Set 2' },
]...

In ngOnInit, set data like this:

ngOnInit() {
this._postService.getParams("myUrl").subscribe(S => {
this.stat1 = S;
const data0 = [ this.stat1[0].perc, this.stat1[0].perc+1,this.stat1[0].perc+3 ];
const data1 = [ this.stat1[1].perc, this.stat1[1].perc+1,this.stat1[1].perc+3 ];
const data2 = [ this.stat1[2].perc, this.stat1[2].perc+1,this.stat1[2].perc+3 ];

this.lineChartData[0].data = data0;
this.lineChartData[1].data = data1;
this.lineChartData[2].data = data2;

}

[miao17game]

chart module component can not load the changes in your data collections.
rebind to the component properties to refresh the chart view

[antonvasyliev]

@whyboris could you tell how exactly did you manage to solve the issue? I simply push/remove values from data and label arrays and cannot refresh the chart
Thanks!

[md8n]

Here's what I did to force a redraw - using the *ngif approach - where the *ngif is 'wrapping' the canvas element used for the chart.

Have ngif 'watch' a key piece of data.
Update the data you use for your chart.
Set the 'key piece of data' to something that will result in *ngif evaluating to false - this will clear the chart from the DOM.
*Warning Hack
Now using setTimeout set the 'key piece of data' back to something that will evaluate to true - and the chart will be redrawn.
I used a 400ms delay on the setTimeout.

[hope4555]

Thanks , this is working for me
But, is there an "Update" function that i can call? is there a way to get a reference to the chart object?

[md8n]

What I described is the whole 'update the graph' process - I stuck the whole thing in single function

[antonvasyliev]

This post helped me to solve the issue:
https://alligator.io/angular/chartjs-ng2-charts/
In a nutshell: changing original data set will not redraw the chart. It is necessary to create new object with old data + with new data

[hkarakose]

Here is my ngIf solution. I have a BarChartComponent which I pass the data array as an input. And BarChartComponent renders the chart. The component is rendered when revenueLastYear data is ready:

<bar-chart [data]="revenueLastYear" *ngIf="revenueLastYear"></bar-chart>

[surajsakhareprojects]

As per @bjines #855 (comment)

<div style="display: block" *ngIf="barChartData">
                              <canvas baseChart
                                      [datasets]="barChartData"
                                      [labels]="barChartLabels"
                                      [options]="barChartOptions"
                                      [legend]="barChartLegend"
                                      [chartType]="barChartType"
                                      (chartHover)="chartHovered($event)"
                                      (chartClick)="chartClicked($event)"></canvas>
                            </div>

This code is working for me

[technbuzz]

Using structural directive like *ngIf for async data is an obvious choice. I had tried many other solution but nothing worked me. I have solved it using dynamic component. Find it here.

Add Dynamic data to ng2-chart

I would really like to share so you don't go through the effort.

[syaifah]

Need help on how the fetch data from the api database and use it for the chart data. I had tried the using the *ngIf at the html file but nothing display on the graph. What is the correct way to get the data through the ts file?

[paviad]

This package has been updated for Angular 7, with many bugs fixed and features added. I believe the original issue in the first post is now resolved. If not, please provide a stackblitz/codepen/... example showing it.

[sani29]

I was facing the same issue. Initially, the bar Chart was initialized empty then I was getting data on API call. To repopulate bar chat I followed this link and able to resolve the issue. Hope it helps