Firebase Data Chart.js

Glitch Help
1

Hi guys,
I have faced some problems in generating a graph through the firebase real time data. I am unable to retrieve the data from firebase and come out with real time plot. May I know that is there any wrong coding from my script to retrieve the data from firebase?

Source code:

  <canvas id="Chart" width="20" height="20"></canvas>
  <script>
      var ctx = document.getElementById('Chart').getContext('2d');
  var Chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['value'],
    datasets: [{
        label: 'Energy',
        data: [0],
        backgroundColor: 'transparent',
        borderColor: 'red',
        borderWidth: 2
    }]
  },
  options: {
    elements:{
      line:{
        tension:0
      }
    },
      scales: {
          y: {
              beginAtZero: true
          }
      }
  }
  });

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

  function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
  }


  var config = {
    apiKey: "xxxx",
    authDomain: "xxxx",
    databaseURL: "xxxx",
    projectId: "xxxx",
    storageBucket: "xxxx",
    messagingSenderId: "xxxx",
    appId: "xxxx"
  };

  firebase.initializeApp(config);
   
 var valueRef = firebase.database().ref('ESP32');
  valueRef.on('child_added', (snapshot) => {
    var firepower = snapshot.val().Power;
    var time = snapshot.val().time;
    addData(myChart, time, firepower);
  });
           
  </script>
</div>
2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.