ccchartでグラフを描画する

プログラム

ccchartというグラフ描画ライブラリがとても使いやすくて便利だったのでメモ。もし実際に利用する場合は、サンプルやドキュメントが充実しているのでそちらを参照した方が良いと思います。

最近、REMPで運営者用の管理画面を作っていることは以前書きましたがその中で利用状況等を示すグラフを作りたくなったので今回利用してみました。

使い方

使い方はとてもシンプルで、まずライブラリの読み込みとグラフを描画する領域をHTML上に定義します。

<html>
<head>
  <script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
</head>
<body>
  <canvas id="graph-area"></canvas>
</body>
</html>

これで準備は完了。で、この領域(=canvasタグ内)に今回はREMP で利用しているMongoDBの情報を参照してグラフを描画させたかったので、グラフのみ非同期で描画させてAPI経由でグラフに必要な情報を参照して描画させてみました。
まずAPIの準備。ccchartは、JSONオブジェクトをパラメータとしてグラフを描画する仕様になっているので、API側で描画に必要なパラメータを全て作って渡す様にしました。Padrino側でAPIをこしらえてあげます。

# app/controllers/foo.rb
get :graphvalues do
  timeScale = ['日']
  fooNum = ['foo']
  minYRange = 0
  maxYRange = 1000

  Score.where(:created_at => 10.day.ago..1.day.ago).each do |oneScore|
    timeScale << "#{oneScore.created_at.day}日"
    fooNum   << oneScore.foo
  end

  title = 'foo'
  data = [timeScale, fooNum]
  colorSet = ["red"]

  # JSON
  graphValues = {
    config: {
      titleFont: "100 18px 'Arial'",
      title: title,
      type: "line",
      lineWidth: 4,
      minY: minYRange,
      maxY: maxYRange,
      width: 480,
      height: 400,
      colorSet: colorSet,
      bgGradient: {direction:"vertical",from:"#687478",to:"#222222"}
      },
    data: data
  }

  content_type :json
  graphValues.to_json
end

なんかごにょごよしてますが、要はccchartで定められているグラフ定義用のJSONをサーバサイドで作っているだけです。
次にフロント側(JS)で、APIから取得したJSONを利用してグラフを実際に描画します。

<script>
  $(document).ready(function(){
    $.ajax({
      type: "GET",
      dataType:'json',
      scriptCharset: 'utf-8',
      url: "/foo/graphvalues",
      success: function(res){
        ccchart.init('graph-area', res);
      }
    });
  });
</script>

そうすると以下の様なグラフが描画されます。

グラフの種類も多いですし、必要に応じて使ってみようと思います。