The ELC Community Blog

A knowledge exchange on Ruby on Rails and Agile Development

Swfchart Generator

by Yuanyi Zhang on September 07, 2007

Swfchart generator provides an easy way that you can integrate maani.us's SWF/XML Chart library into your Rails App.

Download and Install

1. You should download maani.us's SWF/XML Chart library, and extract them into your public directory:

public
|-- charts.swf
`-- charts_library
    |-- arno.swf
    |-- arst.swf
    |...........
    `-- scno.swf

2. Check out swfchart into your plugins directory:

$ cd $RAILS_ROOT/vendor/plugins
$ svn co https://svn.elctech.com/svn/public/plugins/swfchart swfchart

Usage

1. Generate files:

$ ./script/generate swfchart
    create lib/swfchart_helper.rb
    create app/controllers/swfcharts_controller.rb
    create app/models/swfchart.rb
    create test/unit/swfchart_test.rb
    create test/functional/swfcharts_controller_test.rb

2. Edit route.rb add a route for swfchart:

map.swfcharts 'swfcharts/:name', :controller => 'swfcharts', :action => 'show'

3. Load swfchart_helper.rb in environment.rb:

require 'swfchart_helper.rb'

4. Now, you can use "swf_chart" helper to render a swf chart for your view:

<%= swf_chart {|c|
  c.data_source = swfcharts_url(:name => "sample_line")
  c.width = "400"
  c.height = "320"
} %>

This will generate a 400*320 flash object for your view, you can get more controls through modifying below attributes:

• data_source, specify where the chart's data is from, fellowing the route we added in step#2, the above sample's data source will be /swfcharts/sample_line, this is a built-in data source, it will render a sample line chart.
• width
• height
• bg_color, "000000" will render a chart with black background.
• transparent, default is false.
• license, free version only provide limited functions, full version will need a license.

5. If you need to build your own data source, just fellow the samples in swfchart model, here's the sample_line implementation:

def self.sample_line
  swf = Swfchart.new('sample swf', 'line')
  swf.data_array = []
  swf.data_array[0] = ['a', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
  swf.data_array[2] = ['Region B', 1, 1, 2, 3, 4, 6, 8, 8, 5, 7, 9, 4, 8, 4 ]
  swf.data_array[1] = ['Region A', 53, 52, 52, 52, 50, 44, 43, 34, 32, 28, 25, 20, 15, 10]
  swf
end

'sample swf' is chart's name which will be rendered in chart's background, 'line' is chart's type, currently, those types are supported:

• Line
• Column
• Stacked column
• Floating column
• 3D column
• Stacked 3D column
• Parallel 3D column
• Pie
• 3D Pie
• Bar
• Stacked bar
• Floating bar
• Area
• Stacked area
• Candlestick
• Scatter
• Polar
• Mixed
• Composite
• Joined

There're a gallery available at maani.us.

data_array[0] stores the axis labels, the labels' display depends on "skip" passed to Swfchart.new which is 2 by default, with default "skip", only 1, 4, 7, 10, 13 will be displayed.

data_array[1..n] stores the real chart data, and their first element always store data label.

6. If want to get more controls with your charts, you may need to understand the meaning of below Swfchart attributes:

• axis_ticks
• axis_value
• chart_border
• chart_grid_h
• chart_grid_v
• chart_pref
• chart_rect
• chart_transition
• chart_value_text
• chart_value
• draw
• legend_label
• legend_rect
• legend_transition
• link
• link_data
• live_update
• series_color
• series_explode
• series_gap
• series_switch

You can find a reference on maani.us about these attributes, what you need to do is converting the xml attributes into a Ruby hash and set them to your Swfchart instance, just like this:

swf.chart_rect = {'x'=>4, 'y'=>4, 'width'=>72, 'height'=>52, 'positive_color'=>"ffffff", 'negative_color'=>"ffffff", 'positive_alpha'=>100, 'negative_alpha'=>100}

7. Here's the sample line chart snapshot, a little ugly:

A Chinese version is also available.