人気記事

Firebase javascript

Cloud Firestoreから取得したデータをjavascriptでグラフ描画する

投稿日:

Cloud Firestoreに格納したデータからグラフ描画した結果をweb表示できるようにしてみます。

今回はweb公開前のローカル環境で試すところまで行い、次回にFirebaseにホスティングしてweb公開します。

下記のようなグラフを作成します。

CloudFirestoreからのデータ取得


まず、FirebaseをJavaScriptで扱うために 扱うために公式サイトに則り作業します。

Cloud Firesotreを初期化します、とありapiKey等の入力が必要となります。

apiKeyはアプリのSettingにありましたのでコピーして<body>直下に貼り付けます。

firebaseConfigにプロジェクト固有のIdが記載されます。

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyAQqLSbL5M4C06BW65TM92XXXXXXXXXX",
    authDomain: "bme280-sample-XXXXX.firebaseapp.com",
    databaseURL: "https://bme280-sample-XXXXX.firebaseio.com",
    projectId: "bme280-sample-XXXXX",
    storageBucket: "bme280-sample-XXXXX.appspot.com",
    messagingSenderId: "124284145620",
    appId: "1:124284145620:web:2c0a207bb27ea9dfc8d041",
    measurementId: "G-R800M152XD"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

これでFirebaseの設定はできましたので、今度はCloudFirestoreも使えるよう<body>直下に以下を追記します。

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

これでCloudFirestoreも使えるようになりましたので、続いてデータベースから必要なデータを取得します。

今回使用するCloudFirestoreのデータ構造は以下となっています。

そこから、気温データtempatureをdataTという配列に、湿度データhumidityをdataHという配列に、時刻データrecord_timeをtimestampという配列に格納してみます。

最新の10サンプルのみを抽出するためにCloudFirestoreのクエリであるlimitとorderByを使用しました。

クエリについては公式サイトに記載があります。

var db = firebase.firestore();

        db.collection("bme280")
          .limit(10)
          .orderBy("record_time", "desc")
          .get().then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
              dataT.push(doc.data().tempature);
              dataH.push(doc.data().humidity);
              timestamp.push(doc.data().record_time); 
            });
         })

これでデータベースの値を取得できましたのであとはグラフに描画します。

グラフ描画


グラフの描画には「chart.js」を使います。

そのために<head> 部に以下のスクリプトを記載します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

また、canvasを設定するため<body>部に以下のスクリプトを記載します。

<canvas id="myLineChart"></canvas>

以下が折れ線グラフを描画するスクリプトです。

        var ctx = document.getElementById("myLineChart");
        var myLineChart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: strtime.reverse(),
            datasets: [
              {
                label: '気温',
                data: dataT.reverse(),
                borderColor: "rgba(255,0,0,1)",
                backgroundColor: "rgba(0,0,0,0)"
              }
            ],
          },
          options: {
            title: {
              display: true,
              text: '気温'
            },
            scales: {
              yAxes: [{
                ticks: {
                  suggestedMax: 40,
                  suggestedMin: 0,
                  stepSize: 10,
                  callback: function (value, index, values) {
                    return value + ''
                  }
                }
              }]
            },
          }
        });

ソースコード


全体のソースコードは以下となります。

index.htmlに作成してブラウザで読み込めばグラフが表示できます。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>LineChartサンプル</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
</head>

<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-firestore.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyAQqLSbL5M4C06BW65TM92qrupBFykmdUQ",
    authDomain: "bme280-sample-517b6.firebaseapp.com",
    databaseURL: "https://bme280-sample-517b6.firebaseio.com",
    projectId: "bme280-sample-517b6",
    storageBucket: "bme280-sample-517b6.appspot.com",
    messagingSenderId: "124284145620",
    appId: "1:124284145620:web:2c0a207bb27ea9dfc8d041",
    measurementId: "G-R800M152XD"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

</script>

  <h1>折れ線グラフ</h1>
  <div class="chart-container" style="position: relative; width: 800px;">
    <canvas id="myLineChart"></canvas>
  </div>
  <div>
    <script type="text/javascript">

      var db = firebase.firestore();
      var dataT = [];
      var dataH = [];
      var timestamp = [];
      var strtime = [];

      function readfirestore() {

        db.collection("bme280")
          .limit(10)
          .orderBy("record_time", "desc")
          .get().then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
              dataT.push(doc.data().tempature);
              dataH.push(doc.data().humidity);
              timestamp.push(doc.data().record_time);
              
            });

            //unixtime to string
            for (let i = 0; i < timestamp.length; i++) {
              let dateTime = new Date(timestamp[i].seconds * 1000);
              strtime.push(dateTime.toLocaleString());
            }

            viewChart();
            
          }
          )
      }

       function viewChart() {
        var ctx = document.getElementById("myLineChart");
        var myLineChart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: strtime.reverse(),
            datasets: [
              {
                label: '気温',
                data: dataT.reverse(),
                borderColor: "rgba(255,0,0,1)",
                backgroundColor: "rgba(0,0,0,0)"
              }
            ],
          },
          options: {
            title: {
              display: true,
              text: '気温'
            },
            scales: {
              yAxes: [{
                ticks: {
                  suggestedMax: 40,
                  suggestedMin: 0,
                  stepSize: 10,
                  callback: function (value, index, values) {
                    return value + ''
                  }
                }
              }]
            },
          }
        });
      }

    readfirestore();    
 
    </script>

  </div>
</body>

</html>

以上。

-Firebase, javascript

Copyright© ITエンジニアへの転身 , 2024 All Rights Reserved Powered by STINGER.