GoogleVisualr - A Ruby library for Google Visualization API

GoogleVisualr
A Ruby Library for the Google Visualization API

Presented by

Winston Teo
www.winstonyw.com
@winstonyw

Google Chart Tools
enable adding of visualizations to any web page

Image Charts
- Using a simple URL request to a Google server
- Returns 2D images

Interactive Charts
- Using a Google developed JavaScript library
- Returns 3D interactive visualizations

Google Chart Tools
enable adding of visualizations to any web page

Charts API
- Using a simple URL request to a Google server
- Returns 2D images

Visualization API
- Using a Google developed JavaScript library
- Returns 3D interactive visualizations

Code Example
http://code.google.com/apis/visualization/documentation/using_overview.html

My Daily Activities

<html>
<head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['piechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and draws it.
function drawChart() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
['Work' , 11],
['Eat' , 2 ],
['Commute' , 2 ],
['Watch TV', 2 ],
['Sleep' , 7 ]
]);

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
}
</script>
</head>
<body>

<div id="chart_div"></div>
</body>
</html>

Problems
with using Google Visualization API in a RoR environment

● Logic in Models, Controllers or Views?

● Possibility of cluttered Views

● Conversion of Ruby elements (Array, ActiveRecord etc)
into a JavaScript string literal object is non-trivial

● Seems a little wet; not DRY

A Ruby library

GoogleVisualr
Write Ruby code.
Generate JavaScript.
Display a Google visualization.

Installation
is as simple as 1, 2, 3

> rails my_app

> cd my_app

> script/plugin install git://github.com/winston/google_visualr.git

controller.rb
def pie_chart
# Create a PieChart visualization
@chart = GoogleVisualr::PieChart.new
# Add Column Headers
@chart.add_column('string', 'Task')
@chart.add_column('number', 'Hours per Day')
# Add Number of Rows and Row Values
@chart.add_rows([
['Work' , 11],
['Eat' , 2 ],
['Commute' , 2 ],
['Watch TV', 2 ],
['Sleep' , 7 ]
]);

# Set Configuration Options for PieChart
options = { :width => 400, :height => 240,
:title => 'My Daily Activities', :is3D => true }
options.each_pair do | key, value |
@chart.send "#{key}=", value
end
end

view.html.erb

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

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

Questions
asked during Singapore Ruby Brigade meetup

Q: What renders Google visualizations?
A: They are rendered using SVG, VML, Flash or images from the Charts API.
Hence some of the visualizations may not work in mobile browsers.

Q: Why do I need to add columns (headers) and rows for a PieChart?
A: All visualizations are actually a wrapper of a DataTable JavaScript object.
By adding columns and rows, we are actually populating the DataTable,
which then materializes as its namesake-chart when render is invoked.

More Examples
available at http://googlevisualr.heroku.com

Types of Basic Visualizations Types of Advanced Visualizations
● Area Chart ● Annotated Time Line

● Bar Chart ● Motion Chart

● Column Chart ● Scatter Chart

● Line Chart ● Spark Lines

● Pie Chart ● Gauges

● Table ● Maps

Source
available at http://github.com/winston/google_visualr

● Please feel free to clone/fork the source, and improve it further.

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

Notes
on using Google Visualization API and GoogleVisualr

● Please read the Google Visualization API and understand all visualizations,
and their configuration options and limitations

● GoogleVisualr is created for simplifying the display of a visualization,
and not the interaction, and so Events are not implemented

● Google Visualization API is a W.I.P, and so can change without notice

● Consider writing your own data structure to manipulate data in AR

Resources
or otherwise also known as links

● Google Chart Tools
http://code.google.com/apis/charttools/
● Google Visualization API

http://code.google.com/apis/visualization/interactive_charts.html
● GoogleVisualr Source

http://github.com/winston/google_visualr
● GoogleVisualr Reference/Examples

http://googlevisualr.heroku.com

GoogleVisualr - A Ruby library for Google Visualization API

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Similar to GoogleVisualr - A Ruby library for Google Visualization API

Similar to GoogleVisualr - A Ruby library for Google Visualization API (20)

Recently uploaded

Recently uploaded (20)

GoogleVisualr - A Ruby library for Google Visualization API