[RoR]Rails使用FusionCharts來做動態圖表

FusionCharts是知名的動態圖表開發商，產品有FusionCharts、FusionMaps、FusionWidgets..等，以JavaScript開發，可以用在Web Report或是Dashboard的建立。

FusionCharts實作

• Step1.在Gemfile新增gem 'fusioncharts-rails'後執行bundle install
• Step2.從FusionCharts官網下載fusioncharts library
• Step3.將Library解壓縮，把javascript檔複製到vendor/assets/javascripts/fusioncharts
• Step4.修改app/assets/javascripts/application.js，添加下列Require

//= require fusioncharts/fusioncharts
//= require fusioncharts/fusioncharts.charts
//= require fusioncharts/themes/fusioncharts.theme.fint

建立圖表

FusionCharts支援JSON、XML、Ruby Hash三種格式的資料，以下範例是採用Ruby Hash的資料格式

Controller

使用Ruby Hash在Controller建立FusionCharts物件

class HomeController < ApplicationController
    def welcome    
    # Create the FusionCharts object in the controller action
    
        @chart = Fusioncharts::Chart.new({
            :height => 400,
            :width => 600,
            :type => 'mscolumn2d',
            :renderAt => 'chart-container',
    
    # Chart data is passed to the `dataSource` parameter, as hashes, in the form of
    
    # key-value pairs.
    
    :dataSource => {
        :chart => {
            :caption => '季度營收比較',
            :subCaption => '銷貨收入',
            :xAxisname => '季度',
            :yAxisName => '金額 (NTD)',
            :numberPrefix => 'NTD',
            :theme => 'fint',
        },
    
    # The `category` hash is defined inside the `categories` array with four key-value pairs
    
    # that represent the x-axis labels for the four quarters.
    
        :categories => [{
            :category => [
                { :label => 'Q1' },
                { :label => 'Q2' },
                { :label => 'Q3' },
                { :label => 'Q4' }
            ]
        }],
        :dataset =>  [{
            :seriesname => '2013年',
    
    # The `data` hash contains four key-value pairs that are the values for the revenue
    
    # generated in the previous year.
    
            :data =>  [
                { :value => '100000' },
                { :value => '115300' },
                { :value => '125100' },
                { :value => '150200' }
            ]},{
            :seriesname => '2014年',
            :data =>  [
                { :value => '254300' },
                { :value => '298200' },
                { :value => '218100' },
                { :value => '268400' }
            ]}
        ]
      }
    })
    end     
end

View

• 在View中使用render method來指定呈現圖表
• fusioncharts必須在id為chart-container的block內，與rendarAt互相對應

實作結果

上面的Source Code只會產出左邊的季度營收比較圖，右邊的是用官網的範例做的。

參考資料

• JavaScript Charts in Ruby on Rails (RoR)