Graphing in Rails Roundup

We recently built a small rails app to act as a portal into a large list of reports. Rails works great for this - we've added role-based authentication, integrated legacy reportss and, hmmm, why not add sexy graphs?

The following is a quick list of the current graphing/charting choices - with the intention of adding charts into this intranet-accessed reporting app...

Image Generating: GRUFF

The most often sited lib is 'gruff'. It works by generating an image of your graph which you can serve up. The API seemed very easy to use.

http://nubyonrails.com/pages/gruff

I had some issues when there were a lot of x-axis labels. You specify which x-label points to display in a hash, and to avoid the overlap it looked as though we would have to manually calculate an interval.

NOTE: there is also a library called scruff which generates SVG graphs. It uses a similar API to gruff.

Open Flash Charts

We are currently using Open Flash Charts. It's very easy to use, looks great, and provides a large number of styles.

The way it works is you embed a flash object into your browser, and tell it an url from where it should fetch it's data.

It puts your x-axis on an oblique which avoided our problem all together.

To help out, there's a nice Rails plugin, generating all of the above. See: http://www.pullmonkey.com/projects/open_flash_chart/.

AMCHARTS

AM Charts make some really professional looking components. It's pretty similar to Open Flash Charts, but the free version is not open source and contains a link back to amcharts.com.


However, it's not too expensive and there is a rails plugin for it: Ambling.

• Ambling is a rails plugin makes it easy to generate XML needed by the wonderfully slick Amcharts.
  
• Amcharts has two kinds of XML: the data xml and the settings xml. Ambling can help with both.
  

OTHERS

Fusion Charts - v2 is free: http://www.fusioncharts.com/free/
Fusion Charts - v3 is commercial: http://www.fusioncharts.com/

XML/SWF charts
XML/SWF has a free version - which if used, generates graphs as a link - where clicking on a graph directs you to their site. A commercial version is $45 for a developer.

XML/SWF plugin for rails: http://ziya.liquidrail.com/


One issue to be aware of - Flash objects don't seem to print in Firefox. I believe other browsers work fine - in particular, IE worked under test.

A work around (in most of the above libs) is to right click a particular graph and select "Print Chart".

JAVASCRIPT BASED

This is a very cool idea - javascript draws the graph in a canvas object within the browser. It works in IE too via an emulated canvas object.
http://en.wikipedia.org/wiki/Canvas_(HTML_element)

A roundup of these are as follows:

• PLOTKIT, based on Mochikit javascript lib
  
• PLOTR, is PLOTKIT with parts rewritten to use prototype
  
• FLOT, is based off of jQuery
  
• FLOTR, is similar to FLOT but uses prototype
  

All of these are quite simple to use, and have varying levels of maturity, documentation and compatibility. However, generally speaking they support browsers where the Canvas tag is supported: Firefox 1.5+, Safari 2.0+, Opera 9.0+ and IE6+ (emulated).

It's also worth mentioning that these integrate nicely with rails - all your app need do is embed JSON data (or return it via AJAX). The javascript is trivial to use - and can be controlled dynamically on the fly.

GOOGLE CHARTS

The charts you see in google analytics are openly available via a public API.

Lot's of info on their site (probably one of the best documented), and a rails plugin is available too: http://code.google.com/p/google-charts-on-rails/.

This is a very nice options if you have a public site, but not so good for intranet applications.

CSS GRAPHS HELPER

At the other end of the scale is this little plugin. It uses nothing but HTML, CSS (and optionally some images) to generate simple bar graphs.

I liked the simplicity of this one, but we did have some issues:

• it seemed to conflict with some of our existing CSS
  
• you are limited to one graph per page
  
• all values need to be normalised to 100
  
• it seemed to go wonky when you used more than 5 data points for vertical bar graphs (you can do more with horizontal ones)
  

It may still work well for you if you can work around those limitations. It's simplicity is also it's asset: no flash, no server-side processing, and works across browsers.
http://nubyonrails.com/pages/css_graphs.


If you've found another option please leave a note in a comment.