Charts in Rails

We have been working on a project that deals with server data where charts are worth a thousand words. I always get requests for various charts and in the past I’ve used Gruff to produce them. Gruff is a great library and the results look good too! However, recently I’ve have had more demanding requirements to provide more dynamic behaviour on the charts. Users wanted to be able to interact with the charts in various ways and drill down to gather more information.

I looked at the alternatives to Gruff and decided to go with XML/SWF charts. These frameworks use Flash rendering for charts and have great features, 24hr turn around support and they’re inexpensive. The other advantage is that we no longer had to deal with figuring out the various spells to install RMagick on client’s servers. Moreover, we were able to delegate the actual chart rendering over to the client, which with dynamic graphs is key. All we had to do now on the server side was generate XML (for CPU usage in real time).

In this article, I would like to throw some light on various charts that are available for rails like Gruff, Google charts, Ziya charts, Open Flash charts and Fusion charts.

I am currently using Open Flash charts for the current project.

Gruff charts: Gruff is a Ruby library for generating attractive and powerful graphs, useful for web applications, print media and many others.

Snapshot Rendering

You can render a Gruff graph as many times as you want and change any settings between renders. Data, colors, even the graph size and image type can all be changed for the next render. Easily Extensible

Gruff is designed to be extremely extensible. Adding new graph types or themes can be done in as little as a few lines of code. If you need more control over your graphs, you can customize the layouts, data generation, almost anything.

Installaton

sudo gem install gruff

Demonstration of usage

Pie Chart example

require ‘rubygems’

require ‘gruff’

g = Gruff::Line.new

g.title = “My Graph”

g.data(“Apples”, [1, 2, 3, 4, 4, 3])

g.data(“Oranges”, [4, 8, 7, 9, 8, 9])

g.data(“Watermelon”, [2, 3, 1, 5, 6, 8])

g.data(“Peaches”, [9, 9, 10, 8, 7, 9])

g.labels = {0 => ‘2003’, 2 => ‘2004’, 4 => ‘2005’}

g.write(‘my_fruity_graph.png’)

Google charts:

The Google Chart API returns a PNG-format image in response to a URL. Several types of image can be generated, including line, bar, and pie charts. For each image type, you can specify attributes such as size, colours, and labels.

Installation ruby script/plugin install https://google-charts-on-rails.googlecode.com/svn/google_charts_on_rails/

Once installed, start using it directly in your project.

Pie Example

GoogleChart.pie(10,20,40,30).to_url

With labels:

GoogleChart.pie([‘1997’,10],[‘1998’,20],[‘1999’,40],[‘2000’,30]).to_url

Ziya Charts:

Ziya allows you to easily create interactive charts, gauges and maps for your web applications. Ziya leverages flash which offloads heavy server side processing to the client. At the root, Ziya allows you to easily generate an XML files that will be downloaded  for rendering. Using this gem, you will be able to  create great looking charts for your application easily.

Features : -Supports a wide variety of chart/gauge types. -Geographical maps. -Relieves your server load by generating the actual chart on the client side. -Themes support. You can change the appearance and behavior of any charts by introducing new themes.

Installation : > gem sources -a //gems.github.com > sudo gem install derailed-ziya

cd to your application directory and issue the following command: > ziyafy –charts This will copy the necessary themes and flash files to run ZiYa in your application’s public/charts directory. You can install maps and gauges components as well. Type in:

> ziyafy –help To see all available options.

Open Flash Charts:

Features : -More dynamic graphs with eye catching tooltips and legends for readability. -Various types of charts available, except real time charts. -Simple and easy to install the plug-in. Does not need and gem like Rmagick or ImageMagick. -Data is rendered and displayed in SWF format. To install and use the open flash chart plug-in for Rails do the following:

1.script/plugin install //svn.pullmonkey.com/plugins/trunk/open_flash_chart/ 2.Move the open_flash_chart.swf file into your RAILS_ROOT/public directory 3.Move the swfobject.js file into your RAILS_ROOT/public/javascripts directory 4.Create a controller and a view as in my examples below.

Implementation: def index_stacked_bar @graph = open_flash_chart_object(600,300,”/test_it/graph_code_stacked_bar”) end

def graph_code_stacked_bar title = Title.new(“A stacked bar chart”) title.set_style( “{font-size: 20px; color: #F24062; text-align: center;}” ); bar_stack = BarStack.new bsv1 = BarStackValue.new(2.5, ‘#C4D318’) # yellow bsv2 = BarStackValue.new(5, ‘#50284A’) # purple bsv3 = BarStackValue.new(1.25, ‘#7D7B6A’) # gray bsv31 = BarStackValue.new(1.25, ‘#C4D318’) # yellow bar_stack.append_stack( Array.new( [bsv1, bsv2, bsv1 ]) ); # 0 bar_stack.append_stack( Array.new( [bsv1, bsv2, bsv3,bsv31 ]) ); # 0 bar_stack.set_tooltip( ‘X label [#x_label#], Value [#val#]<br>Total [#total#]’ ); y = YAxis.new(); y.set_range( 0, 14, 2 );

x = XAxis.new(); x.set_labels_from_array( Array.new( [‘Winter’, ‘Spring’, ‘Summer’, ‘Autmn’ ]) ); tooltip = Tooltip.new; tooltip.set_hover(); chart = OpenFlashChart.new chart.set_title(title) chart.add_element(bar_stack) chart.x_axis = x ; chart.y_axis = y ; chart.set_tooltip( tooltip ); render :text => chart.to_s end

Fusion Charts:

Fusion Charts is a flash-based charting component which can generate interactive and animated charts. Fusion Charts can be used with any web scripting language, to deliver powerful charts with fairly minimal coding. Fusion Charts comes with wrapper modules for use with Ruby on Rails

Fusion Charts offers over 45 types of 2D/3D charts including line, area, bar, column, pie, doughnut (donut), combination, scatter, bubble, scroll charts etc. The functional and cosmetic aspects of each chart can be extensively customized using the XML API used by Fusion Charts. Generating charts using Fusion Charts in Ruby on Rails through a sample application. To run the sample application, the following would be needed: • FusionCharts Free/ v3: Fusion Charts Free can be downloaded by clicking here

or the commercial version with more options can be downloaded directly from www.fusioncharts.com .

Installation of Fusion Charts involves just copying and pasting the SWF and .rb files from the download package into appropriate application folder. The .rb files are present in Download Package > Code > RoR > Libraries folder. • Ruby 1.8.6 or above • Rails gem 2.0.2 or above: • MySQL 4.0 or above

All the charts explained above have its own advantages and disadvantages. The best way to use them depends on the type of the requirements of your project. Hope this article helps to implement the best use of the charts available in rails.