mercredi 21 novembre 2018

Updating chart.js in Angular

I want to create a chart by add labels and data from an API and update this one.

I create a method addData() in charts.component.ts that looks in this way:

 addData(chart, labels_builds,labels_data){
     chart.data.labels.push(labels_builds);
     chart.data.datasets.data.forEach(dataset => {
        dataset.data.push(labels_data);
     });
     chart.update();
 }

This will be call here:

getMisraLintChart(projectVariantId: number,filterType : string, filterValue: string): void {
    this.chartService.getMisraLintChart(projectVariantId, filterType, filterValue)
    .subscribe(pageChart =>{
        this.chartMisraLint = pageChart
      this.addData(this.myChart,pageChart.build,pageChart.data);
        })
    } 

In ngOnInit() i have this code:

ngOnInit() {
   this.getFilters();

   var ctx = document.getElementById("myChart");
   this.myChart = new Chart(ctx, {
   type: 'bar',
   data: {
       labels: [],
       datasets: [{
           label: '# of Total Messages',
           data: [],
          backgroundColor:'#ffe4c9',

       }]
   },
   options: {
       scales: {
           yAxes: [{
               ticks: {
                   beginAtZero:true,

               }
               ,
               scaleLabel: {
                 display: true,
                  labelString: 'Total Messages'
               }
           }]
           ,
           xAxes: [{
             scaleLabel: {
               display: true,
                labelString: 'Builds'
             }
           }]
       }
   }
});

I get the error :ERROR TypeError: Cannot read property 'forEach' of undefined.

If anyone could push me in the right direction, it would be greatly appreciated!




Aucun commentaire:

Enregistrer un commentaire