Motion Chart

In order to use any of the visualizations be sure you’ve followed the steps in Getting Started

The google motion chart is a bubble chart with a time dimension. What’s more, it provides an interface to change the data sets for axis and colors. It’s googles porting of the best part of hans roslings talk to the web.

Using the Motion Chart

The motion chart is used as a block helper. The main helper requires a collection. The collection can be a list of pretty much anything, though it’s most likely to be a list (array) of class instances. The helper yields the GoogleMotionChart templater to the block. The methods called on that templater are what determine the data sets given to the motion chart and their default assignment (x axis, y axis, color, label, time, bubble_size). Additional data sets can be added using the extra_column method. Each of these methods take one argument for the title of the data set and a block. The block is the method to get the value for that data set. Here is the code:

<% gap_minder_for(@collection, :width => 500, :height => 300) do |gm| %>
  <% gm.label("Department Group") {|collection_item| collection_item.group } %>
  <% gm.time("Created At") {|collection_item| collection_item.created_at } %>
  <% gm.x("X") {|collection_item| collection_item.x } %>
  <% gm.y("Y") {|collection_item| collection_item.y } %>
  <% gm.bubble_size("Z") {|collection_item| collection_item.z } %>
  <% gm.extra_column("More Data 1") {|collection_item| collection_item.more_data_1 } %>
  <% gm.extra_column("More Data 2") {|collection_item| collection_item.more_data_2 } %>
<% end %>

Also of note is the ability to specify the height and width of the motion chart on the page.