2015/03/31

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

前回の記事「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が残っているので、次回あるいはその次あたりに書きたいが・・・。

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便利だわ。

2015/03/05

Animate.cssで簡単にDOM要素のアニメーションを実現する。

DOM要素にfadeとかslideとかのアニメーションをつけるのに、jQueryで書くのはまあ簡単ではあるけど、Animate.cssなるcss3のアニメーションライブラリを知ったので、使い方をメモっておく。シンプルなアニメーションがすごく簡単に実現できる。

Animate.css

githubのREADME.mdには、

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects.
とある、つまり、クロスブラウザに対応したクールで楽しいアニメーションの束、ってことっぽい。実際、cssを取り込むだけで、いろんな種類のアニメーションが簡単に実現できちゃう。

使い方

cssをダウンロードするなり、bower install animate.cssするなりして、HTMLにcssを埋め込む。

<head>
  <link rel="stylesheet" href="path/to/animate.min.css">
</head>

で、アニメーションさせたいDOM要素にclass属性を与えてやる。と。例えば、とあるh2要素に対して、rubberBand(ビヨーーンプルンプルンプン)みたいなアニメーションをつけるには、

<h2 class="animated rubberBand">rubberBand</h2>
のように書く。動的にアニメーションさせたい、例えばボタンクリック時とか、という場合は、
var target = $('h2');
var button = $('button#some-button');
button.on('click', function(ev) {
  target.addClass('animated').addClass('rubberBand');
});
となる。他にも無限にアニメーションさせるとか、アニメーション終了イベントをハンドリングするとかもできる。

アニメーションの種類

  • Attension Seekers
  • Bouncing
  • Fading
  • Flippers
  • Lightspeed
  • Rotating
  • Specials
  • Zoom
8つのカテゴリに分かれていて、それぞれいくつかのアニメーションを提供している。

当然本家のサイトでも試せるんだけど、ドロップダウンでいちいち選択するのが面倒に思って、これらを1つ1つ試すページをここに作ってみたので、よかったらどうぞ。

終わりに

animate.css、簡単に使えて効果でかいっていう感じがいいな、と思った。