Primeng Charts

[Saurav Dubey]

How to refresh chart after data has changed . Currently data is changed but chart does not refresh. Any possible ways to redraw the chart manually will also be helpful.Any Solutions? Thanx in advance

[alexey93]

How to refresh chart after data has changed . Currently data is changed but chart does not refresh. Any possible ways to redraw the chart manually will also be helpful.Any Solutions? Thanx in advance

it is easy:

html:

Code: Select all

<p-chart #chart type="bar" [options]="yourOptions" [data]="yourData"  </p-chart>

ts:

Code: Select all

import { Component, ViewChild } from '@angular/core';
import { UIChart } from 'primeng/primeng';

@ViewChild('chart') chart: UIChart;


function(){
 this.chart.refresh();
 }

this will work with primeng 2.0.x I believe. In erlier versions you would call this.chart.update();

[Saurav Dubey]

is using viewchild necessary?

[Saurav Dubey]

is using @ViewChild necessary?

[Saurav Dubey]

it is easy:

html:

Code: Select all

<p-chart #chart type="bar" [options]="yourOptions" [data]="yourData"  </p-chart>

ts:

Code: Select all

import { Component, ViewChild } from '@angular/core';
import { UIChart } from 'primeng/primeng';

@ViewChild('chart') chart: UIChart;


function(){
 this.chart.refresh();
 }

this will work with primeng 2.0.x I believe. In erlier versions you would call this.chart.update();

this is not working chart:UIChart remains undefined and hence cant access refresh. Can you share your code maybe I am doing something wrong

[alexey93]

this is not working chart:UIChart remains undefined and hence cant access refresh. Can you share your code maybe I am doing something wrong

Code: Select all

setTimeout(function () { chart.refresh() }, 1000);

try it like this than. The code you see above is my code, and it is working like this.

[Saurav Dubey]

Code: Select all

setTimeout(function () { chart.refresh() }, 1000);

try it like this than. The code you see above is my code, and it is working like this.

if i use setTimeout den i can just hide and unhide div and the chart will redraw.

Code: Select all

 setTimeout(() => {
           this.initial = true;
        }, 1000);

this works just fine. initial is my *ngIf variable.

Do you have any sample for "chart.initChart()".

[alexey93]

if i use setTimeout den i can just hide and unhide div and the chart will redraw.

Code: Select all

 setTimeout(() => {
           this.initial = true;
        }, 1000);

this works just fine. initial is my *ngIf variable.

Do you have any sample for "chart.initChart()".

Did you try to read the docs at all?
https://www.primefaces.org/primeng/#/chart

Methods
Name Parameters Description
refresh - Redraws the graph with new data.
reinit - Destroys the graph first and then creates it again.

For me it works without a timeout, I had the problem only if I didnt initalize the graph with some random data. And this way is much easier, than redrwaing the whole div everytime. You can set the timeout on just 0.1 seconds, and it should work just fine as well.

that is how I initiliaze my graphs for now.

Code: Select all

ngOnInit() {

        this.ProfileService.getProfiles().then(profiles => this.profiles = profiles)
            .then(() => {
                this.update_bar_charts();
                this.update_dognutcharts();
                this.chart.refresh();
                this.chart2.refresh();
   
            });


 

    }

[Saurav Dubey]

if i use setTimeout den i can just hide and unhide div and the chart will redraw.

Code: Select all

 setTimeout(() => {
           this.initial = true;
        }, 1000);

this works just fine. initial is my *ngIf variable.

Do you have any sample for "chart.initChart()".

Did you try to read the docs at all?
https://www.primefaces.org/primeng/#/chart

Methods
Name Parameters Description
refresh - Redraws the graph with new data.
reinit - Destroys the graph first and then creates it again.

For me it works without a timeout, I had the problem only if I didnt initalize the graph with some random data. And this way is much easier, than redrwaing the whole div everytime. You can set the timeout on just 0.1 seconds, and it should work just fine as well.

that is how I initiliaze my graphs for now.

Code: Select all

ngOnInit() {

        this.ProfileService.getProfiles().then(profiles => this.profiles = profiles)
            .then(() => {
                this.update_bar_charts();
                this.update_dognutcharts();
                this.chart.refresh();
                this.chart2.refresh();
   
            });


 

    }

I have read the documentation. Using inside ngOnInit u dont need chart.refresh(). your chart is displayed just by initialising the data.
Just Try this: create a button and on click call a function; inside it change the data and den do chart.refresh(). Tell me if this works for you! coz this is not working for me.

[alexey93]

I have read the documentation. Using inside ngOnInit u dont need chart.refresh(). your chart is displayed just by initialising the data.
Just Try this: create a button and on click call a function; inside it change the data and den do chart.refresh(). Tell me if this works for you! coz this is not working for me.

Well, I get the data from a service, thats why I personally need to load it into all my charts, otherwise they are empty at the beginning.

I worked with a button before, because I couldnt figure out how to load initial data without hardcoding it and it worked perfectly fine with a timeout!

if I call update(chart) on a button click, it works perfectly fine with timeout. I dont understand, why you have a problem with it...

Code: Select all

update(chart: UIChart) {

        this.update_bar_chart();
        setTimeout(function () { chart.refresh() }, 500);
}
    update_bar_charts() {
for (var i = 0; i < Object.keys(this.profiles).length; i++){
            this.data3[i] = this.profiles[i].hours;
}

this.data0.datasets[0].data = this.data3;
}