Google Chart Tools (aka Google Visualization API) enables you to create beautiful charts easily, something that's useful for any dashboard design. You just have to write JavaScript in your views, and a Google chart magically appears in your rendered view.

This Ruby gem, GoogleVisualr, is a wrapper around the Google Chart Tools that allows anyone to create the same beautiful charts with just 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.

The Gist

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

Configure your chart with any of the options as listed in Google Chart Tools' API Docs.

In your view, invoke a chart.to_js(div_id) method and that will magically generate and insert JavaScript into the final HTML output.

You get your awesome Google chart, and you didn't write any JavaScript!


GoogleVisualr is created solely for the aim of simplifying the display of a chart, and not the interactions.

Hence, do note that GoogleVisualr is not a 100% complete wrapper for Google Chart Tools.

For example, Methods and Events as described in Google Chart Tools' API Docs, for use after a chart has been rendered, are not implemented because they felt more native being written as JavaScript functions, within views or .js files.


Assuming you are on Rails 3, include the gem in your Gemfile.

  gem "google_visualr", "~> 2.5.1"


This section describes a basic implementation of the GoogleVisualr::DataTable and GoogleVisualr::AreaChart classes.

For detailed documentation and advanced implementations, please review DataTable API Reference and the Chart Gallery.

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

  <script src='http://www.google.com/jsapi'></script>;

2. In your Rails controller, initialize a GoogleVisualr::DataTable object with an empty constructor.

  data_table = GoogleVisualr::DataTable.new

3. Populate data_table with column headers, and row values.

  # Add Column Headers
  data_table.new_column('string', 'Year' )
  data_table.new_column('number', 'Sales')
  data_table.new_column('number', 'Expenses')
  # Add Rows and Values
    ['2004', 1000, 400],
    ['2005', 1170, 460],
    ['2006', 660, 1120],
    ['2007', 1030, 540]

4. Create a GoogleVisualr::AreaChart with data_table and configuration options.

  option = { width: 400, height: 240, title: 'Company Performance' }<br/>
  @chart = GoogleVisualr::Interactive::AreaChart.new(data_table, option)

5. In your Rails view, render the Google chart.

  <div id='chart'></div>
  <%= render_chart @chart, 'chart' %>

Contribution and Support

The source of GoogleVisualr is available on GitHub. Please feel free to fork the project, make improvements or bug fixes and submit pull requests. Ideally, all pull requests should also come with tests!

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


This GoogleVisualr API Reference site is also available on GitHub. Do you think you can write better documentation? Then help me improve this site!

I welcome all pull requests for new or improved examples, and even language fixes. Thanks in advance!

Change Log

Please refer to GitHub.


GoogleVisualr is maintained by Winston Teo.

Who is Winston Teo? You should follow Winston on Twitter, or find out more on Winston{YW} and LinkedIn.


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