Graphs in Ruby On Rails

Well I was building my personal expense tracking web app and soon enough I need to graph the top expense categories... A little searching led to gruff and it worked right outta the box.

First up, Gruff needs RMagick which needs ImageMagick. Tricky.. so go here and I hit Q#7
Soon you should land up
here download the rmagick-win32 gem zip. This archive has both RMagick gem and the install for the right version of ImageMagick. Installing the latest version of ImageMagick may not work.. (I didnt try.. the docs warned me off).
So install ImageMagick first. Next install the gem with 'gem install rmagick --local' in the folder where you unzipped the archive.
Now switch to your Rails Dev Environment. Open up config/environment.rb - Add this line at the end 'require gruff'
Add a new action to the controller of your choice.

  def showTopN
g =
g.title = "Hello Gruff"

Expense.get_top_n_categories(:limit=>10).each{ |category|, category.total_amount.to_f)

send_data g.to_blob, :disposition=>'inline', :type=>'image/png', :filename=>'top_n.pdf'

Now close all command windows. Restart Webrick (your Rails Web Server) to take into account changes made to your PATH env var.
Fire up a browser.. in my case to http://localhost:3000/outflow/showTopN

Update:Normal people would be overjoyed at this point.. but not me. I wanted to create this graph at runtime .. So when I click on a link that I imagine will be there, I callback on my controller (yes using AJAX), create my graph and then slot it into a div tag on the same page. This will help me chart different sub-sets of data without leaving the page.
But how? so I post a question on stackoverflow
require 'gruff'
class ReportController < ApplicationController
def showTopNCategories


def drawBarChart
g =
g.title = "Hello Gruff"

Expense.get_top_n_categories(:limit=>10).each{ |category|, category.total_amount.to_f)


<%content_for("page_scripts") do -%>
function updateImg(id, imageFile)
$(id).innerHTML = '<img src="/images/' + imageFile + '"/>';
<% end -%>

<!-- some controls -->
<%= link_to_remote("Refresh Chart",
:complete => "updateImg('div_barchart', request.responseText)",

<div id="div_barchart">



<html xmlns="" xml:lang="en" lang="en">
<!-- the usual -->

<script type="text/javascript"> <%= @content_for_page_scripts %> </script>
<!-- rest of the usual -->

The quirk here was that
  • gruff considers the Rails Project folder as the base folder.. so you need public/images/FileName.png as the parameter to g.write. Rails views however have public as the base folder. So image paths are relative.. /images/FileName.png
  • the javascript function didn't wire up correctly. It dies silently if you make a typo for instance. Use alert("Hit!"); liberally to know if the function is being hit.

No comments:

Post a Comment