組み込み技術を向上したい!!

でも組み込み以外にも手を出し始めました・・・

dygraphを使ってブラウザ上にグラフを書く

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!!