気ままにIoTメモ

Iotに関わること関わらないこと備忘録

リアルタイム用グラフライブラリ Epoch

A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations.

公式いわく、美しく、滑らかで高いパフォーマンスの可視化のための汎用リアルタイムグラフライブラリ「Epoch」

ブラウザの更新をしなくてもSocket.IOと合わせてリアルタイムにグラフを更新したい、ということで使ってみます。
普通に公式のGetting started通りに進めます。

まずはExpressと必要なモジュールインストール。

mkdir epoch
cd epoch
express --view=ejs
npm install
npm install epoch-charting --save
npm install jquery --save

app.jsに追加

app.use(express.static(path.join(__dirname, 'node_modules')));

views/index.ejsのheadderタグに追加

  <link rel="stylesheet" type="text/css" href="epoch-charting/dist/css/epoch.min.css">
  <script src="jquery/dist/jquery.min.js"></script>
  <script src="d3/d3.min.js"></script>
  <script src="epoch-charting/dist/js/epoch.min.js"></script>

最後にviews/index.ejsのbodyタグでグラフ作成。

  <div id="area" class="epoch category10" style="height: 200px; width: 400px;"></div>
  <script>
  var data = [
  { label: 'Layer 1', values: [ {x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 2} ] },
  { label: 'Layer 2', values: [ {x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 4} ] }
  ];
  var areaChartInstance = $('#area').epoch({
  type: 'area',
  data: data,
  axes: ['left', 'right', 'bottom']
});
</script>

npm startで実行し、localhost:3000で確認。

f:id:htn_hs:20170104135053p:plain

あとは公式のサンプル通りにいじればデータの可視化ができそうです。

グラフの種類が多くないので、リアルタイムにこだわらない・もっとリッチなグラフを使いたい場合他のライブラリを使った方がいいかもしれません。

参考

Epoch

iot_lab/05_epoch at master · hsgwa/iot_lab · GitHub