Skip navigation

It seemed for a while that I had one of two options when it came to graphing with Rails: use gruff or use flash.  Neither seemed very appealing to me.  For starters, gruff requires the installation of Rmagick & Imagemagick, the former of which has garbage collection issues that can result in major memory leaks (though there are workarounds).

Furthermore, it does all the processing on the server, which can take about a second or more per request.  The other option is a proprietary software solution: Did you want your subscribers to access graphs from their iPhone?  Not with flash!

Then I found flot.  It’s a pure Javascript plotting / graphing plugin built on top of jquery.  And it’s pretty slick.  It uses the canvas tag, so all the graphing is done on the client side.  It’s way faster than gruff.  The browser support is there too:  Internet Explorer 6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+

My only issue was making it easier to use in a Ruby on Rails app.  I put together the “Flotomatic” plugin about a year ago and haven’t worked on it much since.  Recently, I went back to it to add some more dynamic graphs to one of my side projects,

Sample Flotomatic Graph

It worked quite well, so I felt obliged to blog about it.

Totally Flotomatic…

Flotomatic starts with a Javascript object called Flotomatic that wraps around the flot api.  This object encapsulates the id of the canvas div, the data sets themselves, and any global options provided to flot.  Flotomatic.js is itself wrapped by rails helper methods in flot_helper.rb to simplify the generation of graphs.  The helper methods, in turn, use data sets provided by the Flot and TimeFlot Ruby classes.

Here’s how it all fits together.

In your controller you assign an instance variable to a Flot class, like so:

@flot ='my_graph_css_id') do |f|
  f.series("Line One", [[1,9], [2,18], [3,36]])
  f.series("Line Two", [[1,4], [2,8], [3,12]])

Then in your view, you use the flot helpers to include the appropriate javascript files, add a canvas div, and plot the graph.

<%= flot_includes %>
<%= flot_canvas("my_graph_css_id") %>

<% flot_graph("my_graph_css_id", @flot) do %>
   <%= flot_plot %>
<% end %>


TimeFlot allows the plotting of time based graphs.  Here’s a little more complicated example:

@flot = do |f|
  f.series_for "Ratings", @journals, :x => :entry_date,
                    :y => lambda {|journal| journal.rating * 2 }
  f.series_for "Rating (Points)", @journals, :x => :entry_date,
                    :y => :rating, :options => {:points =>
                    {:show => true}, :bars => {:show => false}}

TimeFlot’s intializer is capable of taking :xaxis or :yaxis to specify which axis should display time: :xaxis is assumed if none is provided. f.bars specifies a bar chart for each series unless otherwise specified (in the second series).  The default is a line graph.

series_for generates a data series based on a collection.  In the first example, “Ratings”, the @journals are cycled through, calling the :entry_date method to generate the x value and using the lambda provided to generate the y value.  This is particularly useful for conditionally handling data in the collection.

The second series_for illustrates a number of additional :options that may be passed in for a series.  In this case, we show the rating as points.  These values are passed directly through to flot.

There’s a lot more you can do, including providing tooltips over values and zooming in and out on a graph.  You can find out more on github.


  1. I just wanted to say thanks. I’m using flotomatic for some scientific work, and it’s great.

    I only wish the docs were a bit more extensive! I depended mainly on trial and error to get certain features working.

  2. Hi John,

    Thanks for the feedback!

    There’s a lot you can do with flot (the underlying javascript library) and I didn’t want to get to far into documenting flot itself.

    I tried to show most of what you can do in the sample app. If you cd into the examples/ directory under the plugin and run script/server and then go to http://localhost:3000/flotomatic you will see a list of examples and be able to checkout the code in the flotomatic_controller.

    I hope this helps. Please let me know if you have any other questions or issues.


  3. Aye, I think I’m going to have to start digging into the Javascript. The boss wants a box plot.

    Incidentally, what version of Flot does Flotomatic use? I can’t seem to find it.

  4. Should be the most recent one. I updated it a few weeks ago.

  5. Thanks for the plugin, it works great!

  6. I’m really excited about using Flotomatic, but when I ‘script/plugin install’ from github, I just end up with an empty flotomatic folder in my plugins folder. Any ideas?

  7. I get this error when trying to install it:

    Plugin not found: [“git://”]

    Anyone can help ?

  8. Hey Raphael,

    It sounds like github may have been down. At least that’d be my guess. Did it just start working magically at a later time?

  9. Thank you, works very well!

  10. Wow, your plugin is really useful!
    Thanks a lot for giving it to all of us.
    By the way, how can I use dynamic graphics? I look at the sample webapp in github but none of them use dynamic data.
    Best regards!

  11. If you’re talking about dynamic updating of the data as it becomes available, you’ll have to look into the ajax functionality of flot itself. Flotomatic was made more to present a static set of data easily using rails rather than javascript.

    If you mean dynamic as in interactive graphs (zooming etc.) I thought there were some examples under examples/ at localhost:3000/flotomatic

One Trackback/Pingback

  1. […] Flotomatic: a new graphing plugin for Rails « xdotcommer’s blog – January 12th ( tags: rails graph javascript jquery rubyonrails chart charts gem flot flotomatic ) […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: