Open Flash Chartでグラフを作成しよう
Railsでグラフ描写をサポートしてくれるプラグインはいくつか種類があります。
今までは「FusionCharts」を使ってたのですが「Open Flash Chart」がデザイン性もよくて良さげ。
日本語もサポートしてるようなので試してみる事にしました。
Open Flash Chartの特徴
オープンソースでとても使い勝手が良さそうです。
・GNU GPLライセンス
・Flashベース
・日本語対応可
・幅広い言語対応(PHP、Perl、Python、Javaなど)
・折れ線グラフ、円グラフ、棒グラフ、3Dグラフなどの多様のグラフを出力可能
3分でグラフを作成
とても簡単ですぐにグラフを作成する事ができます。3分かからないかも。
以下はLinuxの場合です。
# Railsアプリを作成
rails test
# testフォルダへ移動
cd test
# プラグインをインストール
script/plugin install git://github.com/pullmonkey/open_flash_chart.git
# JavaScriptファイルをコピー
cp vendor/plugins/open_flash_chart/assets/javascripts/swfobject.js public/javascripts/
# SWFファイルをコピー
cp vendor/plugins/open_flash_chart/assets/open-flash-chart.swf public/
# Graphsコントローラーを作成
./script/generate Controller Graphs index
# Graphsコントローラーを編集 ※1参照
vim app/controllers/graphs_controller.rb
# Graphsのindexビューを編集 ※2参照
vim app/views/graphs/index.html.erb
# サーバーを起動して確認してみましょう ※3参照
./script/server
# http://localhost:3000/graphs
※1 app/controllers/graphs_controller.rb
class GraphsController < ApplicationController
def index
@graph = open_flash_chart_object(600,300,"/graphs/graph_code")
end
def graph_code
title = Title.new("MY TITLE")
bar = BarGlass.new
bar.set_values([1,2,3,4,5,6,7,8,9])
chart = OpenFlashChart.new
chart.set_title(title)
chart.add_element(bar)
render :text => chart.to_s
end
end
※2 app/views/graphs/index.html.erb
<%= javascript_include_tag "swfobject" %> <%= @graph %>
※3 サーバーを立ち上げてサイトを見てみると以下のようにグラフが表示されると思います。
応用編
3分かからないで時間が余った方。
WEBサイトを作成していると携帯キャリア別のグラフ作成を頼まれる機会も少なくないと思います。
そんな時もOpenFlashChartで簡単に作成する事ができます。
下記、過去10間のAU、Docomo、Softbankのグラフを表示したものです。データはお好きなものを入れてください。
Railsのコードは以下のようになります。
def carrier_graph
title = Title.new("3キャリア別グラフ")
data1 = []
data2 = []
data3 = []
10.times do |x|
data1 << rand(5) + 1
data2 << rand(6) + 7
data3 << rand(5) + 14
end
docomo_line_dot = LineHollow.new
docomo_line_dot.text = "Docomo"
docomo_line_dot.width = 2
docomo_line_dot.colour = '#FF0000'
docomo_line_dot.dot_size = 5
docomo_line_dot.values = data1
au_line_dot = LineHollow.new
au_line_dot.text = "AU"
au_line_dot.width = 2
au_line_dot.colour = '#FFD700'
au_line_dot.dot_size = 5
au_line_dot.values = data2
softbank_line_dot = LineHollow.new
softbank_line_dot.text = "SoftBank"
softbank_line_dot.width = 2
softbank_line_dot.colour = '#00BFFF'
softbank_line_dot.dot_size = 5
softbank_line_dot.values = data3
tmp = []
x_labels = XAxisLabels.new
x_labels.set_vertical()
10.downto(1) do |i|
tmp << XAxisLabel.new(i.days.ago.day, '#000000', 12, 'diagonal')
end
x_labels.labels = tmp
x = XAxis.new
x.set_labels(x_labels)
y = YAxis.new
y.set_range(0,20,5)
x_legend = XLegend.new("日別")
x_legend.set_style("{font-size: 20px; color: #778877}")
y_legend = YLegend.new("登録数")
y_legend.set_style("{font-size: 20px; color: #770077}")
chart =OpenFlashChart.new
chart.set_title(title)
chart.set_x_legend(x_legend)
chart.set_y_legend(y_legend)
chart.y_axis = y
chart.x_axis = x
chart.add_element(docomo_line_dot)
chart.add_element(au_line_dot)
chart.add_element(softbank_line_dot)
render :text => chart.to_s
end
参考サイト
http://pullmonkey.com/projects/open_flash_chart2/
→ グラフの種類を一通り見る事ができます。
「Open Flash Chart II Plugin for Ruby on Rails – Graphs (OFC 2)」
「グラフ作成 Open Flash Chart 2」
「Open Flash Chart – Flashでクールなグラフ描画」
http://teethgrinder.co.uk/open-flash-chart/