Chartjs-Refresh data in Chart.js when data added in Angular

by

0👍

Firestore collection add() returns a Promise, modify the addBodyMetrics to return promise.

addBodyMetrics(id:string, test:testModel) {
  return this.db.collection('aaCollection')
    .add(test);
}

In onSubmit method, provide the success callback to the promise from this.aaService.addBodyMetrics by calling the getChart method to generate/update the chart.

onSubmit(){
  this.id = this.activatedRoute.snapshot.params["id"]; 
  let aa: aaModel = {
    ID: this.id, 
    xyz: this.testForm.value.xyz,
    abc: this.testForm.value.abc,     
  } 
  this.aaService.addBodyMetrics(this.Id, aa)
    .then(res => {
      console.log('added Successfully');
      this.createChart();
    })   
    .catch((error) => {
      console.log('Error  ' ,error);
    });
}

While in the createChart method, the Observable is asynchronous, you should get the value of Observable returned and initialize the chart data and configuration. Hence, you should move the line from const abc until the end into the subscribe method.

createChart() {    
  this.aaService.getData(this.id).subscribe(
    (aaServ)  => {
      this.data = aaServ;     

      const abc = this.data.map((item) => item.abc); 
      const xyz = this.data.map((item) => item.xyz); 

      if (this.chart)
        this.chart.destroy();

      this.chart = new Chart('MyChart', {
        type: 'line',
        data: {
          labels: abc,
          datasets: [
            {
              label: 'xyz',
              data: xyzLabels,
              backgroundColor: 'red',
            },
          ],
        },
        options: {
          aspectRatio: 2.5,
        },
    });
  });      
}

Leave a comment