Chris Olsen

Well it wasn’t too many posts ago that I was raving over Ziya Charts and how wonderful they were. Things haven’t really changed in that regard, but there is another set of charting tools that can be found at amCharts which are also able to produce professional looking charts.

Getting Started

Before we get started you will have to download the required files from amCharts here. Unzip the file and move the .swf, .js, and amline_settings.xml files to a new folder, named amCharts, within your projects’ public folder.

Run the following command to create the controller, model, etc that will be used in this example.

scaffold_resource trend_item

Let us now create a migration file to create the trend_items table in the database.

1
2
3
4
5
6
7
8
9
10
11

class CreateTrendItems < ActiveRecord::Migration
  def self.up
    create_table :trend_items do |t|
      t.column :value, :integer
    end
  end
 
  def self.down
    drop_table :trend_items
  end
end

Since we are using REST we will also have to make the method that is returning that xml data available. So add the following to the routers.rb file.

1

map.resources :trend_items, :collection => {:recent => :get}

Add the additional method to the TrendItemsController class.

81
82
83
84
85

  def recent
    #render the data to an xml format
    @trend_data = TrendItem.find(:all)
    render :layout => false
  end

To make sure we get the xml format, line 84 prevents any html output from the layout. Since we are spitting out some data, so we need something to do something with this data, and who better then a recent.rxml file with a touch of the xml builder library.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

xml.chart do 
  xml.xaxis do 
    @trend_data.each_with_index do |item, index|
     xml.value(index, :xid => index)
    end
  end  
  xml.graphs do
    xml.graph(:gid => 1) do
      @trend_data.each_with_index do |item, index|
       xml.value(item.value, :xid => index)
      end
    end
  end
end

The last thing that we have to do is insert the required html. Now there are a couple of quick ways to this. We could just copy and paste the javascript that is shown below into our page.

1
2
3
4
5
6
7
8
9
10

<script type='text/javascript'>
    var amline_path = 'amline/'; 
    var amline_settingsFile = 'amline/amline_settings.xml?10';
    var amline_dataFile = '<%= formatted_recent_trend_items_url(:xml) %>';
    var amline_flashWidth = '520';
    var amline_flashHeight = '400';
    var amline_backgroundColor = '#FFFFFF';
    var amline_preloaderColor = '#000000'
</script>
<script type='text/javascript' src='amline/amline.js'></script>

But of course we know that this should be packaged up into a nice helper function to make things a little cleaner. I admit something like this could be packaged up into a nice little gem, but I am a little rusty on creating those things so I am going to have to leave it like this…for now at least.

We could throw this into the ApplicationHelper module, but it would probably best to create a separate AmCharts helper don’t you think? To do that create a new file in the app/helpers folder called am_charts_helper.rb with the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

module AmChartsHelper
 
  def render_chart(root_path, settings_file_name, callback_uri, width, height, bg_color, preloader_color)
    "<script type='text/javascript'>
    var amline_path = '#{root_path}/'; 
    var amline_settingsFile = '#{root_path}/#{settings_file_name}';
    var amline_dataFile = '#{callback_uri}';
    var amline_flashWidth = '#{width}';
    var amline_flashHeight = '#{height}';
    var amline_backgroundColor = '#{bg_color}';
    var amline_preloaderColor = '#{preloader_color}'
    </script>
    <script type='text/javascript' src='#{root_path}/amline.js'></script>"
  end
 
end

With this alone we won’t yet be able to access the methods within this helper. To do so we will have to add the following line into the ApplicationController class.

1
2
3
4
5
6

class ApplicationController < ActionController::Base
  ...
 
  helper :am_chart
 
end

Now all we have to do is call the method within the rhml page we wish for the graph to be displayed on, in this case the trend_items/index.rhtml page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<h1>Listing trend_items</h1>
 
<%= render_chart("amline", "amline_settings.xml", formatted_recent_trend_items_url(:xml), 520, 400, "#FFFFFF", "#000000") %>
 
<table>
  <tr>
  </tr>
 
<% for trend_item in @trend_items %>
  <tr>
    <td><%= link_to 'Show', trend_item_path(trend_item) %></td>
    <td><%= link_to 'Edit', edit_trend_item_path(trend_item) %></td>
    <td><%= link_to 'Destroy', trend_item_path(trend_item), :confirm => 'Are you sure?', :method => :delete %></td>
    <td><%= trend_item.value %></td>
  </tr>
<% end %>
</table>
 
<br />
 
<%= link_to 'New trend_item', new_trend_item_path %>

To test everything out I entered some quick test data and was able to get the nice little chart shown below.

My Preference

Both amCharts and Ziya Charts are simple to use once the styles are set up to your liking. There is a slight pricing difference between the two, where amCharts is more expensive for an individual site license, yet is a little less* than XML/SWF (Ziya) if you buy an unlimited. From what I have seen that is much more documentation for the Ziya (XML/SWF) charts, but from what I have seen on the amCharts forum, documentation is soon to come. If I had to make a decision right now I would probably go for the amCharts, but it is so close I could change my mind on that before I finish this post.

*~$180 at the time of writing

Technorati Tags: amCharts, charting, rubyonrails, Ziya