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

Javascriptのリファレンスはこちらを見てる。
古い人間なので本を買って勉強したいところだけど、
オンラインで凄いボリュームがあってありがたいです。

https://developer.mozilla.org/ja/docs/Web/JavaScript

Javascriptはちょっとしか書いたことがないので、文法が良く分からない。
簡単なことを試すのは、

p5.js

が便利。ブラウザ上で、書いて動かして文法確認できる。
editorに行ってコード書いて動かすと、別に画面表示無くてもコンソールに出力ができるので、文法確認したり、オブジェクトや配列や、関数の動作を確認するのにいいです。

Javascriptとphpを簡単に書いてみてIoTでデータ可視化できるようにしてみた。
X軸に対してY1,Y2の2本分のデータをくっつけたURLを送るとデータがテキストファイルに追記されるphpを書いてデータを送る。

https://cpu4edu.net/ひみつ/dataひみつlog.php?x=10&y1=12&y2=14

さっき書いた、JavaScriptでテキストファイルを読み込む方法のところでサンプルを利用して、追記したデータファイルを読み込む。
そのデータを plotlyに送ってプロットするjavascriptを書いた。

セキュリティ考慮してないので、コードはここでは書きません。

以下のサイトで紹介されてることをやってみた。

JavaScriptでテキストファイルを簡単に読み込む方法7選
https://jp-seemore.com/web/3855/

この中でFetch APIを使った方法が簡単そうだけど、loadボタンは要らないのでその部分を除いてみて、ウインドウがロードされたときに起動するようにしたら動いた。

外部のサービスを利用してデータを可視化する方法をいくつか試したけど、
もっと簡単に実験するには、自分のサーバーに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 も試したら動いた。