phyphoxで記録した3軸加速度センサーのデータをGoogle Chartsでプロット

phyphox(Physical Phone Experiments)で3軸加速度センサーのデータを記録し、Google Chartsでプロットしました。

1. phyphoxで下の図の緑の枠のボタンを押し、最後の宛先にデータを受信するメールアドレスを入力してメールを送信します。(メール添付でエクセルフォーマットのデータを送信する手順の例になります。)

2番目の画像で▶ボタンを押してから3番目の画像で停止ボタンを押すまでの3軸加速度センサーのデータが記録されます。 (記録されるのは重力加速度 g を含む3軸加速度センサーのデータです。)

3軸加速度センサーのデータを記録している間にスマートフォンを持って歩き、歩行中の3軸加速度センサーのデータを記録します。

2. 記録したデータをGoogle Sheetsにアップロードし、Google Chartsでデータを読み込んでプロットしました。

3. 記録したデータをGoogle Sheetsにアップロードし、Google Chartsでデータを読み込んでプロットする手順

3.1. Chrome等のブラウザでGoogleアカウントにログインし、Google Spreadsheetのページを開きます。

3.2. Google SheetsでphyphoxからexportしたExcelファイルを下記の手順で開きます。

3.2.1.ファイルを開くを選択

3.2.2.アップロードタブを選択

3.2.3.PC等に保存しておいたphyphoxのデータファイルを選択

3.2.4.下の図のようにphyphoxで記録したデータが表示されます。

3.3. phyphoxのデータファイルを下記の手順で外部から参照できるようにします。

3.3.1.共有をクリックします。

3.3.2.「リンクを知っている全員に変更」をクリックします。

3.3.3.「リンクをコピー」をクリックします。

3.3.4.完了をクリックします。

3.4. 例えばこちらのBlogのような方法でJavaScriptをWordPressのページに表示します。

この投稿では下記のようなJavaScriptを使用しました。google.visualization.Queryに渡すURLは、3.3.3.でコピーしたGoogle SheetsのURLになります。

<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(Spreadsheet);

function Spreadsheet() {
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1A_F9RsIRu9p38z1xEru5t10_MlN8TN1hx0Fv5yaIBAI/edit?usp=sharing');
  query.send(drawChart);
}

function drawChart(response) {
  const data = response.getDataTable();
  const options = {title: 'phyphox 3-axis acceleration sensor data',
                             hAxis : {title: 'time[s]'},
                             vAxis : {title: 'acceleration [m/s^2]'}
                             };
  const chart = new google.visualization.LineChart(document.getElementById('phyphox_g_line_chart'));
  chart.draw(data, options);
}

</script>

下の図のようなグラフが表示されます。

Leave a Reply