Google Charts in Rails (gc4r)

Well I m going to cover the topic how to generate charts using rails. there are number of options available such as follows

Here are the plugins through which we can generate charts in rails

1) Gruff charts http://nubyonrails.com/articles/gruff-graphing-library-for-ruby

2) Sparklines http://nubyonrails.com/articles/sparklines-graph-library-for-ruby

3) Scruffy charts http://scruffy.rubyforge.org/

4) Ziya plugin http://liquidrail.com/2007/1/4/charting-the-rails/ (flash charts)

I found google charts the best of these..( ofcourse that suited my requirements). The gc4r plugin in rails is really helpful for easy integration of google charts in your rails application.

Here is how Charts are generated by Google API.

Install: ruby script/plugin install http://gc4r.googlecode.com/svn/trunk/

Supported features:
1.line chart
2.bar chart (vertical and horizontal)
3.pie chart (both 2D and 3D)
4.title, title color and size
5.data colors and legend
6.data scaling
7.multiple axis

#Controller
use_google_charts

#In method of controller

Default Chart or Hello World Chart
@chart = GoogleChart.new

Set the width of chart
@chart = GoogleLineChart.new :width => 300, :height => 200

Set the data
dataset = GoogleChartDataset.new :data => [10,50,4,10,16]
data = GoogleChartData.new :datasets => dataset
@chart = GoogleLineChart.new :width => 300, :height => 200
@chart.data = data

add a chart title
dataset = GoogleChartDataset.new :data => [10,50,4,10,16]
data = GoogleChartData.new :datasets => dataset
@chart = GoogleLineChart.new :width => 200, :height => 150, :title => ‘Java vs. Ruby Montly Job Opportunities’
@chart.data = data

Set title in array instead of string
dataset = GoogleChartDataset.new :data => [10,50,4,10,16]
data = GoogleChartData.new :datasets => dataset
@chart = GoogleLineChart.new :width => 200, :height => 150, :title => [‘Java vs. Ruby’, ‘Montly Job Opportunities’]
@chart.data = data

Multiple data in chart
dataset1 = GoogleChartDataset.new :data => [10,50,4,10,16]
dataset2 = GoogleChartDataset.new :data => [99, 81, 25, 54, 80]
data = GoogleChartData.new :datasets => [dataset1, dataset2]
@chart = GoogleLineChart.new :width => 200, :height => 150, :title => [‘Java vs. Ruby’, ‘Montly Job Opportunities’]
@chart.data = data

Add colors
dataset1 = GoogleChartDataset.new :data => [10,50,4,10,16],:color => ‘FF0000?
dataset2 = GoogleChartDataset.new :data =>[99,81,25,54,80],:color => ‘0000FF’
data = GoogleChartData.new :datasets => [dataset1, dataset2]
@chart = GoogleLineChart.new :width => 200, :height => 150, :title => [‘Java vs. Ruby’, ‘Montly Job Opportunities’]
@chart.data = data

Define legend
dataset1 = GoogleChartDataset.new :data =>[10,50,4,10,16],:color => ‘FF0000?, :title => ‘Java’
dataset2 = GoogleChartDataset.new :data=>[99,81,25,54,80],:color => ‘0000FF’, :title => ‘Ruby’
data = GoogleChartData.new :datasets => [dataset1, dataset2]
@chart = GoogleLineChart.new :width => 200, :height => 150, :title => [‘Java vs. Ruby’, ‘Montly Job Opportunities’]
@chart.data = data

Define Axis
dataset1 = GoogleChartDataset.new :data =>[10,50,4,10,16],:color => ‘FF0000?, :title => ‘Java’
dataset2 = GoogleChartDataset.new :data=>[99,81,25,54,80],:color => ‘0000FF’, :title => ‘Ruby’
data = GoogleChartData.new :datasets => [dataset1, dataset2]
axis = GoogleChartAxis.new :axis  => [GoogleChartAxis::LEFT, GoogleChartAxis::BOTTOM]
@chart = GoogleLineChart.new :width => 250, :height => 150, :title => [‘Java vs. Ruby’, ‘Montly Job Opportunities’]
@chart.data = data
@chart.axis = axis

Define Right and X Axis
dataset1 = GoogleChartDataset.new :data=> [10,50,4,10,16],:color => ‘FF0000?,  :title => ‘Java’
dataset2 = GoogleChartDataset.new :data=>[99,81,25,54,80],:color => ‘0000FF’, :title => ‘Ruby’
data = GoogleChartData.new :datasets => [dataset1, dataset2]
axis = GoogleChartAxis.new :axis  => [GoogleChartAxis::LEFT, GoogleChartAxis::BOTTOM,  GoogleChartAxis::RIGHT, GoogleChartAxis::BOTTOM]
@chart = GoogleLineChart.new :width => 300, :height => 200, :title => [‘Java vs. Ruby’, ‘Montly Job Opportunities’]
@chart.data = data
@chart.axis = axis

Define Bar Chart:
@chart = GoogleBarChart.new :width => 300, :height => 200, :title => [‘Java vs. Ruby’, ‘Montly Job Opportunities’]

Define 3D Pie Chart:
@chart = GooglePieChart.new :width => 400, :height => 200, :title => [‘Java vs. Ruby’, ‘Montly Job Opportunities’], :chart_type  => GooglePieChart::PIE_3D

#view:
<%= image_tag @chart.to_url %>