[Vuejs]-Chart.js is not Dynamically Updating when the firebase databse is updating. (Vue.js)

by

0👍

The Chart isn’t updating because you are not updating chartData anywhere you are just setting it once in mounted then nothing. you need to update it every time you update values and timelabels maybe like this:

mounted() {
    this.chartData = {
        labels: this.timelabels,
        datasets: [
        {
            label: "Water Level ",
            borderColor: "white",
            fill: false,
            borderWidth: 1,
            data: this.values
        }]
    }
        firebase.database().ref("level").limitToLast(10)
        .on("child_added", snap => {
             this.values.push(snap.val().Water_Level)
             this.chartData.labels = this.values
         });
        firebase.database().ref("level").limitToLast(10)
        .on("child_added", snap => {
             this.timelabels.push(snap.val().Time)
             this.chartData.datasets[0].data = this.timelabels
         });        
      }

As for why the chart disappears when refreshing the page? because of the error cannot read property "skip" of undefined my biggest guess is because you are setting chartData: null at the beginning. define it like this

chartData: {
    labels: [],
    datasets: [{}]
  }

Leave a comment