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/