Various options

While these solutions are great, they are certainly a pain in the butt. Gruff requires RMagick (avoid RMagick as much as can) and creates static files (a real pain when your graphs change all the time) JFreeChart on the other hand requires Java, Java skills and I hate the way you create graphs:

Anyway, none of these solutions would let us create our charts in less than 5 minutes so let’s cut the story short. The best solution IMHO is to use Flash. But wait, you don’t need to know ActionScript or to own a license of Flash or Flex, we have libraries available for us to use without any Flash knowledge

XML/SWF is cool Flash library which should fulfill our needs, you can even find a rails plugin to make things easier.

amCharts

But, to be honest I’d like to have something a bit “cleaner/sexy/fancy” and easier to setup. So we’re going to use amCharts Don’t get me wrong, XML/SWF is a great library and you can make your graphs look nice (but you have to pay for support).
Since we are running out of time let’s see how to implement a nice graph using *my* favorite library.

[DISCLAIMER: amCharts is NOT open source and NOT free. But, it's cheap (85 euros per site) especially when you think of how much time you will save. AND there is a FREE version. The Free version is the same as the full version but with a link back to amcharts.com]

Setup

Unpack the files and put them in their own folder in your public folder.
Make sure you have the .swf file (amcolumn.swf for instance), a XML settings file and the fonts folder.
(You might want to also create an empty amcharts_key.txt in the same folder since the plugin tries to load the key and you don’t want to pollute your logs.)

Usage

Now you need to understand how amCharts works.

After being loaded, amCharts expects a datastream. The datastream is then parsed and displayed as a chart.
You can modify the aspect of any chart by changing its settings.
Settings are set at runtime and/or in a setting file.

Great! I won’t cover the settings file. It’s a well documented XML file you just copied in your public folder. (or check the documentation)

What we want to focus on, is the datastream. Basically we just need to create a XML file that can be parsed by amCharts.

Let’s imagine that we have a reports_controller.rb file We want to display the population of the cities in California.

(notice that I’m using rails 2.0 and that’s why my XML template is not RXML)

As you can see, we have 2 values: @cities and @populationdatalink

@cities contains all the City records, including their population etc..

@populationdatalink contains the url to retrieve the datastream.

If you wonder how I got this url? I’m simply using a named route defined in my routes.rb:

map.resources :reports, :collection => {:population => :get}

(note that you don’t need to create a restful route for that, a simple named route would have worked too)

Flash detection

Since we are going to use Flash, we want to make sure that people have the Flash plugin installed on their browser. For that we will use swfobject. Simply make sure to add swfobject.js (available in any amChart package) to your public/javascript folder. Then make sure you linked the javascript in your header:

<%= javascript_include_tag 'swfobject'%>

We now need to create our 2 views: population.html.erb and population.xml.builder

population.html.erb

Basically, this view only loads amCharts and provides it with the details of the datastream:

As you can see, we have a div called population_chart. This div is replaced at load time by the Flash object if the visitor has Flash setup locally. Think about providing some data in case the user doesn’t have Flash.

The rest is simple Javascript. I unpacked the amchart column lib in mypublic/amcolumn folder and that’s why I setup the path as “amcolumn”

Finally, I added some dynamic settings just to show you how easy it is:

12

so.addVariable("additional_chart_settings","<settings><labels><label><x>250</x><y>25</y><text_size>18</text_size><text><![CDATA[<b>California Population as of <%= Time.now.to_s(:db) %></b>]]></text></label></labels></settings>");