Plotlyを使ったロギングデータのグラフ表示
このサンプルでできること
- KV-XのロギングCSVをブラウザだけでグラフ表示
- Python不要
- サーバ不要
- 2Dグラフ表示
- 3Dグラフ表示
- 複数ファイル比較
Plotlyを使うメリット
- 無料で利用可能
- ブラウザだけで動作
- ズームや回転が可能
- 2D/3Dグラフ対応
- CSVファイルを簡単に可視化できる
Plotlyを使ってブラウザでグラフ表示
Plotlyはオープンソースのグラフ表示するためのライブラリです。Python、R、JavaScriptなど様々なプログラミング言語で利用できます
今回はJavaScriptでサーバを使わずにPCだけで表示できるようにしました
（ここではネットワーク接続する方法を紹介していますが、ライブラリをダウンロードしてローカルで動作させることもできます）
概略
ロギング機能でCSVファイルに保存したデータをブラウザでグラフ表示する方法を紹介します
スキャン毎に正弦波を２つと三角波を１つ作成してロギングで保存したデータを使います
ロギングの設定は別ページで紹介しています
2Dグラフ表示例
これは正弦波をグラフ表示した例です
3Dグラフ表示例
これは正弦波をX,Y軸と三角波をZ軸にしてZ軸を上下する正弦波をグラフ表示した例です
ロギングの設定
グラフ化したいデバイスまたは変数をロギングの対象とします
ここでは例として位相の違う正弦波をXとYに、三角波をzzに出力しているラダー回路があるとしてロギングします
オプションタブで以下の項目にチェックを入れます
LogGraph.htmlでグラフ表示
ダウンロードしたLogGraph.htmlを開きます
このページは2つのファイルを読み込んで2Dまたは3D表示をして比較することができるようにしています
ここでは１つのファイルのみ表示しています
2D表示
- [ファイルの選択]ボタンを押してロギングで保存したファイルを選択します
- 2D設定のX軸に"DATA No"を、Y軸に"sinwave"を設定します
- [2D表示]ボタンを押すとロギングしたsinwaveの変数の値を下図のグラフで見ることができます
Y軸の値を"trianglewave"に変えて[2D表示]を押すと下図のように三角波がロギングされていることが見れます
3Dグラフ
- 3D設定(FileA)のX軸に"DATA No"を、Y軸に"sinwave"を、Z軸に"coswave"を設定します
- 3D表示ボタンを押すとロギングした値を下図のグラフで見ることができます
X軸を"sinwave"、Y軸を"coswave"、Z軸を"trianglewave"に変えて[3D表示]を押すと下図のように表示されます
LogGraph.htmlについて
この"LogGraph.html"はChatGPTで作成してもらいました
興味のある方はChatGPTに変更箇所などを指定してこのLogGraph.htmlのHTML文をコピペして投げて見てください
ChatGPTへのLogGraph.htmlを作成してもらうためのプロンプト例
LogGraph.htmlの機能
- CSVファイル読み込み
- 2Dグラフ表示
- 3Dグラフ表示
- 2ファイル比較
- 軸選択
- 同スケール比較
- ブラウザのみで動作
