CODEWITHSUNDEEP
angulartypescriptchartsprimeng
Faigjaz
Faigjaz

Reputation: 838

Angular 2/PrimeNg - Update Chart via @ViewChild

I am using Angular2 with PrimeNG for my app. I have a dashboard with charts. I tried to update to PrimeNG rc7 (from rc5, where they fixed an issue with updating charts), but because of their changes I don't know how to update my chart anymore, as it has to be done by calling a method.

I've read about the @ViewChild decorator, but I don't really know how to use it.

my chart.html:

<p-chart #linechart  type="line" #linechart
 id="linechart" [data]="ntwdata" [options]="options">
</p-chart>

my dashboard.ts: 

import { NTWDATA } from '../resources/mock/chartdata';

import { UIChart } from 'primeng/primeng';

@Component({
   selector: 'my-dashboard',
   templateUrl: 'dist/html/dashboard.component.html',
})

export class DashboardComponent {
   ntwdata = NTWDATA;
   options: any;

   constructor() {

   }

   ngOnInit() {

         this.options = {
            animation: false,
            legend: {
               display: true,
               labels: {
                  boxWidth: 0,
               }

            },
            scales: {
               yAxes: [{
                  scaleLabel: {
                     display: true,
                     labelString: "ms"
                  },
                  ticks: {
                     beginAtZero: true,
                     suggestedMax: 100,
                  }

               }],
               xAxes: [{
                  ticks: {
                     beginAtZero: true,
                     maxTicksLimit: 6,
                  }
               }]

            }
      }
   }
}

The NTWDATA gets updates every 2.5s and with my data everything is fine.

My DashboardComponent is a child of the component where the data gets updated it.

parent component:

...
setInterval(()=>{
   NTWDATA.push(//mydata)
},2500);
...

I have tried to add @ViewChild to my parent like so:

@ViewChild("linechart") chart: UIChart

Then I called the refresh() methode within my setInterval:

setInterval(()=>{
   NTWDATA.push(//mydata)
   this.chart.refresh();
},2500);

But this.chart is undefined.

Then I tried to use @ViewChild like so: 

@ViewChild(Dashboard) dashcomp: Dashboard;
setInterval(()=>{
       NTWDATA.push(//mydata)
       this.dashcomp.chart.refresh();
    },2500);

and in my child:

@ViewChild('linechart') chart: UIChart;

As I said, I never rly worked with @ViewChild before and I dont think I understand it that well by now, so if any of you guys has an idea, I'd appreciate it, if you'd talk to me as if I'm stupid! :D

Thanks in advance!

Upvotes: 3

Views: 8456

Answers (4)

Harsha
Harsha

Reputation: 21

Now it is available under

import { UIChart } from 'primeng/chart';

refresh() is another alternative to update.

Upvotes: 1

Vanshaj Rai
Vanshaj Rai

Reputation: 117

While changing the graph type, Below code work for me.

    HTML :
    
    <select class="form-control type-selection" (change)="onSelection($event)" style="position: absolute;">
    <option *ngFor="let item of ntwdata" [value]="item.value">{{item.label}}</option> 
    </select>
    <p-chart #linechart  type="line" #linechart id="linechart" [data]="ntwdata [options]="options"></p-chart>


Component :




import { NTWDATA } from '../resources/mock/chartdata'
import { UIChart } from "primeng/components/chart/chart";

@ViewChild('chart', { static: false }) chart: UIChart;
type: any = 'doughnut';
graphType: any;

ngOnInit() {    
    this.ntwdata = NTWDATA ;
    this.graphType = [
      { value: 'doughnut', label: 'doughnut' },
      { value: 'pie', label: 'pie' },
      { value: 'line', label: 'line' }
    ];
  }

onSelection(event) {
    this.type = event.target.value;
    this.ntwdata.type = this.type; //doughnut, Pie, Line
    setTimeout(() => { 
      this.chart.reinit();
    }, 100);
  }
Once you set the value, keep reinit() inside setTimeout method.

Upvotes: 0

Shashikant Pandit
Shashikant Pandit

Reputation: 2834

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

then in your angular component 

import { UIChart } from "primeng/components/chart/chart";

get the view ref (change "chart" reference) 

@ViewChild("chart") chart: UIChart; 

this.chart.reinit();

after you set the values.

Upvotes: 3

Shashikant Pandit
Shashikant Pandit

Reputation: 2834

update labels and datasets also.

this.chart.data.labels = labels;
this.chart.data.datasets = datasets;

try setting a timeout on chart.refresh() with a delay of few seconds 100ms or 1 200ms.

It works for me.

Upvotes: 1

Related Questions