Open Flash Chart on Railsでグラフ・チャートを3分で作成しよう


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/