Dynamic Stat Graphs in Rails

By on January 05, 2007

What started out as a 'quick feature' turned out to be a fun Ruby endeavor - below is a guide with some neat Ruby tricks to create dynamic stat graphs (sample above) with the help of Gruff library. In my visual database explorer article I talked about generating SVG graphs with the help of Scruffy. However, SVG is a nightmare when it comes to browser compatibility issues and inline support, hence in this instance we will settle for RMagick on the backend.

First off, if you haven't already, take a look at the Gruff RDoc - there is a lot of features hidden under the covers! Assuming you have the gem and the plugin installed, let's get right to it. First the code, then the explanations:

  def stats
    g = Gruff::Line.new('580x210')
    g.theme = {
       :colors => ['#ff6600', '#3bb000', '#1e90ff', '#efba00', '#0aaafd'],
       :marker_color => '#aaa',
       :background_colors => ['#eaeaea', '#fff']
     }

    g.hide_title = true
    g.font = File.expand_path('path/to/font.ttf', RAILS_ROOT)

    range = "created_at #{(12.months.ago.to_date..Date.today).to_s(:db)}"
    @users = User.count(:all, :conditions => range, :group => "DATE_FORMAT(created_at, '%Y-%m')", :order =>"created_at ASC")
    @votes = Vote.count(:all, :conditions => range, :group => "DATE_FORMAT(created_at, '%Y-%m')", :order =>"created_at ASC")
    @bookmarks = Bookmark.count(:all, :conditions => range, :group => "DATE_FORMAT(created_at, '%Y-%m')", :order =>"created_at ASC")

    # Take the union of all keys & convert into a hash {1 => "month", 2 => "month2"...}
    # - This will be the x-axis.. representing the date range
    months = (@users.keys | @votes.keys | @bookmarks.keys).sort
    keys = Hash[*months.collect {|v| [months.index(v),v.to_s] }.flatten]

    # Plot the data - insert 0's for missing keys
    g.data("Users", keys.collect {|k,v| @users[v].nil? ? 0 : @users[v]})
    g.data("Votes", keys.collect {|k,v| @votes[v].nil? ? 0 : @votes[v]})
    g.data("Bookmarks", keys.collect {|k,v| @bookmarks[v].nil? ? 0 : @bookmarks[v]})

    g.labels = keys

    send_data(g.to_blob, :disposition => 'inline', :type => 'image/png', :filename => "site-stats.png")
  end

First few lines should be self-explanatory, we specify custom geometry, our theme colors, hide the title, and finally indicate the font we would like to use in the image. (Note: If RMagick complains about being unable to measure the font-sizes, make sure you have 'freetype-fonts' installed on your system) Next, is the SQL aggregation code, here we want to count the number of new users, votes and bookmarks on monthly basis:

range = "created_at #{(12.months.ago.to_date..Date.today).to_s(:db)}"
# .to_s(:db) is a helper to transform a date-range into SQL condition clause
#  ex. above: => "created_at BETWEEN '2006-01-05' AND '2007-01-05'"

@users = User.count(:all, :conditions => range, :group => "DATE_FORMAT(created_at, '%Y-%m')", :order =>"created_at ASC")
# - count all users, whose created_at timestamp falls within the range specified above
# - group users by 'Year-Month', and count the number of occurences within each group
# ex. result:
#   count | date
#    ---------------
#     2   | 2005-10
#    24   | 2005-11
#    32   | 2005-12

There is one catch, if we have no new records in one of the intervals, than the count will be missing from the returned OrderedHash - we need to guard against this by injecting '0' counts for the missing intervals:

# first, we will take the union of the date arrays and sort our results
# ex: [1,2] | [2,3] => [1, 2, 3]
months = (@users.keys | @votes.keys | @bookmarks.keys).sort

# This is a tricky one. For the x-axis labels, Gruff requires a hash in the form of:
#   { 1 => "label", 2=> "label2" ... }
# Hence, we have a 'months' array, which we need to convert it into a hash.
#  1) * is the splat operator - it will split our array and pass each value separately to the block
#    - give it a try, in console do: p *[1,2,3]
#  2) Next, we will iterate over every value returned by the * operator and
#     replace it with a [index, value] pair
#    - ex: [a,b,c] => [[1,a],[2,b],[3,c]]
#  3) Now we flatten the resulting array and obtain:
#      [[1,a],[2,b],[3,c]].flatten => [1,a,2,b,3,c]
#  4) Result is passed to the hash constructor, which converts every tuple
#     into a key => value pair. Giving us:
#     Hash[[1,a,2,b,3,c]] => { 1 => 'a', 2 => 'b', 3 => 'c' }
#
#   Phew..
keys = Hash[*months.collect {|v| [months.index(v),v.to_s] }.flatten]

# Now we can iterate over all keys ans insert the user values for the months
# that have a count, and otherwise provide a '0'.
g.data("Users", keys.collect {|k,v| @users[v].nil? ? 0 : @users[v]})

Almost done. After assigning the x-axis labels we call send_data to stream the resulting PNG image directly to the browser. Now all we have to do is embed our image into a page, or call it directly:

<p align="center">
    <img src="<%= url_for :controller => "admin", :action=> "stats" %>" style="border:1px solid #aabcca;" />
</p>

After adding a quick CSS border and centering the image, you can feast your eyes on the latest trends of your paradigm-shifting application. For performance reasons, I would also recommend caching the action if you plan to display your results in a high-traffic area. For my personal use, I am only showing the trends in a private administration section (shown on the left). I can afford to regenerate the image on every refresh.

For more ideas and Ruby graphing tutorials take a look at: Visual Database Explorer and Dynamic Graphics in Rails 1.2.

Ilya GrigorikIlya Grigorik is a web ecosystem engineer, author of High Performance Browser Networking (O'Reilly), and Principal Engineer at Shopify — follow on Twitter.