WebシリアルAPI＋Chart.js ＋USBシリアルI2C変換基板

今回はWebシリアルAPIを用いたツールの応用編として、Chart.jsを組み合わせてみました。USBシリアルI2C変換基板を介してI2Cデバイスをブラウザから制御、取得したデータからChart.jsで可視化するデモツールを実装してみました。実際に作成したツールをgithub.ioに公開しています。

温度湿度センサSHT31、温度湿度気圧センサBME280について、2秒間隔でデータを取得し、取得したデータをChart.jsで可視化するツール(SHT31用、BME280用)を実装してみました。

データはサーバ等を介さずにブラウザ内で保持され、そのままグラフ化しています。そのたえめ、オフライン環境でも一度、Chart.jsライブラリ含めてダウンロードすれば、オフライン環境でも動作可能です。また、ブラウザ内で保持された変数をcsvとして出力できる機能も合わせて実装してみました。

初めてChart.jsを使ってみましたが、最近のバージョンではAPIの仕様が変わっているようで少し実装に戸惑いました。例えば、各軸の軸ラベルはxAxes、scaleLabelではなく、下記のx、title、textのようにChart.jsバージョン3.xから変更になっているようです。

let options = {
 scales: {
  x:{title:{display: true, text: 'x軸'}},
  y:{title:{display: true, text: 'y軸'}}
 },
 plugins:{legend:{display: false}}
};

また、グラフのデータをクリアする場合はchartXX.destroy()では再度、グラフ設定や軸のオプション等を設定し直す必要があります。そのため、単に描画のみをクリアする場合は下記のようにグラフデータの変数をx軸、y軸ともに配列をクリアして、グラフ更新すると簡単にクリアできることが分かりました。

data.labels=[];
data.datasets[0].data=[];

chartXX.update();

その他、I2Cデバイスのレジスタアドレスを指定した読み書きのツールも実装してみました。

Chart.js等と組み合わせて簡単にグラフを描画できるのはWebAPIならではの活用だと思いました。今後は他のライブラリやAPI、センサ等にも対応したいと思います。