Firebase javascript

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

投稿日:

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

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

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

CloudFirestoreからのデータ取得


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

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

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

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

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

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

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

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

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

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

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

グラフ描画


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

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

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

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

ソースコード


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

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

以上。

-Firebase, javascript

Copyright© IT系でないエンジニアの転身 , 2020 All Rights Reserved Powered by STINGER.