Creating a real time line chart using chartjs and firebase realtime db

by

2👍

✅

So what happen here is you only call this function once cause you made a promise.
What you have to do is use an observer. An observer will return the value and the changed value of the socket with the valueChanges option of firebase. To do this you have to change your services:

fetchHourlyMessages(orgName:string){
  return this.db.list(orgName + '/stats/messages/hourly/', ref => ref.orderByChild("messages").limitToLast(12))
}

And on your ngOnInit:

  this.dataSvc.fetchHourlyMessages(this.core.orgName).valueChanges().subscribe((resp: any) => {

    for(let key of Object.keys(resp)){
      this.chartData[0].data.push(resp[key].messages)
      let hour = resp[key].hour
      this.chartLabels.push(hour)
    }
    this.chart.chart.update()
  });

Leave a comment