【Javascriptでグラフ表示】Spreadsheetに保存した温度・湿度データをブラウザ上で表示する方法

このブログでは、温度と湿度のデータをリアルタイムでグラフに表示するウェブページの作成方法を紹介します。このウェブページは、Google Chartsを使用してデータを視覚化し、外部のGoogle Apps Scriptから取得したデータを1秒ごとに更新します。初心者の方でも理解しやすいように、プログラムの全文と詳細な説明を提供します。

アイコン名を入力

・温度と湿度のデータをリアルタイムで視覚的に表示する方法を知りたい。
・Google Chartsを使ったデータの視覚化方法がわからない。
・ブラウザ上でグラフで視覚化する方法を知りたい。

このブログで解決できること

Google Chartsを使って温度と湿度のデータをリアルタイムでグラフに表示する方法を学べる。
外部のAPIから非同期でデータを取得し、それをグラフに描画する手順を理解できる。
リアルタイムでデータを更新するウェブページの作り方を学べる。

動画でも紹介しているので、興味がありましたら見てください。

Contents

スプレッドシートから描画するプログラムの内容
1. GASプログラムの全文
2. Java scriptの内容

🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円で受講できるチャンスです。エンジニア転職を考えている方やプログラミングに興味がある方、新しいスキルを習得したい方に特におすすめです。

スプレッドシートから描画するプログラムの内容

今回の内容は、スプレッドシートに記載した内容されたデータの読み込みを行います。GASのプログラムは下記のようになっています。プログラムの中で、doGetでデータ記録処理を呼び出す、“record”と”retrieve”を設定しています。このretrieveに該当する内容、今回はスプレッドシートに記載された内容をJSON形式で応答する処理を行っています。

スプレッドシートには、下図のようにESP32で取得された時刻・気温・湿度のデータが入っています。

スプレッドシートのurlを自分のスプレッドシートのURLに変更します。下記kのYour Sheetに記載されている内容を変更します。d/~~/editの間の内容をコピーして貼り付け。

// スプレッドシートのURL
const url = “https://docs.google.com/spreadsheets/d/Your Sheet ID/edit#gid=0″;

変更・コピーしたら、GASプログラムYour Sheet IDを下記変えます。

GASプログラムの全文

GASプログラムを設定するため、Apps Scriptを選択します。

選択したら、Sheed IDを自分のIDに変更して、下記プログラムを記載します。

// HTTP GETリクエストを処理する関数
function doGet(e) {
  // リクエストのパラメータに基づいて処理を分岐
  if (e.parameter.action === 'record') {
    // 'record'アクションの場合、データ記録処理を呼び出す
    return recordData(e);
  } else if (e.parameter.action === 'retrieve') {
    // 'retrieve'アクションの場合、データ取得処理を呼び出す
    return retrieveData();
  } else {
    // どちらのアクションにも該当しない場合、無効なリクエストとして応答
    return ContentService.createTextOutput("Invalid request");
  }
}

// データ記録を行う関数
function recordData(e) {
  // スプレッドシートのURL
  const url = "https://docs.google.com/spreadsheets/d/Your Sheet ID/edit#gid=0";
  // URLからスプレッドシートを開く
  const ss = SpreadsheetApp.openByUrl(url);
  // スプレッドシートの最初のシートを取得
  const sheet = ss.getSheets()[0];
  // パラメータとして受け取ったデータをオブジェクトに格納
  const params = {
    "timestamp": new Date(), // 現在の日時
    "temperature": e.parameter.temperature, // 温度
    "humidity": e.parameter.humidity // 湿度
  };
  // シートの最後に新しい行としてデータを追加
  sheet.appendRow(Object.values(params));
  // 処理完了の応答を返す
  return ContentService.createTextOutput('Data recorded');
}

// データ取得を行う関数
function retrieveData() {
  // アクティブなスプレッドシートのアクティブなシートを取得
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  // シートの全データ範囲を取得
  var data = sheet.getDataRange().getValues();
  // 取得したデータをJSON形式に変換
  var jsonData = JSON.stringify(data);
  // JSON形式のデータを応答として返す
  return ContentService.createTextOutput(jsonData)
    .setMimeType(ContentService.MimeType.JSON);
}

貼り付け後、新しいデプロイを行います。

デプロイ後、ウェブアプリで公開するユーザーを全員にしたうえ、デプロイIDをコピーします。

デプロイIDをコピーした後、javascriptでこのデプロイIDを使用して、スプレッドシートにアクセスする処理を行います。

Java scriptの内容

JSON形式で応答したデータを、Javascriptで描画している処理が下記になります。

Your デプロイIDの部分を自分のデプロイIDに修正してください。

<!DOCTYPE html>
<html>
  <head>
    <!-- Google Chartsライブラリの読み込み -->
    <!-- この部分では、グラフを描画するために必要なGoogle ChartsライブラリをWebページに読み込んでいます。 -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        fetchDataAndDrawChart();
        setInterval(fetchDataAndDrawChart, 1000);
      }

      function fetchDataAndDrawChart() {
        // 外部のGoogle Apps Scriptからデータを非同期で取得
        fetch('https://script.google.com/macros/s/Your デプロイID/exec?action=retrieve')
          .then(response => {
            if (!response.ok) {
              throw new Error('Network response was not ok: ' + response.statusText);
            }
            return response.json();
          })
          .then(data => {
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn('datetime', 'Date');
            dataTable.addColumn('number', 'Temperature');
            dataTable.addColumn('number', 'Humidity');

            // 取得したデータをDataTableに追加
            data.forEach(function(row, index) {
              if (index > 0) {
                var date = new Date(row[0]);
                dataTable.addRow([date, parseFloat(row), parseFloat(row)]);
              }
            });

            // グラフのオプション設定
            var options = {
              title: 'Temperature and Humidity Chart',
              curveType: 'function',
              legend: { position: 'bottom' },
              vAxes: {
                0: {title: 'Temperature (°C)'},
                1: {title: 'Humidity (%)'}
              },
              series: {
                0: {targetAxisIndex: 0}, // Temperatureを左側の縦軸に割り当て
                1: {targetAxisIndex: 1} // Humidityを右側の縦軸に割り当て
              }
            };

            // グラフを描画
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(dataTable, options);
          })
          .catch(error => {
            console.error('Fetch error:', error);
          });
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

このプログラムは、HTMLとJavaScriptを使用して、温度と湿度のデータをグラフに表示するウェブページを作成します。主な機能は以下の通りです。

Google Chartsライブラリの読み込み: ウェブページの<head>部分で、グラフ描画に必要なGoogle Chartsライブラリを読み込みます。
グラフ描画関数の定義と自動更新設定: drawChart関数では、fetchDataAndDrawChart関数を即時に呼び出し、さらに1秒ごとにこの関数を繰り返し呼び出すように設定しています。
データの非同期取得とグラフへの描画: fetchDataAndDrawChart関数では、外部のGoogle Apps Scriptから非同期でデータを取得し、取得したデータをGoogle Chartsを使用してグラフに描画します。

スプレッドシートにデータが入った状態でindex.htmlを開くと下記のようになります。