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

Rails Rubricks

前回のやつをちょびっと改良して、描画する系列を動的に増やしたりできるようにしてみる。

コントローラ

action内で配列をto_jsonしてインスタンス変数に格納。今回は２つの商品の月別売上推移みたいなイメージ。
配列の頭(index=0)が系列名、以後は値となるみたい。
以下の２つをインスタンス変数に設定する。
(1)グラフの値の配列　の配列
　中の配列が、１つの系列を示す(index=0が系列名、以後は値)。
(2)グラフのオプションを示すHash
　オプション詳細については折線グラフ - Javascriptライブラリ - HTML5.JPを参照。
　上記ページのサンプル(JS)ではハッシュのキーが変数っぽくなっているが、文字列にする必要あり。

    @hoge_array = []
    arr1 = ['商品A', 20, 58, 40, 14, 38, 20, 40]
    arr2 = ['商品B', 10, 14, 58, 80, 70, 90, 20]
    @hoge_array << arr1
    @hoge_array << arr2

    @hoge_params = {
      'x' => ["曜日", "日", "月", "火", "水", "木", "金", "土"],
      'y' => ["注文数(個)", 0, 20, 40, 60, 80, 100],
      'yMax' => 100,
      'yMin' => 0,
      'lineWidth' => [1,2],
      'dotRadius' => [3,4],
      'dotType' => ["disc", "square"]
    }

  end

JS

処理本体。引数が可変長なのでargumentで対応。
// 第１引数（必須）:グラフを描画するcanvas要素のID
// 第２引数（必須）:描画するグラフの値配列の配列　のJSON
// 第３引数（オプション）：X軸やY軸などグラフのオプションパラメータ　のJSON
ちょっとはまった箇所として、evalでパースするときに"(" ")"で囲ってやる必要があること。
単純にパラメータのJSONを eval(param_json)てかんじにすると、invalid labelっていうエラーになっちゃう。
(evalの問題らしい。参考：JSONをevalした時のエラー「invalid label」について - 悲喜交々　-へたれの技術メモ置き場-)

<script type="text/javascript">
Object.extend(rubricks.hoge ,{
  draw_graph_line :function() {
    if (arguments.length < 2) {return;}
    var lg = new html5jp.graph.line(arguments[0]);
    if( ! lg ) { return; }
    var items = eval("(" + arguments[1] + ")");
    if (arguments[2] == null) {
      lg.draw(items);
    } else {
      var params = eval("(" + arguments[2] + ")");
      lg.draw(items,params);
    }
  }
});
</script>

View

描画したい箇所にcanvas要素を書くところは変わらず。

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

アクションからのインスタンス変数をto_jsonしたものを引数として、上記のJSを実行。
グラフのオプション指定する場合は引数３つ、オプション指定なしの場合は引数２つ。

<script type="text/javascript">
  // X軸、Y軸などオプションも指定する場合
  rubricks.hoge.draw_graph_line('line_sample3', '<%= @hoge_array.to_json %>', '<%= @hoge_params.to_json %>');
  // 値の配列のみを指定する場合
  //rubricks.hoge.draw_graph_line('line_sample3', '<%= @hoge_array.to_json %>');
</script>

結果