Incite Code

Blog of a Rails Developer

Utilizing the Google Visualization API With Ruby on Rails

If you haven’t seen it yet, Google have recently released a public visualization API for generating many different types of graphs including Geo Map, and Motion Charts. The graphs are all in the nice clean style that you see in Google Analytics. The end result of the graphs is really nice, and is produced with nothing more than javascript, however anyone utilizing a framework for dynamic Web applications will likely want a more developer friendly way to embed the data.

For those of you using Ruby on Rails, I’ve written a plugin gvis that makes the syntax for embedding data a lot cleaner, and most of all, accepts ruby data arrays, handling the library loading and javascript data formatting for you. As an example to see how easy this is, lets go through setting up a new rails application and drawing a graph with this plugin.

rails graphapp
cd graphapp
script/plugin install git://github.com/jeremyolliver/gvis.git
# note you'll need git installed for the above line to work.

Now lets add a single controller and add routes for it:

script/generate controller home
config/routes.rb
1
2
3
#...
map.resources :home
#...
app/helpers/application_helper.rb
1
2
3
4
5
module ApplicationHelper
  # include the plugin module in application helper
  # so that we can add a graph anywhere in our app
  include GoogleVisualization
end

Lets add a simple layout, it need only include google’s javascript source for the visualization api, and then call render_visualizations

app/views/layouts/application.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
  <head>
    <title>Test app</title>
    <%= include_visualization_api %>
    <%= render_visualizations %>
    <%= yield :head %>
  </head>
  <body>
    <%= yield %>
  </body>
</html></pre>
Now lets render a nice fancy <a title="MotionChart - Google Visualization API" href="http://code.google.com/apis/visualization/documentation/gallery/motionchart.html">MotionChart</a> on our home page.
<pre># app/views/home/index.html.erb
<h1>Rendering a cool MotionChart</h1>

<%# This data would typically be pulled from the database,
    but lets just put some sample data into an array %>
<% chart_data = [
   ["Apples", Date.new(1998,1,1), 1000,300,'East'],
   ["Oranges", Date.new(1998,1,1), 950,200,'West'],
   ["Bananas", Date.new(1998,1,1), 300,250,'West'],
   ["Apples", Date.new(1998,2,1), 1200,400,'East'],
   ["Oranges", Date.new(1998,2,1), 950,150,'West'],
   ["Bananas", Date.new(1998,2,1), 788,617,'West']
 ] %>

<% visualization "chart_id", "MotionChart", :width => 600, :height => 400,
                             :html => {:class => "graph_class"} do |chart| %>
 <% chart.string "Fruit" %>
 <% chart.date "Date" %>
 <% chart.number "Sales" %>
 <% chart.number "Expenses" %>
 <% chart.string "Location" %>

 <% chart.add_rows(chart_data) %>
<% end %>

And VĂ³ila! we now have a beautiful Motion Chart displayed in our rails app in almost no time. Let me know if you find this useful, or you have any thoughts on how this could be improved.

Comments