RailsアプリでJavascriptライブラリを使用してグラフ描画

結論：これは使えそう！

RailsっていうかRubricksだけどｗｗ

使ったライブラリ

Javascriptライブラリー - HTML5.JP　のグラフのやつ。
HTML.JPのライブラリは、グラフの種類毎にJSファイルが分かれてる。
今回のサンプルでは折れ線。

準備

JSファイルを読み込むようにしておく。IE用にexcanvas.jsも。
Rubricksの場合はpreloadで以下のような感じ。

<!--[if IE]><%= javascript_include_tag '/javascripts/components/hoge/excanvas/excanvas' %><![endif]-->
<%= javascript_include_tag '/javascripts/components/hoge/graph/line' %>

コントローラ

action内で配列をto_jsonしてインスタンス変数に格納。今回は２つの商品の月別売上推移みたいなイメージ。
配列の頭(index=0)が系列名、以後は値となるみたい。

    arr1 = ['商品A', 20, 58, 40, 14, 38, 20, 40]
    arr2 = ['商品B', 10, 14, 58, 80, 70, 90, 20]
    @hoge_json1 = arr1.to_json
    @hoge_json2 = arr2.to_json
  end

JS

処理本体。
引数：第1＝描画対象のDOM-ID。第2・第3＝描画する系列用の配列（とりあえず引数で1つずつ渡してる。)。
JSONで渡してevalで配列に戻す。で、ライブラリのクラス(html5jp.graph.line)のdrawメソッドに渡す配列を組み立ててdraw実行で描画。

<script type="text/javascript">
Object.extend(rubricks.hoge ,{
  line_sample3 :function(target_html_id, obj1, obj2) {
    var lg = new html5jp.graph.line(target_html_id);
    if( ! lg ) { return; }
    var items = [
      eval(obj1),
      eval(obj2)
    ];
    //↓ベタ書きするとこんな感じ
    //var items = [
    //  ["商品A", 20, 58, 40, 14, 38, 20, 40],
    //  ["商品B", 10, 14, 58, 80, 70, 90, 20]
    //];
    lg.draw(items);
  }
});
</script>

View

まず、描画したい箇所にcanvas要素を書く。

<div>
  <canvas width="400" height="300" id="line_sample3"></canvas>
</div>

で、アクションからのインスタンス変数を引数として上記のJSを実行。

<script type="text/javascript">
  rubricks.hoge.line_sample3('line_sample3', '<%= @hoge_json1 %>', '<%= @hoge_json2 %>');
</script>

結果

デキター！