Firebase Google Chart

<html>
<head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

//===============================================================================================================
var firebaseConfig = {
        apiKey: "AIzaSyDzsxMsTq4gkuI2in",
        authDomain: "wt-vstr4.firebaseapp.com",
        databaseURL: "https://wt-vstr4.firebaseio.com",
        projectId: "wt-vstr4",
        storageBucket: "wt.appspot.com",
        messagingSenderId: "109057097119",
        appId: "1:109057097119:web:53d9e3147ae545965591aa",
        measurementId: "G-JJHYS3TN6D"
        };

var rtdb = firebase.initializeApp(firebaseConfig);
rtdb.database().ref('/TMR03/2021/2/1').once('value').then(function(snapshot) {
              temps = snapshot.val();
              console.log(snapshot.val());
              google.charts.setOnLoadCallback(drawChart(temps));
          });

function drawChart(temps) {
              var array = $.map(temps, function(value, index) {return [value]; });
              var data = new google.visualization.DataTable();
              data.addColumn('string', 'Tm');
              data.addColumn('number', 'Rh');
              data.addColumn('number', 'Rt');
              data.addColumn('number', 'T1');
              data.addColumn('number', 'T2');
              var output = [];
              for (var i = 0; i < array.length; i++) {
                  var item = array[i];
                  output.push([
                      item.Tm,
                      parseFloat(item.Rh),
                      parseFloat(item.Rt),
                      parseFloat(item.T1),
                      parseFloat(item.T2)
                  ]);
              }

              data.addRows(output);

              var options = {
                  chart: {
                      title: 'title',
                      subtitle: 'subtitle'
                  },
                  width: 800,
                  height:400
              };

              var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

              chart.draw(data, options);

          }

          google.charts.load('current', {'packages': ['corechart', 'line']
          });

    </script>
</head>

<body>

    <div id="chart_div" style="width: 400px; height: 120px;"></div>

</body>
</html>

ค้นหาบล็อกนี้

การพัฒาโปรแกรมประยุกต์บนอุปกรณ์พกพา

Firebase Google Chart

ความคิดเห็น

แสดงความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

csv to firebase