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>
以上。