Railsとflotでグラフを描画する

Rails jQuery

自作アプリにグラフ機能が欲しかったので、jQueryのプラグインflotを使いました。

しかし、flotに引き渡すデータはJSONとは言え、レイアウトはActiveRecordのソレとは全然違っています。

{
    label: 'Europe (EU27)',
    data: [[1999, 3.0], [2000, 3.9]]
}

そこで、flotillaを使ってActiveRecordのデータを渡せるようにしました。

環境

flotのインストール

public\javascriptsに配置します。

flotillaインストール方法

ruby script/plugin install http://flotilla.rubyforge.org/svn/trunk/plugins/flotilla

Controller

@machine_log_list = machine_log_list(@model_id, @current_time, @filter)
render :update do |page|
	page.replace_html "chart-area", :partial => "chart_area"
end

application.html.erb

flotを読み込みます。

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <%= javascript_include_tag :defaults %>
  <%= javascript_include_tag "jquery.flot.min.js" %>
  <!--[if IE]>
    <script language="javascript" type="text/javascript" 
        src="/javascripts/excanvas.min.js">
    </script>
  <![endif]-->
</head>

グラフを表示するView

<%= chart("chart-area", {
    "売上" => { :collection => @machine_log_list, 
		:x => :rec_date, 
                :y => :sales, 
                :options => {:lines => {:show => true }} },
    "粗利" => { :collection => @machine_log_list, 
		:x => :rec_date, 
                :y => :margin, 
                :options => {:lines => {:show => true }} },
}) %>

生成されるグラフ


参考にしたページ