Use json data from firebase into chart.js

Use json data from firebase into chart.js
0

#1

hai, sorry for my bad english.
so i just finish to create simple app using raspberry and firebase, but i still confuse about visualize my data, especialy for temperatur data in bar graph or line grap. can someone help me to add firebase data into chart.js to visualize my temperature data ??
this is my data : https://skripsi-adeguntoro.firebaseio.com/sensor.json
i really really appreciate your help,
thanks,
Ade.


#2

Simple. 1) Fetch data, 2) use data:

fetch("https://skripsi-adeguntoro.firebaseio.com/sensor.json")
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw response;
  })
  .then(data => {
    console.log(data);
    //do stuff with your data here
  })
  .catch(error => console.log(error));

#3

okay, i try new code, it can show me data using this code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
    <style>
        canvas{
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            }
        </style>
    </head>
    <body>
        <div>
            <canvas id="myChart"></canvas>
        </div>
        <script>
            $.getJSON("https://skripsi-adeguntoro.firebaseio.com/hari.json", function (json) {
            //$.getJSON("https://skripsi-adeguntoro.firebaseio.com/sensor.json", function (json) {
                console.log(json);
                var labels = json.map(function(item) {
                    return item.time;
                });
                var data = {
                    labels: labels,
                    datasets: [
                        {
                            label: "My First dataset",
                            fillColor: "rgba(220,220,220,0.5)",
                            strokeColor: "rgba(220,220,220,0.8)",
                            highlightFill: "rgba(220,220,220,0.75)",
                            highlightStroke: "rgba(220,220,220,1)",
                            data: [1,2,3,4,5]
                        }]
                };
                var ctx = document.getElementById("myChart").getContext("2d");
                ctx.canvas.width = 1000;
                ctx.canvas.height = 800;
                var myChart = new Chart(ctx).Bar(data);
            });
        </script>
    </body>
</html>

but it only show me time, and i still dont understand to change “data=[ ]” with temp value in firebase.
if i use hari.json, it will show me time, but when i use sensor.json, it wont show me anything, just white image.
i’m i doing something wrong with it ?


#4

Since I have no idea what this data is or what you’re trying to accomplish, I can’t help you. You’ll have to review the data you’re using and refer to the Chartjs documentation.


#5

sorry for missuderstood question.
the main goal is i can read my temp value and put it on chart.js, at this time i can do it right now. but i still confuse about push key.
if i’m not use push key/uniqued id, i can retive all my data in chart js, but if i use push key, it just loaded as object, not array. chart.js only load data in array.
so, i must replace push key with number from 0, to read all my data in array.
yeah, i know, it confusing.
how i know is it array or not, well i use firefox console, and it show me different result.