おびやまロボット研究所ブログ

外部のサービスを利用してデータを可視化する方法をいくつか試したけど、
もっと簡単に実験するには、自分のサーバーにIoTデバイスからデータを送ってファイルに追記して、ファイルをグラフ化して表示できればいいので、サーバーでグラフ表示する方法を探してみた。

参考サイトはこちら。

JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！

ここに紹介されてる中で、
Canvas.js
https://canvasjs.com/
を試す。
サイトに公開されてるサンプルをコピペして、サーバーにアップロードしてそのファイルを表示せると簡単にグラフが出た。

グラフの種類もいろいろ選べるので、ラインチャートを選んで出てくるサンプルをまたコピペしてアップロードして表示。
https://canvasjs.com/html5-javascript-line-chart/

折角なのでふたつ同時に表示させたいと思って、2つのサンプルを一つのファイルにコピペして表示させようとしても後の方の一つしか出ない。
ソースをみたら、

window.onload = function () {

でグラフを表示させてるので、これは複数処理しようとしても後の方で上書きされてしまうらしい。
方法としては、以下のサイトにあるように

【JavaScript】window.onloadを使用した時に動かなかった話
https://note.com/taito_smile/n/ne45d28e4c176

window.addEventListener('DOMContentLoaded', function() {
または
window.addEventListener("load",function() {

に書き換えればよい。
1行そのまま書き換えたらエラー。カッコの数があってないので、最後に）を追加したら動いて、1画面にグラフが２つ表示された。

使い方はなんとなくわかったので、あとは、サーバーにあるファイルを呼び出しながらグラフ化するスクリプトを書けばいい。

googleのチャートはサイトに行ってコピペで動くサンプルがあったのですぐに円グラフが表示できた。
https://developers.google.com/chart/interactive/docs/quick_start?hl=ja

chart.js 　と　plotly.js も試したら動いた。