読者です 読者をやめる 読者になる 読者になる

Kuroyagi飼育日誌

学んだことの備忘録

RubyとJavascriptでグラフを描く【その3】[追記]

【計画最終目標】
□シリアルデータのリアルタイム描画


【計画の中期目標】
csvデータのJavascriptによるグラフ描画
□メモリに格納したデータのJavascriptによるグラフ描画


【直近の課題】
データ処理:Ruby
□シリアル通信機器からのデータ受信・csvへ保存
□シリアル通信機器からのデータ受信・メモリに格納


描画処理:Javascript
csvデータの読み込み
□異なるデータサイズへの対応←思うようにいかなかったので再調査
■描画方法の変更
csvが更新されたらグラフ更新する


バイス関係
■シリアルデータ送信機器の準備
□実際の測定機器におけるシリアルデータのフォーマットを再現する


※□は未完、■は完了項目








Javascriptで異なるサイズのcsvデータを読み込もうと行数を増やしてみましたが上手くいかなかったので調べます。

まず、上手くいかないというのは、行数を元のデータのコピペで2倍にしたデータを描画させようとしましたが以下のようになりました。



【図1: data.csv変更前】
f:id:cocosuzu:20170316195632p:plain



【図2: data.csvを2倍の行数に変更】
f:id:cocosuzu:20170316195702p:plain



全く変わりません…。ページの更新をしても、サーバーをshutdownして再起動しても何も変わりません。


試しにdata.csvファイルを消去して、サーバーを再起動すると…



【図3: data.csv消去状態】
f:id:cocosuzu:20170316195853p:plain



なんと!描けちゃう!笑

どうしてでしょう?もしかしたらキャッシュを読みに行ってしまっている!?

色々探してみた結果!以下のような記事を見つけました。




【記事1】
www.fxug.net




似たような悩みでしょうか!?ただ、私の場合ではどうすればいいか思い浮かばないので、とりあえず立ち上げるサーバーのポートを9000 => 9003にしてみます。



【図4: port 9000 => 9003に変更】
f:id:cocosuzu:20170316202033p:plain



ほっ!描けました!原因はやはり同じポートのキャッシュを読み続けてしまっていることなのですね。

先日はjsファイルのグラフオプションを棒グラフやら折れ線グラフに変更してブラウザをリロードするだけでよかったのですが何の変化があったのでしょうか…分からない。

そして、今の状態だとソースコードを変更するたびにポートを変更しなければ更新できないので、どうにかしなければなりません。

ひとまず自身の状況が分かってきたのでさらにターゲットを絞って調べてみます。




【記事2】
teratail.com

【記事3】
doop-web.com




ふむふむ、呼び出しの部分で差をつけてあげるとキャッシュを読みに行くのを避けられるようです。今のhtmlには以下の呼び出し記述があります。

    <script src="mychart.js"></script>

試しに【記事2】の通りにしてみると…

    <script src="mychart.js?123"></script>

でん!!ダメです!!


【図5: リクエスト末尾変更】
f:id:cocosuzu:20170316203606p:plain



ちなみに更新が反映されているときはコマンドプロンプトはこんな感じです。

[2017-03-16 20:41:34] INFO  WEBrick 1.3.1
[2017-03-16 20:41:34] INFO  ruby 2.3.3 (2016-11-21) [x64-mingw32]
[2017-03-16 20:41:34] INFO  WEBrick::HTTPServer#start: pid=9144 port=9006
::1 - - [16/Mar/2017:20:41:41 東京 (標準時)] "GET / HTTP/1.1" 200 435
- -> /
::1 - - [16/Mar/2017:20:41:41 東京 (標準時)] "GET /mychart.js HTTP/1.1" 200 1479

http://localhost:9006/ -> /mychart.js
[2017-03-16 20:41:41] ERROR `/favicon.ico' not found.
::1 - - [16/Mar/2017:20:41:41 東京 (標準時)] "GET /favicon.ico HTTP/1.1" 404 281

http://localhost:9006/ -> /favicon.ico
::1 - - [16/Mar/2017:20:41:41 東京 (標準時)] "GET /data.csv HTTP/1.1" 200 410
http://localhost:9006/ -> /data.csv


結果は【図4】と同じです。ただ、よくよく見てみるとErrorが出てますね。前回の一番シンプルなやつではどうだったか確認してみると…

[2017-03-16 20:46:22] INFO  WEBrick 1.3.1
[2017-03-16 20:46:22] INFO  ruby 2.3.3 (2016-11-21) [x64-mingw32]
[2017-03-16 20:46:22] INFO  WEBrick::HTTPServer#start: pid=9472 port=9007
::1 - - [16/Mar/2017:20:46:29 東京 (標準時)] "GET / HTTP/1.1" 200 434
- -> /
::1 - - [16/Mar/2017:20:46:29 東京 (標準時)] "GET /mychart.js HTTP/1.1" 200 1479

http://localhost:9007/ -> /mychart.js
[2017-03-16 20:46:29] ERROR `/favicon.ico' not found.
::1 - - [16/Mar/2017:20:46:29 東京 (標準時)] "GET /data.csv HTTP/1.1" 200 233
http://localhost:9007/ -> /data.csv
::1 - - [16/Mar/2017:20:46:29 東京 (標準時)] "GET /favicon.ico HTTP/1.1" 404 281

http://localhost:9007/ -> /favicon.ico

同じく出てますね。わき道にそれますが、このエラーが何なのかくらいは調べておきます。


【記事6】
よくある質問


ブラウザでお気に入り登録するときに表示する小さなアイコンのことらしいです。これは本質には問題ないので放置しておきます。





話を元に戻すと、【記事2】に倣ってmychart.jsの後ろに?123を書き加えたときのコマンドプロンプトは以下のようになりました。まずは未使用portでの結果から。

[2017-03-16 20:58:16] INFO  WEBrick 1.3.1
[2017-03-16 20:58:16] INFO  ruby 2.3.3 (2016-11-21) [x64-mingw32]
[2017-03-16 20:58:16] INFO  WEBrick::HTTPServer#start: pid=4184 port=9008
::1 - - [16/Mar/2017:20:58:28 東京 (標準時)] "GET / HTTP/1.1" 200 439
- -> /
::1 - - [16/Mar/2017:20:58:28 東京 (標準時)] "GET /mychart.js?123 HTTP/1.1" 200
1479
http://localhost:9008/ -> /mychart.js?123
::1 - - [16/Mar/2017:20:58:28 東京 (標準時)] "GET /data.csv HTTP/1.1" 200 410
http://localhost:9008/ -> /data.csv
[2017-03-16 20:58:28] ERROR `/favicon.ico' not found.
::1 - - [16/Mar/2017:20:58:28 東京 (標準時)] "GET /favicon.ico HTTP/1.1" 404 281


表示は【図4】の通り新しいcsvデータの通りになりました。つづいて使用した事のあるポート9000でサーバーを起動し直します。コマンドプロンプトは以下の通りです。

[2017-03-16 21:02:51] INFO  WEBrick 1.3.1
[2017-03-16 21:02:51] INFO  ruby 2.3.3 (2016-11-21) [x64-mingw32]
[2017-03-16 21:02:51] INFO  WEBrick::HTTPServer#start: pid=5140 port=9000
::1 - - [16/Mar/2017:21:02:58 東京 (標準時)] "GET / HTTP/1.1" 200 439
- -> /
::1 - - [16/Mar/2017:21:02:58 東京 (標準時)] "GET /mychart.js?123 HTTP/1.1" 304
0
http://localhost:9000/ -> /mychart.js?123


ブラウザの結果は…



【図6】
f:id:cocosuzu:20170316211315p:plain



なんでぇ!!こちらはdata.csvを読み込んでいません。何でだろう?そもそもrefのファイル名に入れるクエスチョンマークは何なのさ!ということで【記事7】、【記事8】を読みました。



【記事7】
detail.chiebukuro.yahoo.co.jp


【記事8】
www.koikikukan.com



なるほど!これに関しては【記事2】に倣っていても問題はなさそうですね。

色々クエスチョンマークの後ろを変えるとコマンドプロンプトではmychart.js?hogehogeと変わっていくのですが一向にブラウザでの表示は変わらず、csvを読み込みません…


ちなみに、試しにブラウザのキャッシュを消去したところちゃんと新しいcsvで描画されました。コマンドプロンプトの表示は以下の通りです。

[2017-03-16 22:09:57] INFO  WEBrick 1.3.1
[2017-03-16 22:09:57] INFO  ruby 2.3.3 (2016-11-21) [x64-mingw32]
[2017-03-16 22:09:57] INFO  WEBrick::HTTPServer#start: pid=5124 port=9000
::1 - - [16/Mar/2017:22:10:00 東京 (標準時)] "GET / HTTP/1.1" 304 0
- -> /
::1 - - [16/Mar/2017:22:10:00 東京 (標準時)] "GET /mychart.js?12345 HTTP/1.1" 30
4 0
http://localhost:9000/ -> /mychart.js?12345
::1 - - [16/Mar/2017:22:12:46 東京 (標準時)] "GET / HTTP/1.1" 200 441
- -> /
::1 - - [16/Mar/2017:22:12:46 東京 (標準時)] "GET /mychart.js?12345 HTTP/1.1" 20
0 1479
http://localhost:9000/ -> /mychart.js?12345
::1 - - [16/Mar/2017:22:12:46 東京 (標準時)] "GET /data.csv HTTP/1.1" 200 410
http://localhost:9000/ -> /data.csv


data.csvがロードされていますね。ふと思ったのは、クエスチョンマークをつけた状態ではじめからキャッシュに保存されないと、同じポートではついてなかった時のキャッシュを読み込み続けるのでは?試しに今の状態からdata.csvの末尾1行を削除し、クエスチョンマークの後ろを少し変えてブラウザを更新してみると…

あれ!?だめですね(笑)変わりません。

[2017-03-16 22:09:57] INFO  WEBrick 1.3.1
[2017-03-16 22:09:57] INFO  ruby 2.3.3 (2016-11-21) [x64-mingw32]
[2017-03-16 22:09:57] INFO  WEBrick::HTTPServer#start: pid=5124 port=9000
::1 - - [16/Mar/2017:22:10:00 東京 (標準時)] "GET / HTTP/1.1" 304 0
- -> /
::1 - - [16/Mar/2017:22:10:00 東京 (標準時)] "GET /mychart.js?12345 HTTP/1.1" 30
4 0
http://localhost:9000/ -> /mychart.js?12345
::1 - - [16/Mar/2017:22:12:46 東京 (標準時)] "GET / HTTP/1.1" 200 441
- -> /
::1 - - [16/Mar/2017:22:12:46 東京 (標準時)] "GET /mychart.js?12345 HTTP/1.1" 20
0 1479
http://localhost:9000/ -> /mychart.js?12345
::1 - - [16/Mar/2017:22:12:46 東京 (標準時)] "GET /data.csv HTTP/1.1" 200 410
http://localhost:9000/ -> /data.csv
::1 - - [16/Mar/2017:22:18:02 東京 (標準時)] "GET / HTTP/1.1" 200 442
- -> /
::1 - - [16/Mar/2017:22:18:03 東京 (標準時)] "GET /mychart.js?123456 HTTP/1.1" 2
00 1479
http://localhost:9000/ -> /mychart.js?123456


今度もcsvを読み込んでいません…。いけると思ったんだけどなぁ。


同じことをもう一つのchart.jsを読み込んでいる方にも試してみます。

<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>

これを

<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js?123"></script>

こうして…ブラウザのキャッシュを消去して…

ダメでした!



今日は遅いのでここまでです。


問題はキャッシュ!!






[追記:2017.03.18]

解決しました!

前回記事を書いた段階は解決の一歩手前まで来ていたことが分かりました(笑)

2箇所クエリがあって、前回はそれぞれのクエリ末尾に?hogehogeと追記していましたが、正解はどちらにもつけるでした!!

以下のクエリで1~12月分のデータを描画すると…


    <script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js?123"></script>
    <script src="mychart.js?123"></script>

【図6:クエリ末尾"?123"】
f:id:cocosuzu:20170318164954p:plain




こうなりまして、クエリの末尾を以下の通りに変更してデータを1~12月+1~12月の二倍にすると…



    <script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js?1234"></script>
    <script src="mychart.js?1234"></script>

【図7:クエリ末尾"?1234"】
f:id:cocosuzu:20170318165315p:plain




はい!!無事に更新されました!!後は手動でクエリを変更している部分を自動で変更出来るようにすればいいでしょう。その点についてはまたの機会に!!


また、列数を増やしたパターンをちゃんとやっていないので試してみると…


【図8:Osakaの10倍データ列追加】
f:id:cocosuzu:20170318171427p:plain


これで行列サイズの異なるグラフの描画ができるようになりました!!






ここまでの進捗確認


【計画最終目標】
□シリアルデータのリアルタイム描画


【計画の中期目標】
csvデータのJavascriptによるグラフ描画
□メモリに格納したデータのJavascriptによるグラフ描画


【直近の課題】
データ処理:Ruby
□シリアル通信機器からのデータ受信・csvへ保存
□シリアル通信機器からのデータ受信・メモリに格納


描画処理:Javascript
csvデータの読み込み
■異なるデータサイズへの対応←Done
■描画方法の変更
csvが更新されたらグラフ更新するorブラウザで表示しているデータを一定間隔で更新
□chart.js以外を使ってみる←追加


バイス関係
■シリアルデータ送信機器の準備
□実際の測定機器におけるシリアルデータのフォーマットを再現する


※□は未完、■は完了項目