HTMLでリアルタイムグラフを作りたい

ラズベリーパイで温度データを取っていて、
CSV形式で５分ごとに保存しています。

これをHTMLで表示できるリアルタイムグラフにしたいのですが
やり方がわかりません。

よろしくお願いします。

No.1 回答者： fujillin 回答日時： 2017/11/28 10:44

こんにちは

HTMLということはWebサイト上でリアルタイムに表示したいということと解釈しました。

＞CSV形式で５分ごとに保存しています。
とのことですので、csvデータの更新の仕組みはできているものとします。
大雑把に考えると、HTML側からは
　・定期的（5分程度間隔で）にデータを読みに行き
　・その内容をグラフに反映する
機能が必要になります。

これらを実現するのには何らかのプログラムが必要になりますので、HTMLだけでは無理ですがjavascriptなどを利用することで実現できると思います。
そのままぴったりのものはないかも知れませんが、似たような機能をサポートするライブラリは数多く作成されていますので、それらを利用することで比較的実現しやすくなるとはいえるでしょう。

データをグラフ化するには、canvasやSVGを利用して表示している例が多いと思いますが、その際の補助をしてくれるライブラリはたくさんあります。
表示したい内容によっては向き不向きがあるかも知れませんが、以下、ご参考までに。
http://tokkono.cute.coocan.jp/blog/slow/index.ph …
http://www.fwoabw.info/entry/2013/09/24/008062

もう一方で、データを定期的に読みに行くことも必要ですが、技術的にはajaxという手法（=サーバと通信する方法の一つ）を利用することで可能です。
ajax用のライブラリもいろいろ作成されてはいますが、それぞれを別個に利用するよりも。グラフ用のライブラリの中でajaxもサポートしているものを利用するのが簡単だと思います。

一例として、データ可視化を目的とした、D3.jsの例を。
以下の例では、CSVを読み込んで、様々な見せ方をしています。
https://bl.ocks.org/mbostock/1256572
D3の本家のサイト
https://d3js.org/


大雑把な方法としてはこんな感じだと思いますが、
＞やり方がわかりません。
というご質問のレベルから考えると、相当にハードルが高いかも知れません。

この回答へのお礼

詳しい回答ありがとうございます。

Googlechartでグラフ表示まではできますが
動くグラフを書きたかったので、今回質問させて頂きました。
いろいろな方法があり、何が最適か分からず途方にくれてましたが、
上記のものを一通りやってみます！

お礼日時：2017/11/28 11:10