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
                    ...
Google Chart Tools
enable adding of visualizations to any web page

                     Charts API
                     -...
Google Chart Tools
enable adding of visualizations to any web page

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



                              ...
<html>
  <head>
    <!-- Load the AJAX API -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></scri...
Problems
with using Google Visualization API in a RoR environment

●   Logic in Models, Controllers or Views?

●   Possibi...
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...
Code Example
http://code.google.com/apis/visualization/documentation/using_overview.html



                              ...
controller.rb
  def pie_chart
    # Create a PieChart visualization
    @chart = GoogleVisualr::PieChart.new
    # Add Col...
Questions
asked during Singapore Ruby Brigade meetup

Q: What renders Google visualizations?
A: They are rendered using SV...
More Examples
available at http://googlevisualr.heroku.com

Types of Basic Visualizations   Types of Advanced Visualizatio...
Source
available at http://github.com/winston/google_visualr

●   Please feel free to clone/fork the source, and improve i...
Notes
on using Google Visualization API and GoogleVisualr

●   Please read the Google Visualization API and understand all...
Resources
or otherwise also known as links

● Google Chart Tools
   http://code.google.com/apis/charttools/
● Google Visua...
Thank You
Upcoming SlideShare
Loading in …5
×

GoogleVisualr - A Ruby library for Google Visualization API

7,332
-1

Published on

Slides presented at Singapore Ruby Brigade meetup on 14th April, 2010.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,332
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
65
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

GoogleVisualr - A Ruby library for Google Visualization API

  1. 1. GoogleVisualr A Ruby Library for the Google Visualization API
  2. 2. Presented by Winston Teo www.winstonyw.com @winstonyw
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. Code Example http://code.google.com/apis/visualization/documentation/using_overview.html My Daily Activities
  7. 7. <html> <head> <!-- Load the AJAX API --> <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 that will hold the pie chart--> <div id="chart_div"></div> </body> </html>
  8. 8. 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
  9. 9. A Ruby library GoogleVisualr Write Ruby code. Generate JavaScript. Display a Google visualization.
  10. 10. Installation is as simple as 1, 2, 3 > rails my_app > cd my_app > script/plugin install git://github.com/winston/google_visualr.git
  11. 11. Code Example http://code.google.com/apis/visualization/documentation/using_overview.html My Daily Activities
  12. 12. 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 <!-- Load the AJAX API --> <script src='http://www.google.com/jsapi'></script> <!-- Render PieChart --> <div id='chart'></div> <%= @chart.render('chart') %>
  13. 13. 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.
  14. 14. 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
  15. 15. 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.
  16. 16. 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
  17. 17. 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
  18. 18. Thank You
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×