Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A Ruby Gem for the Google Visualization API. Write Ruby code. Generate Javascript. Display a Google Chart.
Ruby JavaScript HTML
Branch: rails2-plugin

This branch is 1 commit ahead, 181 commits behind master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.



This GoogleVisualr plugin is no longer supported. Please use the newer and better GoogleVisualr gem (master branch) instead.


This Ruby library, GoogleVisualr, is a wrapper around the Google Visualization API and allows you to create the same visualizations with just pure Ruby; you don't have to write any JavaScript at all.

Good for any Ruby on Rails setup whereby you prefer to work your logic in models or controllers.

Please refer to the GoogleVisualr reference site for a complete list of visualizations that you can create with GoogleVisualr.

The Gist

  • In your model or controller, write Ruby code to create your visualization (e.g. Area Chart, Bar Chart, even Spark Lines etc).

  • Configure your visualization with all the options as listed in Google Visualization API Docs. E.g. Area Chart’s configuration options.

  • In your view, just call a visualization.render(div_id) method that will magically generate and insert JavaScript into the final HTML output.

  • You get your visualization, and you didn't write any JavaScript!


Do note that GoogleVisualr is not a 100% complete wrapper for the Google Visualization API. These are not implemented for sake of simplicity:

  • JavaScript Methods for use after a visualization has been rendered in a view. E.g. Area Chart’s methods.

  • JavaScript Events for use after a visualization has been rendered in a view. E.g. Area Chart’s events.

  • Visualizations not created by Google, and a few image-only charts.


Just install the GitHub repository into your app/vendor/plugin folder.

> rails my_app; cd my_app;
> script/plugin install git://


This section describes a basic implementation of the GoogleVisualr::AreaChart class.

Please review the Docs for detailed documentation and advanced implementation of constructors and methods.

In your Rails layout, load Google Ajax API in the head tag, at the very top.

<script src=''></script>

In your Rails controller, initialize a visualization (area chart) with an empty constructor.

@chart =

Populate visualization with column headers, and row values.

# Add Column Headers
@chart.add_column('string', 'Year' )
@chart.add_column('number', 'Sales')
@chart.add_column('number', 'Expenses')

# Add Rows and Values
@chart.set_value(0, 0, '2004')
@chart.set_value(0, 1, 1000)
@chart.set_value(0, 2, 400)
@chart.set_value(1, 0, '2005')
@chart.set_value(1, 1, 1170)
@chart.set_value(1, 2, 460)
@chart.set_value(2, 0, '2006')
@chart.set_value(2, 1, 1500)
@chart.set_value(2, 2, 660)
@chart.set_value(3, 0, '2007')
@chart.set_value(3, 1, 1030)
@chart.set_value(3, 2, 540)

Configure visualization with options.

@chart.width = 400
@chart.height = 240

In your Rails view, render visualization.

<div id='chart'></div>
<%= @chart.render('chart') %>


Please submit all feedback, bugs and feature-requests to GitHub Issues Tracker.

Please also feel free to clone/fork the project, and improve it further!


GoogleVisualr is maintained by Winston Teo, and his Ninja Penguin.

Who is Winston Teo? Find out more on WinstonYW, LinkedIn, or follow Winston on Twitter.


Copyright © 2010 Winston Teo Yong Wei. Free software, released under the MIT license.

Something went wrong with that request. Please try again.