RaspberryPiを使っていて、ブラウザ上にdygraphを使って
グラフを書いたときのメモ。

いろいろ試したけど、シンプルで使いやすかったのがこれ↓。

http://dygraphs.com/1.0.0/

javascriptのライブラリとなっていて、線グラフの機能が一通り入ってる。

http://dygraphs.com/1.0.0/tests/

をいろいろ覗いてみて構文を理解するといい。

以下は よく使いそうな内容のメモ

legend: always,  プロットの値、名前を常に表示
legendColor: rgb(200,200,200), プロットの値の文字色指定
animatedZooms: true,      オシャレにズーム
showRangeSelector: true,    ズーム用のエリアをグラフの下に表示
rangeSelectorHeight: 30,    ズーム用のエリアの高さ
rangeSelectorPlotStrokeColor: rgb(80,80,80), ズーム用のエリアの色
rangeSelectorPlotFillColor: rgb(80,80,80),ズーム用のエリアのグラフの色
showRoller: true, たぶん移動平均
rollPeriod:1, 移動平均の量

ラベルをグラフ上に表示すると見にくい場合は↓みたいにするとグラフ外にラベルを表示できる

labelsDivWidth: 100,
labelsSeparateLines: true,
labelsKMB: true,
labelsDivStyles:
{
backgroundColor: rgb(48,48,48),
},
labelsDiv: document.getElementById("labels"),
んで 

<div id="labels"> </div>

とかで必要な場所に表示してやるといい。

BootStrapでオシャレなビジュアルにってがんばってみた。
がしかし!!

グラフのメモリ部分の色がどうやっても変えれませんでした・・・。
ページの背景を黒っぽくしたけど、グラフのメモリの色がデフォルトで黒なので、
非常に見えにくくなってダサくなってしまいました・・・。

さらにRollerの色も変えれなかったので、満足するできになりませんでした・・・

 けど、グラフはちゃんと表示できたのでとりあえずOK!!

Good Luck!!