Create interactive graph in ruby on rails

I am using the chart director 3rd party library to implement the graph. It is a well developed chart tool and gives nice attractive graph. In the internship I used chart director to implement graph in ruby on rails. Ruby has there own graph library but it not attractive therefore not suitable for commercial application.

First you have to download the chart director trial version from http://www.advsofteng.com/download.html and you can develop graph. If you satisfied you can buy a license. Install the chart director to your system. For install you can follow the read me file and install it.

In our application we are creating a graph for student and there particle one subject mark. Its bar chart and x-axis will be student name and y-axis will be marks. It is a very simple graph. To extract data we use a table called marks which include student marks and name.

Create a rails application called Graph.
You can create application through Netbeans or in command line (windows).

C:\> rails Graph

Then you have to create the database(ex:- graph_development). Then you have to edit the database.yml file in config directory. Her I am using postgres as the database. You can use mysql then “adapter: mysql” and you shoud give the username and the password in mysql database.

Development:
adapter: postgresql
database: graph_development
username: postgres
password:
host: localhost

Then go to graph folder and Run the rails application.

C:\> cd Graph
C:\Graph>ruby script/sever

Go to web browser type http://localhost:3000/ . If database is correct it should show the application’s environment without error.




Now, let’s generate the model.

C:\Graph>ruby script/generate model mark

Go to db/migrate/ and open the 20090424083035_create_marks.rb file.


class CreateMarks <>create_table :marks do |t|
t.string :name, :limit => 100, :null => false
t.string :subject_name
t.integer :scored_mark
t.timestamp :created_at
end
end

def self.down
drop_table :marks
end
end

Now you have created the required migration file, its time to execute them against the database. To do this, go to a command prompt and go to the library directory, in which the application is located, and then type rake migrate.

C:\Graph>rake db:migrate

This will create marks tables in graph_development database. Now we insert test data to newly created mark table. We use another migration for insert data.

C:\Graph>ruby script/generate migration addMarks

Then insert data to 20090424085518_addmark migration files as followes.

class Addmark <>Mark.create :name => "David", :subject_name => "Science", :scored_mark => "73"
Mark.create :name => "Smith", :subject_name => "Science", :scored_mark => "86"
Mark.create :name => "Hayden", :subject_name => "Science", :scored_mark => "54"
Mark.create :name => "Warne", :subject_name => "Science", :scored_mark => "28"
Mark.create :name => "Shane", :subject_name => "Science", :scored_mark => "67"
Mark.create :name => "Watson", :subject_name => "Science", :scored_mark => "62"
Mark.create :name => "Taylor", :subject_name => "Science", :scored_mark => "89"
Mark.create :name => "Gilcrist", :subject_name => "Science", :scored_mark => "93"
end

def self.down
end

end

Now we again run the rake command. Now the data will be inserted to the mark table and you can check by going to the table. Is it amazing!!! Ruby migration has lot of power. It is the best way to handle schema in database.

C:\Graph>rake db:migrate

Now database creating part and model part is completed. Let us write the controller and view part of our graph application.

Next we will create a controller called graph. It includes the graph code and the business logic.
C:\Graph>ruby script/generate controller graph

This command will create graph controller, helper and folder in view called graph.Then open the graph_controller.rb file. Insert the following cord. I comment all the code and you can experiment by changing value and will change the look and feel of the graph.

require("chartdirector")
class GraphController < style="color: rgb(0, 102, 0);">
# get the marks table data
@marks = Mark.find(:all,:conditions =>["subject_name =?","Science"])

#define array
data = Array.new
labels = Array.new
counter=0

#check @marks array data.
#If nil object pass it gives array therefore we validate it.
if !@marks.nil? then

#feed the data to array
for marks in @marks

# The data for the bar chart
data[counter] = marks.scored_mark.to_i
# The labels for the bar chart
labels[counter] = marks.name
counter = counter + 1

end

end

# Create a XYChart object of size 600 x 370 pixels
c = ChartDirector::XYChart.new(600, 370)

# Add a title to the chart using 18pts Times Bold Italic font
c.addTitle("Students Marks for science subject", "timesbi.ttf", 18)

# Set the plotarea at (60, 40) and of size 500 x 280 pixels. Use a vertical gradient
# color from light blue (eeeeff) to deep blue (0000cc) as background. Set border
and
# grid lines to white (ffffff).
c.setPlotArea(60, 40, 500, 280, c.linearGradientColor(60, 40, 60, 280, 0xeeeeff,
0x0000cc), -1, 0xffffff, 0xffffff)

# Add a multi-color bar chart layer using the supplied data. Use soft lighting effect
# with light direction from left.
c.addBarLayer3(data).setBorderColor(ChartDirector::Transparent,
ChartDirector::softLighting(ChartDirector::Left))

# Set x axis labels using the given labels
c.xAxis().setLabels(labels)

# Draw the ticks between label positions (instead of at label positions)
c.xAxis().setTickOffset(0.5)

# Add a title to the x and y axis with 10pts Arial Bold font
c.yAxis().setTitle("Scored Marks", "arialbd.ttf", 10)
c.xAxis().setTitle("Student name", "arialbd.ttf", 10)

# Set axis label style to 8pts Arial Bold
c.xAxis().setLabelStyle("arialbd.ttf", 8)
c.yAxis().setLabelStyle("arialbd.ttf", 8)

# Set axis line width to 2 pixels
c.xAxis().setWidth(2)
c.yAxis().setWidth(2)

# output the chart
session["chart1"] = c.makeChart2(ChartDirector::PNG)

#puts session["chart1"]
@imageMap = c.getHTMLImageMap("", "","title='{xLabel}: Marks {value}'")

end
end

After that we have to create index.rhtml and new_graph.rhtml. The code should as follows.

index.rhtml

<. iframe width="700px" height="700px" frameborder="0" name="graph" id="graph" scrolling="auto" src="/graph/new_graph">

new_graph.rhtml

<. img src="http://www.blogger.com/post-edit.do" action="" /> 'get_session_data', :id => 'chart1',
:nocache => rand) %>" border="0" usemap="#map1">
<. map name="map1">
<%= @imageMap %>

After that you can run your graph in web browser and it will give 500 server error if you use rails newer version(>2). Don’t get upset you have to do little change in environment.rb. Have to change the session type in to PStore. Now it will work fine.

config.action_controller.session_store = :PStore

Here is our interactive graph. When the mouse pointer go over an it will show the value of bar.

I have spent two days for find the solution for 500 server error. I think it will be useful for other. In chart director normal graph work fine but when it comes to interactive graph gave the error because it saves the graph in session variable. In the rails 2.0 and above version default session has limited for security reason. So it doesn’t give to store the graph in the session. Therefore we have to change the session type. Rails have five session type. In here we use PStore session type for display the interactive graph.