How to Push data dynamically from firebase to bar graph in angular

Question

Html File:

<div>
<div class = "container" >
  <div style="display: block" >
    <canvas baseChart 
    [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)">

    </canvas>
  </div> 

I want to show count of how many type of call(incoming,missed,outgoing)is there,data on graph, problem is it is not pushing in barChartData[] array. Data is stored in firestore, I'm able to retrieve it,also it's showing in console. If I pass static data it's coming perfect.While dynamic is not coming. Here they return number of type of calls being made. If anyone has some idea about this, do help please. Thank you

import { Component, OnInit} from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/observable';

export interface Post {
  callType: string;
  ...
}
@Component({
  selector: 'app-screen2',
  templateUrl: './screen2.component.html',
  styleUrls: ['./screen2.component.scss'],
})

export class Screen2Component implements OnInit {
postsCol: AngularFirestoreCollection<Post>;
posts: Observable<Post[]>;

 public barChartOptions: any = {
   scaleShowVerticalLines: false,
    responsive: true,
  };

  public barChartLabels  = [ "incoming" , "missed" , "outgoing"];
  public barChartType  = 'bar';
  public barChartLegend = true;
  inco: any ;
  miss: any ;
  outg: any ;
    ab: any;
    bc: any;

  public barChartData: any[] = [
  {data: [], label: 'calls'}
];
isDataAvailable: boolean = false;

public chartClicked(e: any): void {
  console.log(e);
}

public chartHovered(e: any): void {
  console.log(e);
}
constructor(private db: AngularFirestore) {}
  ngOnInit() {

    let i;
    this.postsCol = this.db.collection<Post>('ana', ref => ref.orderBy('callType'));
    this.postsCol.valueChanges().subscribe(daa => {

for(i=0; i <= daa.length; i++) {
           this.ab = (daa[i].callType);
           if(this.ab == 'INCOMING'){
             this.inco = this.ab;
             console.log(this.inco)
          }
           if(this.ab == 'OUTGOING'){
             this.outg = this.ab
             console.log(this.outg)
           }
           if(this.ab == 'MISSED'){
            this.miss = this.ab
            console.log(this.miss)
       }

this.barChartData = [
            { data: [this.inco, this.miss, this.outg], label: 'calls'}
          ]
}
}

Answer 1

You have to create a config variable like this:

public config = {
    type: 'bar',
    legend: true,
    data: {
      labels: [ "incoming" , "missed" , "outgoing"],
      datasets: [{
        label: 'calls',
        data: []
      }]
    }
  }

In your html file, put this:

<div style="display: block">
   <canvas id="canvas" style="display: block"></canvas>
</div>

In the ngOnInit() function do this (variables ctx and myBarChart must be defined earlier):

this.ctx = document.getElementById('canvas') as HTMLCanvasElement
this.myBarChart = new Chart(this.ctx.getContext('2d'), this.config)

When you want to update the data, you can do it this way:

this.myBarChart.data.datasets[0].data = your_firebase_data;
this.myBarChart.update()

Cheers