Googlecharts

→ ‘Sexy Charts using Google API & Ruby’

What

A nice and simple wrapper for Google Chart API

Installing

sudo gem install googlecharts

The basics

This gem supports the following types of charts:

Gchart.line()

Gchart.line_xy()

Gchart.scatter()

Gchart.bar()

Gchart.venn()

Gchart.pie()

Gchart.pie_3d()

Demonstration of usage

install: sudo gem install googlecharts

require:

require 'gchart'

Gchart.line(  :size => '200x300', 
              :title => "example title",
              :bg => 'efefef',
              :legend => ['first data set label', 'second data set label'],
              :data => [10, 30, 120, 45, 72])

---

simple line chart

  Gchart.line(:data => [0, 40, 10, 70, 20])

Generate the following url: http://chart.apis.google.com/chart?chs=300×200&chd=s:AiI9R&cht=lc

Inserted in an image tag, it will look like that:

multiple line charts

  Gchart.line(:data => [[0, 40, 10, 70, 20],[41, 10, 80, 50]])

set line colors

  Gchart.line(:data => [[0, 40, 10, 70, 20],[41, 10, 80, 50]], :line_colors => "FF0000,00FF00")

more info about color settings

bar chart

  Gchart.bar(:data => [300, 100, 30, 200])

set the bar chart orientation

  Gchart.bar(:data => [300, 100, 30, 200], :orientation => 'horizontal')

multiple bars chart

  Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]])

The problem is that by default the bars are stacked, so we need to set the colors:

  Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => 'FF0000,00FF00')

If you prefer you can use this other syntax:

  Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00'])

The problem now, is that we can’t see the first value of the second dataset since it’s lower than the first value of the first dataset. Let’s unstack the bars:

  Gchart.bar( :data => [[300, 100, 30, 200], [100, 200, 300, 10]], 
              :bar_colors => 'FF0000,00FF00',
              :stacked => false )

pie chart

  Gchart.pie(:data => [20, 35, 45])

3D pie chart

  Gchart.pie_3d(:data => [20, 35, 45])

venn diagram

Google documentation

Data set:

• the first three values specify the relative sizes of three circles, A, B, and C
• the fourth value specifies the area of A intersecting B
• the fifth value specifies the area of B intersecting C
• the sixth value specifies the area of C intersecting A
• the seventh value specifies the area of A intersecting B intersecting C

  Gchart.venn(:data => [100, 80, 60, 30, 30, 30, 10])

scatter plot

Google Documentation

Supply two data sets, the first data set specifies x coordinates, the second set specifies y coordinates, the third set the data point size.

  Gchart.scatter(:data => [[1, 2, 3, 4, 5], [1, 2, 3, 4 ,5], [5, 4, 3, 2, 1]])

---

set a chart title

  Gchart.bar(:title => "Recent Chart Sexyness", :data => [15, 30, 10, 20, 100, 20, 40, 100])

set the title size

  Gchart.bar(:title => "Recent Chart Sexyness", :title_size => 20, :data => [15, 30, 10, 20, 100, 20, 40, 100])

set the title color

  Gchart.bar(:title => "Recent Chart Sexyness", :title_color => 'FF0000', :data => [15, 30, 10, 20, 100, 20, 40, 100])

set the chart’s size

  Gchart.bar( :title => "Recent Chart Sexyness", 
              :data => [15, 30, 10, 20, 100, 20, 40, 100],
              :size => '600x400')

set the image background color

  Gchart.bar( :title => "Matt's Mojo", 
              :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80],
              :background => 'FF9994')

set the chart background color

  Gchart.bar( :title => "Matt's Mojo", 
              :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80],
              :background => 'FF9994', :chart_background => '000000')

Set bar/line colors

  Gchart.bar( :title => "Matt's Mojo", 
              :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80],
              :bar_colors => '76A4FB',
              :background => 'EEEEEE', :chart_background => 'CCCCCC')

  Gchart.line( :title => "Matt's Mojo", 
              :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80],
              :line_colors => '76A4FB')

legend / labels

  Gchart.bar( :title => "Matt vs Rob",
              :data => [[300, 100, 30, 200], [100, 200, 300, 10]], 
              :bar_colors => 'FF0000,00FF00',
              :stacked => false, :size => '400x200',
              :legend => ["Matt's Mojo", "Rob's Mojo"] )

  Gchart.line( :title => "Matt vs Rob",
              :data => [[300, 100, 30, 200], [100, 200, 300, 10]], 
              :bar_colors => ['FF0000','00FF00'],
              :stacked => false, :size => '400x200',
              :legend => ["Matt's Mojo", "Rob's Mojo"] )

  Gchart.pie_3d(  :title => 'ruby_fu', :size => '400x200',
                  :data => [10, 45, 45], :labels => ["DHH", "Rob", "Matt"] )

Display axis labels

  Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x,y,r')

or you can use the other syntax:

  Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => ['x','y','r'])

  Gchart.line(  :data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x',
                :axis_labels => ['Jan|July|Jan|July|Jan'])

or you can use the other syntax:

  Gchart.line(  :data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x',
                :axis_labels => ['Jan','July','Jan','July','Jan'])

multiple axis labels

  Gchart.line(  :data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x,r',
                :axis_labels => ['Jan|July|Jan|July|Jan', '2005|2006|2007'])

or

  Gchart.line(  :data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x,r',
                :axis_labels => [['Jan','July','Jan','July','Jan'], ['2005','2006','2007']])

(This syntax will probably be improved in the future)

custom params

I certainly didn’t cover the entire API, if you want to add your own params:

  Gchart.line( custom => 'chd=s:93zyvneTTOMJMLIJFHEAECFJGHDBFCFIERcgnpy45879,IJKNUWUWYdnswz047977315533zy1246872tnkgcaZQONHCECAAAAEII&chls=3,6,3|1,1,0')

---

Save the chart as a file

You might prefer to save the chart instead of using the url, not a problem:

  Gchart.line(:data => [0, 26], :format => 'file')

You might want to specify the path and/or the filename used to save your chart:

  Gchart.line(:data => [0, 26], :format => 'file', :filename => 'custom_filename.png')

Insert as an image tag

Because, I’m lazy, I also added a custom format:

  Gchart.line(:data => [0, 26], :format => 'img_tag')

<img src=’http://chart.apis.google.com/chart?chs=300×200&chd=s:A9&cht=lc’/>

---

Encoding

Google Chart API offers 3 types of data encoding

• simple
• text
• extended

By default this library uses the simple encoding, if you need a different type of encoding, you can change it really easily:

default / simple: chd=s:9UGoUo9C

  Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10] )

extended: chd=e:..VVGZqqVVqq..CI

  Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :encoding => 'extended' )

text: chd=t:300,100,30,200,100,200,300,10

  Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :encoding => 'text' )

(note that the text encoding doesn’t use a max value and therefore should be under 100)

Max value

Simple and extended encoding support the max value option.

The max value option is a simple way of scaling your graph. The data is converted in chart value with the highest chart value being the highest point on the graph. By default, the calculation is done for you. However you can specify your own maximum or not use a maximum at all.

  Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10] )

  Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :max_value => 500 )

  Gchart.line( :data => [100, 20, 30, 20, 10, 14, 30, 10], :max_value => false )

Repository

The trunk repository is svn://rubyforge.org/var/svn/Gchart/trunk for anonymous access.

License

This code is free to use under the terms of the MIT license.

Contact

Comments are welcome. Send an email to Matt Aimonetti

Matt Aimonetti, 19th December 2007
Theme extended from Paul Battley