PrimeNG Charts do not change the values after they have already been

[rodrigocipriani]

My Chars are functioning normally, but when I try to modify the values after the graphic has already been generated it does not change

MY TS FILE:

`import {Component, OnInit, ApplicationRef} from '@angular/core';
import {Observable} from 'rxjs/Observable';

import {Analise, Filtro} from './analytics.class';
import {AnalyticsService} from './analytics.service';

import {UsiGoDirective} from '../utils/directives/usi-go.directive';
import {CardComponent} from '../utils/components/card.component';
import {BbNl2BrPipe} from '../utils/pipes/bb-nl2br.pipe';

import {DataTable, Column, Calendar, UIChart} from 'primeng/primeng';

@component({
templateUrl: './analytics/analytics.page.html',
styleUrls: ['./analytics/analytics.page.css'],
directives: [UsiGoDirective, DataTable, Column, Calendar, UIChart],
pipes: [BbNl2BrPipe],
providers: [AnalyticsService]
})

export class AnalyticsPage implements OnInit {

public analise: Analise = new Analise();
public filtro: Filtro;
public data: any;

constructor(
    private _analyticsService: AnalyticsService
  ) {

}

ngOnInit() {

    let me : any = this;

    me.data = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
            {
                label: 'First Dataset',
                data: [65, 59, 80, 81, 56, 55, 40],
                fill: true,
                borderColor: '#4bc0c0'
            },
            {
                label: 'Second Dataset',
                data: [28, 48, 40, 19, 86, 27, 90],
                fill: true,
                borderColor: '#565656'
            }
        ]
    }

    me.filtro = new Filtro("21-06-2016", "21-06-2016");
    console.log("me.options", me.options);

}

public filtrar() {
    this.data.datasets[0].data = [1, 2, 3, 4, 5, 6, 7];
    //this._analyticsService.loadHits(this.filtro);
}

}
`

MYHTML FILE:

. . . <p-chart type="line" [data]="data"></p-chart> . . .

Link forum: http://forum.primefaces.org/viewtopic.php?f=35&t=46104&sid=15474b87ed77b0eda44a74d7224ea3e8

[Perezmarc]

Same here

[Perezmarc]

did you solve it?

[shybzzz]

the same thing for me
is this going to be fixed or it is already fixed
(my version of primeng is 1.0.0-beta.8)

[Perezmarc]

I'm using beta.9 :/

[Perezmarc]

Anyone solved it? Maybe Thinking on changing of library...

[rodrigocipriani]

I don´t solve this! I´m wait for...
For while, i did my self component in Angular 2 with highcharts.

I´m in Beta 9 too.

PrimeNg fprum problem: http://forum.primefaces.org/viewtopic.php?f=35&t=46104

[Perezmarc]

any progress?

[rodrigocipriani]

No.

[brugh]

i tried using these charts and they work just fine. but without the updating on datachange they're pretty much useless. this should be a high prio bug.. what good are static charts in any dashboard ..

[shybzzz]

primeng ui chart is just a wrapper component for chart.js chart.

I've managed to find the reason of this bug there - they use itterable differs in ngDoCheck - and as a result data value is already set but still not rerendered. one can find UiChart in node modules folder and find that condition in ngDoCheck method (or just open this component in chrome debug tool and put break into ngDoCheck method).

The only way to fix this I found was to create the custom wrapper. Btw, this solution was good because there're known bugs in chart.js (espessially if you change visibility of chart holder) - so I created the wrapper for highcharts not for chart.js. And of course this approach can be used for any charts library one likes.

[beliyu]

try... after changing something in Dataset[0] refresh Object for this series

public filtrar() {
    this.data.datasets[0].data = [1, 2, 3, 4, 5, 6, 7];
    this.data.datasets[0] = Object.assign({}, this.data.datasets[0]);
}

[rodrigocipriani]

it seems to me that the problem was solved. Updated version of PrimeNG and now works normally.
If anyone still having problem even after upgrading the version, let me know, I put my code here.

[MStoehr]

I am still having that problem. I am updateing my chartdata.datasets and my p-chart does not update. I'd love to see your code.
I am currently doing sth like this:

this.pingService.pingStream.subscribe(ping => {
         this.ping = ping;
         this.ntwdata.datasets[0].data.pop();
         this.ntwdata.datasets[0].data.unshift(this.ping);
      })

Whereas ntwdata is an imported variable for my chart and the pingService delivers a number every 2.5secs. Any ideas? I am using the latest versions of Angular2, Chart.js and PrimeNG.

[sarvasiddhi]

same here. it does not seem to work.

i am using beta 16.

[ponty7]

You have to update the dom elements, manually. In documentation it says, 'due to complexity of charts.js, change detection is not available and when the data changes, you need to call refresh() method manually'. For instance if you increase width of chart container element, the chart should update. It's a hack but should work if updating to latest doesn't work.

[Mrtcndkn]

ChangeDetection added for charts. Take a look at this one;

#2235

Without changing the array there should be manual refresh method on your chart.