Angular 2 and PrimeNG chart not rendering fine

Question

Im using the charts wrapper for chart.js provided by http://www.primefaces.org/primeng/#/chart

This works fine when i give the data attribute a static array of numbers however when i use a function that returns a value (also array of numbers) its not rendering This is because their implementation doesn't listen to changes automatically in fact in their docs they state that refresh should be manual

update(chart: UIChart) {
    this.data = //reload
    chart.refresh();
}

my question is how to reference the chart: UIChart from the controller so i can call its refresh method when i need to here is my current implementation (not drawing since data is empty)

constructor(private stationService : StationComplianceService) { }

  ngOnInit() {
    this.getStationTypes();
  }

  // ngAfterViewInit(chart: UIChart) {
  //   this.drawGraph(this.processStationType(this.graphData)); not working
  // }


  update(chart: UIChart) {
      chart.refresh();
  }

drawGraph(graphData){
  this.data = {
    labels: ['Up Devices', 'Down Devices'],
    datasets: [
        {
            data: graphData,
            backgroundColor: [
                "#4dd0e1",
                "#4fc3f7"
            ],
            hoverBackgroundColor: [
                "#00acc1",
                "#039be5"
            ]
        }]
    };
}



  getStationTypes(){
    this.stationService.subscribeToComplianceService()
      .subscribe(
        graphData => {
          this.graphData = graphData;
          this.drawGraph(this.processStationType(graphData)); etc etc

UPDATE I managed to get a reference of the chart by using

@ViewChild
('upDownChart') chart: UIChart;

So i was hoping that by calling this.chart.refresh() at the end of the drawGraph function it would work but its not strangely i have refactored the update (invoked by a click on the ui)

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

and it is working

score 1 · Answer 1 · edited May 23 '17 at 12:09

If you update to primeng 4.0.0-rc.1, you can handle data refreshing a lot easier, particularly if it is asychnronous. Here is an 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);

}

How do you get Angular 2 (or 4) PrimeNg Charts to refresh asynchronously?

https://github.com/primefaces/primeng/issues/2235

score 0 · Accepted Answer · answered Dec 07 '16 at 17:38

0

the solution was to give it a small timeout

setTimeout(() => this.chart.refresh(), 100);

https://github.com/primefaces/primeng/issues/1422

answered Dec 07 '16 at 17:38

naoru

2,149
5
34
58

Angular 2 and PrimeNG chart not rendering fine

2 Answers2