Angular 2/PrimeNg - Update Chart via @ViewChild

Question

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!

Answer 1

<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.