ChangeDetection for Charts

[Mrtcndkn]

-When the data of charts changed dynamically it should reinitialize the view.
-It should be used with a new array for changeDetection to work.

For example;

changeData() {
        this.changedData = {
            labels: ['X','Y','Z'],
            datasets: [
                {
                    data: [200, 200, 50],
                    backgroundColor: [
                        "#50f442",
                        "#f441c4",
                        "#4195f4"
                    ],
                    hoverBackgroundColor: [
                        "#50f442",
                        "#f441c4",
                        "#4195f4"
                    ]
                 }]
        }
        this.data = Object.assign({}, this.changedData);
}

[unaor]

@Mrtcndkn now when i've updated to this version all my graphs stops drawing. can you explain?

[MeMeMax]

This doesn´t work for me. Just like using chart.refresh(). I only see a chart if i use setTimeout(function(){ chart.reinit(); }, 500); thats kind of ugly.

[Mrtcndkn]

What version are you using? @unaor @MeMeMax

[MeMeMax]

"dependencies": {
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/compiler-cli": "^2.4.7",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/platform-server": "^2.4.7",
"@angular/router": "^3.3.1",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20",
"bootstrap": "^3.3.7",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"jw-bootstrap-switch-ng2": "0.0.7",
"primeng": "^2.0.3",
"rxjs": "^5.0.1",
"systemjs": "^0.20.7",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
}

[Mrtcndkn]

This change will be available after 4.0.RC1

[unaor]

when using version 2.0.3 my current implementation stopped drawing the graphs, so i reverted back to version 2.0.0-rc.1

[Mrtcndkn]

After 4.0.RC1 it will work. If there are any problems afterward then feel free to reopen the issue.

[unaor]

ok, any idea why after version 2.0.0-rc.1 the graphs are not drawing? code did not change and im starting it by calling setTimeout(() => this.chart.refresh(), 100);

[Mrtcndkn]

There is no change in that version maybe you can try it with 2.0.0 final version @unaor

[d668]

here is an example repo showing chart.refresh doesn't work, only chart.reinit with timeout

[merlosy]

Hi,
If this helps, I had it working using the code sample below:

• pie.component.html:

<p-chart #chart type="pie" [data]="data" [options]="options"></p-chart>

• Then, I pass data through change detection in my component (@Inject() inputData;), so the relevant code in my pie.component.ts:

import { UIChart } from 'primeng/primeng';
...
@ViewChild('chart') chart: UIChart; 
...
ngOnChanges(changes: SimpleChanges): void {
    if (changes.inputData.currentValue) {
      // update this.data here

     // then chart is getting updated
      setTimeout(() => {
        this.chart.reinit();
      }, 100);
    }
  }

:)

[PardeepJain]

Hi All,

same problem i am facing during chart refresh, in my case neither is working chart.refresh and chart.reinit() also throwing error like refresh of undefined , may i know what will be the possible causes ?

[lsoaresesilva]

Still facing the problem of chart.refresh not working - does not update graph - on PrimeNG 7.1.0-rc.1. But the provided code by Mrtcndkn worked as expected.

[lamisChebbi]

Hi
I still have the same issue with PrimeNG 8. I'm using the data as Observable and applying the async pipe. It is not refreshing. And even if I invoke the refresh it does not work.
<p-chart type="bar" #chart [data]="barData$ | async" [height]="170" [options]="barOptions">

Any help will be highly appreciated
Thank you