strix01: Epochでリアルタイムなチャートを表示する

2015/03/31

前回の記事「Epochでリアルタイムなチャートを表示する。」の続き。前回は、D3.jsベースのチャート表示ライブラリ「Epoch」を使って、時系列なラインチャート、エリアチャート、バーチャートをリアルタイムに描画する方法について書いた。今回は、Gaugeと呼ばれるチャート?を描画する方法について。

Gauge?

gaugeは、カタカナで書くなら「ゲージ」で、「計器」を意味するらしい。実際、

みたいなのが描画される。

gaugeを表示するには、

var gauge = $('#gauge-chart').epoch({
    type: 'time.gauge',
    value: 0.1
  });

のように、epochのtypeにtime.gaugeを指定する。ライン、エリア、バーと異なり、gaugeは時系列なチャートではないので、時間を指定せず、値のみ指定する。

そして、値を更新するには、

gauge.push(値);

とするだけ。これで、gauge上の針がアニメーションしながら指定した値に落ち着いていく。ここにデモがあります。にしても簡単だわ〜。

今回はEpochでGaugeチャートの書き方を書きました。後はHeatmapが残っているので、次回あるいはその次あたりに書きたいが・・・。