2015/03/19

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

html上のチャート、ラインチャートとかバーチャートとか、リアルタイムに更新したい、と思って調べていたら、Epochなるライブラリを発見したので、使い方を纏めておく。

Epoch

A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations.
とのこと。 で、
  • javascriptライブラリ
  • d3.jsベース
  • Line, Area, Bar, Gauge, Heatmapの各チャートをリアルタイムに表示できる
  • リアルタイムでない通常のチャートもいける
という特徴がある。

導入

Epochはjavascriptファイルとcssファイルを提供しているので、そいつらをページに引きこむ。Epoch - Getting Startedにあるようにd3.jsも忘れずに。

LineChart, AreaChart, BarChart

これらはx軸が時間、y軸は任意というチャートを描画する。見た目が違うだけでデータの構造は同じ。データの構造は、

var data = [
  { label: 'Series1',
    values: [{ time: time, y: 100 }, { time: time + 1, y: 1000 }] },
  { label: 'Series2',
    values: [{ time: time, y: 200 }, { time: time + 1, y: 200 }] }
];
という形になる。系列ごとにlabelとデータを定義して、それを配列にする。で、valuesの中のtimeは、a unix timestampである必要がある(故にEpochなのかなぁ)。で、これをEpochに与えるとチャートを表示してくれる。
<div id="line-chart" class="epoch" style="height:160px"></div>
のようなhtmlを書き、
var lineChart = $('#line-chart').epoch({
    type: 'time.line',
    data: data,
    axes: ['left', 'bottom', 'right']
  });
とすると、ラインチャートが表示される。エリアチャート、バーチャートの場合もデータの構造は同じなので、epoch関数のパラメータのtypeを、エリアチャートの場合はtime.area、バーチャートの場合はtime.barとしてやればよい。

で、初期データを食わせたチャートに、後から時々刻々とデータを追加していくことでリアルタイムなチャートになるんだけど、追加するデータの形式は、

var current = [
  { time: time, y: Math.random() * 1000 },
  { time: time, y: Math.random() * 1000 }
];
という形式になる。初期データに比べてlabelが要らない。この追加データを、
lineChart.push(current);
とするだけで、チャートが更新される。なんて楽ちんな。タイマーを使って、周期的にバックエンドからデータを取得してpushしてやるとか、WebSocketを使って、バックエンドから送りつけられたデータをpushする、といった方法でリアルタイムなチャートが表示できる。

実際に表示すると↓のようなチャートが表示される。

で、このチャート表示が動いているのがこちらになります。

終わりに

Epochを使うと、他にもGaugeとかHeatmapもリアルタイムに描画できるけど、力尽きたので次回にまわします。それにしても、Epoch便利だわ。

0 件のコメント: