Javascript realtime charts with firebase

Question

My father asked me if I can make our motor home more smarter, by adding a Arduino connected to Firebase to check the water tank and propane tanks, so he can look at his phone to see when the tank is full or not.

I already displayed real time firebase to an webview app, which works absolutely great! but right now it only projects a plain text and I want it to display it as a single vertical bar, which changes real time, whats the best way I can do this? I already looked at chart.js but I couldn't find a way to make it real time and a single bar perhaps you could help me.

Can you pls confirm that you use the Realtime Database and not Firestore? — Renaud Tarnec, Aug 09 '19 at 10:08
Also, do yo confirm you just want to show one vertical bar (which height is function of field in the database)? and not a full bar chart. — Renaud Tarnec, Aug 09 '19 at 10:10

Renaud Tarnec · Accepted Answer · 2019-08-09T12:00:53.860

You can easily reach your goal by using Chart.js (more precisely a Bar Chart) and a Firebase Realtime Database listener.

The code below will display a vertical bar that will be adapted each time the value of the arduinoValue root node changes in the database.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chart</title>

    <script src="https://www.gstatic.com/firebasejs/6.3.5/firebase.js"></script>

    <script src="Chart.js"></script>

    <script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-database.js"></script>

</head>
<body>

<canvas id="myChart" width="200" height="200"></canvas>
<script>


    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Value',],
            datasets: [{
                label: '# of Whatever',
                data: [0],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        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();
    }


    //Firebase code
    //Config values to ba adapted!
    var config = {
        apiKey: "xxxxx",
        authDomain: "xxxxx",
        databaseURL: "xxxxx",
        projectId: "xxxxx",
        storageBucket: "xxxxx",
        messagingSenderId: "xxxxx"
    };

    firebase.initializeApp(config);

    var valueRef = firebase.database().ref('arduinoValue');
    valueRef.on('value', function(snapshot) {
      removeData(myChart);
      addData(myChart, "1", snapshot.val());
    });


</script>

</body>
</html>

It's up to you to format the chart the way you want!

PS: to manage the size of the chart, see Charts.js graph not scaling to canvas size

Thank you so much, it works! I only have one question, is there a way how I could configure it to something like this (its a rough skectch.) http://prnt.sc/oqq06q — Branco, Aug 09 '19 at 21:45

score 0 · Answer 2 · answered Aug 09 '19 at 10:34

0

Use Highcharts to work with the live data feed.

Useful Links:

High Chart Live Data

HighCharts

answered Aug 09 '19 at 10:34

huzaifamandviwala

415
2
5

Javascript realtime charts with firebase

2 Answers2