Chart component is not working properly with uiChart.refresh() method

[cesarrew]

UPDATE: The problem was solved using "setTimeout(() => this.uiChart.refresh(), 100)" instead of "this.uiChart.refresh()" only. I believe that the showcase should be updated with this information.

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
I try to update the chart using the refresh() method as the example in showcase suggests. The changes occurs only on the second button click.

Expected behavior
Once the refresh() is called, the chart is updated with current model.

Minimal reproduction of the problem with instructions

<p-chart #chart type="line" [data]="data"></p-chart>
<button pButton type="button" label="Update" (click)="update(chart)"></button>

export class AppComponent {

    data: any;

    constructor() {
        this.data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                {
                    label: 'Dataset',
                    data: [10, 20, 30, 40, 50, 60, 70],
                    fill: false,
                    borderColor: '#4bc0c0'
                }
            ]
        }
    }

    update(chart: UIChart) {
        this.data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                {
                    label: 'Dataset',
                    data: [70, 60, 50, 40, 30, 20, 10],
                    fill: false,
                    borderColor: '#4bc0c0'
                }
            ]
        }

        chart.refresh();
    }
}

What is the motivation / use case for changing the behavior?
Fix the problem.

Please tell us about your environment:
Ubuntu 16.04, Chrome 52.

• Angular version: 2.0.X
  Angular 2.2.1

• PrimeNG version: 2.0.X
  PrimeNG 1.0.0

Yes

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome 52, Firefox 45

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  TypeScript 2.0.10

• Node (for AoT issues): node --version =
  N.A.

[tapas4java]

You need setTimeOut() here:

setTimeout(() => {
    chart.refresh();
 }, 100);

[cesarrew]

Thanks! It worked. Now I believe that the showcase should be updated with this information.

[tigrenok00]

I'm doing the same, but I receive the following error:

Property 'refresh' does not exist on type 'UIChart'.

Can you tell what is wrong?

[tapas4java]

Are you calling timer callback as a separate function like below??

setTimeout(callBack, 100);

[jonyadamit]

I believe this workaround should be handled internally, without requiring users to use setTimeout.
Prior versions also worked even without the refresh method so...

[ghost]

This workaround does not seem to be working any more.
I'm using primeng 2.0.0-rc.3 and Angular 2.3.1

I used exactly the same code as above + setTimeOut() but my chart won't update after calling the chart.refresh() method.
When I print out the properties of the chart object it does seem to have the correct/new data though.

Update: I'm now using this as a workaround.
setTimeout(() => {
chart.ngOnDestroy();
chart.initChart();
}, 200);

[Mrtcndkn]

#2235 this is related to changeDetection when the data attribute changes. And locally refresh method is working fine when I change something inside the data object.

[Mrtcndkn]

Please try with the latest PrimeNG version and comment if the issue still persists.