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の各チャートをリアルタイムに表示できる
- リアルタイムでない通常のチャートもいける
という特徴がある。
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便利だわ。
