Error displaying canvas on html based on firebase data

user_14742112 0
Viewed 67

Pretty sure I'm doing the right things but the graph displaying based on real time database value just doesn't shown out. The first image for my realtime database and demostration as shown in img 2 and img 3 . Basically the data is captured but it doesn't appear on img 2.
https://imgur.com/0Lfei6p
https://imgur.com/piCJhRl
https://imgur.com/kCJIYAR

<script>
window.onload = function () {

var dps = []; // dataPoints
var chart = new CanvasJS.Chart("chartContainer", {
    title :{
        text: "Dynamic Data"
    },
    data: [{
        type: "line",
        dataPoints: dps
    }]
});

var xVal = 0;
var yVal = 0;
var updateInterval = 1000;
var dataLength = 20; 


var updateChart = function (count) {
    
    
    count = count || 1;

    for (var j = 0; j < count; j++) {
        
    
    firebase.database().ref('users/00/0010').on('value', function(snap)
    {
        yVal=snap.val().a;
    });
    
        
        dps.push({

            x: xVal,
            y: yVal
        });

        xVal+=1;
        
        
    }

    if (dps.length > dataLength) {
        dps.shift();
    }

    chart.render();
};

updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);

}
</script>
canvasjs firebase-realtime-database firebase html javascript
1 Answers

Based on the screenshots shared ultra1 has a string value. CanvasJS y-value can only be number. Converting ultra1 to number while passing it to y-value should work fine in this case. Below is the an example.

var jsonData = [{"led":"-1","sound":"", "time":"1","ultra1":"529.0", "ultra2":" ", "wastageType":"pee-clear"}];

var dataPoints = [];

for (var i = 0; i <= jsonData.length - 1; i++) {
  dataPoints.push({y: Number(jsonData[i].ultra1) }); //Convert String to Number
}

var chart = new CanvasJS.Chart("chartContainer", {
  data: [{
    dataPoints: dataPoints
  }]
});

chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 180px; width: 100%;"></div>

user_58088970
Related