« エビフライ作った | トップページ | ミルフィーユカツを作った »

2009.08.07

Ambling(amchartsのRubyのラッパー)の折れ線グラフのサンプルコード

Amblingはいいんだけど、サンプルコードないし、Googleで検索しても情報ゼロなので、公開する。欲しい人は多いはずだ。
暴想家計簿作るときにしんどかったので。


これは折れ線グラフのサンプル。
そもそも、Amblingの使い方として、グラフのデータを返すactionとグラフを表示する(Flashをレンダリングする)Actionが必要。
で、Flashのレンダリングタグのなかから、データを返すactionを呼び出してグラフを表示する。

んで、↓がデータを表示するactionのサンプルコード。
こっちのほうは、testコードを見ると意外とサンプルが多いので比較的楽。
------------------------------------------------------
simple_chart = Ambling::Data::LineChart.new

#横軸を定義。ここでは12ヶ月(1年)にするためにこうしている。必要に応じて変更する。
12.times{|i|
simple_chart.series.push(i+1)
}
#グラフに入れ込みたいデータを呼び出す。
#ここでは、yearをキーにしたhashをやっている。こうすることで年単位の比較折れ線グラフが作れる。
#折れ線が一本で良いときは単なる配列を突っ込めばいい。
data_hash.each_key{|year|
#chart_year[year]はただ単に縦軸の数字が詰まった配列(Array)。家計簿で言うところの月単位の金額が詰まった12個の配列。
#[200, 344, 445, 553, ...]みたいな感じ。
#titleには、まあ好きなラベルを入れればいい。
simple_chart.graphs << Ambling::Data::LineGraph.new(chart_year[year], :title => year)
}

return simple_chat.to_xml

------------------------------------------------------

んでこれまたわかりにくいのが、viewの方。


------------------------------------------------------
#data_fileには上記xmlデータを返すactionを指定
#approx_countは横軸の単位を表示する値を指定。今回は12ヶ月なので12。これを指定しないと、1, 6, 12とかしか横軸の単位が表示されない。
#指定しなければデフォルトになる
#そのほか細かい指定はdocumentにあるとおりで、このdocumentにある定義を↓みたいにHashで渡してあげればいい。一度理解すれば簡単。
<%=
ambling_chart(:line, :data_file => '',
:id => 'pie_data', :width => 800, :height => 360,
:chart_settings => Ambling::Line::Settings.new({
:grid => {
:x => {:approx_count => 12}
}
}).to_xml) do
"<p>To see this page properly, you need to upgrade your Flash Player</p>"
end
%>
------------------------------------------------------

あーあと、当たり前だけど、amchatの本体Flashは別途ダウンロードしておかないとだめ。忘れがち。

|

« エビフライ作った | トップページ | ミルフィーユカツを作った »

ruby」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/22269/45856649

この記事へのトラックバック一覧です: Ambling(amchartsのRubyのラッパー)の折れ線グラフのサンプルコード:

« エビフライ作った | トップページ | ミルフィーユカツを作った »