googlecharts 1.3.6 → 1.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (25) hide show
  1. data/.gitignore +4 -0
  2. data/README +0 -0
  3. data/README.markdown +290 -0
  4. data/Rakefile +18 -30
  5. data/VERSION +1 -0
  6. data/lib/gchart.rb +100 -23
  7. data/lib/gchart/version.rb +2 -2
  8. data/lib/themes.yml +45 -0
  9. data/script/destroy +14 -0
  10. data/script/generate +14 -0
  11. data/script/txt2html +74 -0
  12. data/spec/fixtures/another_test_theme.yml +8 -0
  13. data/spec/fixtures/test_theme.yml +8 -0
  14. data/spec/gchart_spec.rb +210 -90
  15. data/spec/spec.opts +4 -1
  16. data/tasks/deployment.rake +34 -0
  17. data/tasks/website.rake +17 -0
  18. data/website/index.html +732 -0
  19. data/website/index.txt +570 -0
  20. data/website/javascripts/rounded_corners_lite.inc.js +285 -0
  21. data/website/stylesheets/screen.css +139 -0
  22. data/website/template.rhtml +53 -0
  23. metadata +38 -49
  24. data.tar.gz.sig +0 -2
  25. metadata.gz.sig +0 -3
data/spec/spec.opts CHANGED
@@ -1 +1,4 @@
1
- --colour
1
+ spec/
2
+ spec/gchart_spec.rb
3
+ spec/
4
+ spec/
data/tasks/deployment.rake ADDED
@@ -0,0 +1,34 @@
1
+ desc 'Release the website and new gem version'
2
+ task :deploy => [:check_version, :website, :release] do
3
+ puts "Remember to create SVN tag:"
4
+ puts "svn copy svn+ssh://#{rubyforge_username}@rubyforge.org/var/svn/#{PATH}/trunk " +
5
+ "svn+ssh://#{rubyforge_username}@rubyforge.org/var/svn/#{PATH}/tags/REL-#{VERS} "
6
+ puts "Suggested comment:"
7
+ puts "Tagging release #{CHANGES}"
8
+ end
9
+
10
+ desc 'Runs tasks website_generate and install_gem as a local deployment of the gem'
11
+ task :local_deploy => [:website_generate, :install_gem]
12
+
13
+ task :check_version do
14
+ unless ENV['VERSION']
15
+ puts 'Must pass a VERSION=x.y.z release version'
16
+ exit
17
+ end
18
+ unless ENV['VERSION'] == VERS
19
+ puts "Please update your version.rb to match the release version, currently #{VERS}"
20
+ exit
21
+ end
22
+ end
23
+
24
+ desc 'Install the package as a gem, without generating documentation(ri/rdoc)'
25
+ task :install_gem_no_doc => [:clean, :package] do
26
+ sh "#{'sudo ' unless Hoe::WINDOZE }gem install pkg/*.gem --no-rdoc --no-ri"
27
+ end
28
+
29
+ namespace :manifest do
30
+ desc 'Recreate Manifest.txt to include ALL files'
31
+ task :refresh do
32
+ `rake check_manifest | patch -p0 > Manifest.txt`
33
+ end
34
+ end
data/tasks/website.rake ADDED
@@ -0,0 +1,17 @@
1
+ desc 'Generate website files'
2
+ task :website_generate => :ruby_env do
3
+ (Dir['website/**/*.txt'] - Dir['website/version*.txt']).each do |txt|
4
+ sh %{ #{RUBY_APP} script/txt2html #{txt} > #{txt.gsub(/txt$/,'html')} }
5
+ end
6
+ end
7
+
8
+ desc 'Upload website files to rubyforge'
9
+ task :website_upload do
10
+ host = "#{rubyforge_username}@rubyforge.org"
11
+ remote_dir = "/var/www/gforge-projects/#{PATH}/"
12
+ local_dir = 'website'
13
+ sh %{rsync -aCv #{local_dir}/ #{host}:#{remote_dir}}
14
+ end
15
+
16
+ desc 'Generate and upload website files'
17
+ task :website => [:website_generate, :website_upload, :publish_docs]
data/website/index.html ADDED
@@ -0,0 +1,732 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
+ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4
+ <head>
5
+ <link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" />
6
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7
+ <title>
8
+ Googlecharts
9
+ </title>
10
+ <script src="javascripts/rounded_corners_lite.inc.js" type="text/javascript"></script>
11
+ <style>
12
+
13
+ </style>
14
+ <script type="text/javascript">
15
+ window.onload = function() {
16
+ settings = {
17
+ tl: { radius: 10 },
18
+ tr: { radius: 10 },
19
+ bl: { radius: 10 },
20
+ br: { radius: 10 },
21
+ antiAlias: true,
22
+ autoPad: true,
23
+ validTags: ["div"]
24
+ }
25
+ var versionBox = new curvyCorners(settings, document.getElementById("version"));
26
+ versionBox.applyCornersToAll();
27
+ }
28
+ </script>
29
+ </head>
30
+ <body>
31
+ <div id="main">
32
+
33
+ <h1>Googlecharts</h1>
34
+ <div id="version" class="clickable" onclick='document.location = "http://rubyforge.org/projects/googlecharts"; return false'>
35
+ <p>Get Version</p>
36
+ <a href="http://rubyforge.org/projects/googlecharts" class="numbers">1.3.4</a>
37
+ </div>
38
+ <h2>&#x2192; &#8216;Sexy Charts using Google <span class="caps">API</span> &#38; Ruby&#8217;</h2>
39
+
40
+
41
+ <h2>What</h2>
42
+
43
+
44
+ <p>A nice and simple wrapper for <a href="http://code.google.com/apis/chart/">Google Chart <span class="caps">API</span></a>
45
+ (Fully tested using RSpec, check the specs for more usage examples)</p>
46
+
47
+
48
+ <h2>Installing</h2>
49
+
50
+
51
+ <p>This project is now hosted at <a href="http://github.com">GitHub</a>
52
+ If you never added <a href="http://github.com">GitHub</a> as a gem source, you will need to do the following:
53
+ <pre class='syntax'><span class="global">$ </span><span class="ident">gem</span> <span class="ident">sources</span> <span class="punct">-</span><span class="ident">a</span> <span class="ident">http</span><span class="punct">:/</span><span class="regex"></span><span class="punct">/</span><span class="ident">gems</span><span class="punct">.</span><span class="ident">github</span><span class="punct">.</span><span class="ident">com</span><span class="punct">/</span></pre> (you only need to do this once)</p>
54
+
55
+
56
+ <p><pre class='syntax'><span class="global">$ </span><span class="ident">sudo</span> <span class="ident">gem</span> <span class="ident">install</span> <span class="ident">mattetti</span><span class="punct">-</span><span class="ident">googlecharts</span></pre></p>
57
+
58
+
59
+ <p>or <pre class='syntax'><span class="global">$ </span><span class="ident">sudo</span> <span class="ident">gem</span> <span class="ident">install</span> <span class="ident">googlecharts</span></pre></p>
60
+
61
+
62
+ <h2>The basics</h2>
63
+
64
+
65
+ <p>This gem supports the following types of charts:</p>
66
+
67
+
68
+ <p><img src="http://chart.apis.google.com/chart?cht=lc&#38;chs=200x125&#38;chd=s:helloWorld&#38;chxt=x,y&#38;chxl=0:|Mar|Apr|May|June|July|1:||50+Kb" title="Line" alt="Line" /> Gchart.line()</p>
69
+
70
+
71
+ <p><img src="http://chart.apis.google.com/chart?cht=lxy&#38;chs=200x125&#38;chd=t:0,30,60,70,90,95,100|20,30,40,50,60,70,80|10,30,40,45,52|100,90,40,20,10|-1|5,33,50,55,7&#38;chco=3072F3,ff0000,00aaaa&#38;chls=2,4,1&#38;chm=s,FF0000,0,-1,5|s,0000ff,1,-1,5|s,00aa00,2,-1,5" title="line_xy" alt="line_xy" /> Gchart.line_xy()</p>
72
+
73
+
74
+ <p><img src="http://chart.apis.google.com/chart?cht=s&#38;chd=s:984sttvuvkQIBLKNCAIi,DEJPgq0uov17zwopQODS,AFLPTXaflptx159gsDrn&#38;chxt=x,y&#38;chxl=0:|0|2|3|4|5|6|7|8|9|10|1:|0|25|50|75|100&#38;chs=200x125" title="scatter" alt="scatter" /> Gchart.scatter()</p>
75
+
76
+
77
+ <p><img src="http://chart.apis.google.com/chart?cht=bvg&#38;chs=200x125&#38;chd=s:hello,world&#38;chco=cc0000,00aa00" title="bar" alt="bar" /> Gchart.bar()</p>
78
+
79
+
80
+ <p><img src="http://chart.apis.google.com/chart?cht=v&#38;chs=200x100&#38;chd=t:100,80,60,30,30,30,10" title="venn" alt="venn" /> Gchart.venn()</p>
81
+
82
+
83
+ <p><img src="http://chart.apis.google.com/chart?cht=p&#38;chd=s:world5&#38;chs=200x125&#38;chl=A|B|C|D|E|Fe" title="pie" alt="pie" /> Gchart.pie()</p>
84
+
85
+
86
+ <p><img src="http://chart.apis.google.com/chart?cht=p3&#38;chd=s:Uf9a&#38;chs=200x100&#38;chl=A|B|C|D" title="pie_3d" alt="pie_3d" /> Gchart.pie_3d()</p>
87
+
88
+
89
+ <p><img src="http://chart.apis.google.com/chart?chs=100x20&#38;cht=ls&#38;chco=0077CC&#38;chm=B,E6F2FA,0,0,0&#38;chls=1,0,0&#38;chd=t:27,25,25,25,25,27,100,31,25,36,25,25,39,25,31,25,25,25,26,26,25,25,28,25,25,100,28,27,31,25,27,27,29,25,27,26,26,25,26,26,35,33,34,25,26,25,36,25,26,37,33,33,37,37,39,25,25,25,25" title="sparkline" alt="sparkline" />Gchart.sparkline()</p>
90
+
91
+
92
+ <p><img src="http://chart.apis.google.com/chart?chs=225x125&#38;cht=gom&#38;chd=t:70&#38;chl=Flavor" title="google-o-meter" alt="google-o-meter" /> Gchart.meter()</p>
93
+
94
+
95
+ <h2>Demonstration of usage</h2>
96
+
97
+
98
+ <p>install:</p>
99
+
100
+
101
+ <code>sudo gem install mattetti-googlecharts</code>
102
+
103
+ <p>or use rubyforge:</p>
104
+
105
+
106
+ <code>sudo gem install googlecharts</code>
107
+
108
+ <p>require:
109
+ <pre class='syntax'><span class="ident">require</span> <span class="punct">'</span><span class="string">gchart</span><span class="punct">'</span></pre></p>
110
+
111
+
112
+ <p><pre class='syntax'>
113
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:size</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">200x300</span><span class="punct">',</span>
114
+ <span class="symbol">:title</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">example title</span><span class="punct">&quot;,</span>
115
+ <span class="symbol">:bg</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">efefef</span><span class="punct">',</span>
116
+ <span class="symbol">:legend</span> <span class="punct">=&gt;</span> <span class="punct">['</span><span class="string">first data set label</span><span class="punct">',</span> <span class="punct">'</span><span class="string">second data set label</span><span class="punct">'],</span>
117
+ <span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">10</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">120</span><span class="punct">,</span> <span class="number">45</span><span class="punct">,</span> <span class="number">72</span><span class="punct">])</span></pre></p>
118
+
119
+
120
+ <hr />
121
+
122
+
123
+ <p><strong>simple line chart</strong>
124
+ <pre class='syntax'>
125
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">0</span><span class="punct">,</span> <span class="number">40</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">70</span><span class="punct">,</span> <span class="number">20</span><span class="punct">])</span>
126
+ </pre></p>
127
+
128
+
129
+ <p>Generate the following url: http://chart.apis.google.com/chart?chs=300&#215;200&#38;chd=s:AiI9R&#38;cht=lc</p>
130
+
131
+
132
+ <p>Inserted in an image tag, it will look like that:</p>
133
+
134
+
135
+ <p><img src="http://chart.apis.google.com/chart?chs=300x200&#38;chd=s:AiI9R&#38;cht=lc" title="simple line chart" alt="simple line chart" /></p>
136
+
137
+
138
+ <p><strong>multiple line charts</strong>
139
+ <pre class='syntax'>
140
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[[</span><span class="number">0</span><span class="punct">,</span> <span class="number">40</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">70</span><span class="punct">,</span> <span class="number">20</span><span class="punct">],[</span><span class="number">41</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">80</span><span class="punct">,</span> <span class="number">50</span><span class="punct">]])</span>
141
+ </pre></p>
142
+
143
+
144
+ <p><img src="http://chart.apis.google.com/chart?cht=lc&#38;chs=300x200&#38;chd=s:AeH1P,fH9m" title="multiple lines chart" alt="multiple lines chart" /></p>
145
+
146
+
147
+ <p><strong>set line colors</strong></p>
148
+
149
+
150
+ <p><pre class='syntax'>
151
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[[</span><span class="number">0</span><span class="punct">,</span> <span class="number">40</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">70</span><span class="punct">,</span> <span class="number">20</span><span class="punct">],[</span><span class="number">41</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">80</span><span class="punct">,</span> <span class="number">50</span><span class="punct">]],</span> <span class="symbol">:line_colors</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">FF0000,00FF00</span><span class="punct">&quot;)</span>
152
+ </pre></p>
153
+
154
+
155
+ <p><img src="http://chart.apis.google.com/chart?cht=lc&#38;chs=300x200&#38;chd=s:AeH1P,fH9m&#38;chco=FF0000,00FF00" title="line colors" alt="line colors" /></p>
156
+
157
+
158
+ <p><a href="http://code.google.com/apis/chart/#chart_colors">more info about color settings</a></p>
159
+
160
+
161
+ <p><strong>sparkline chart</strong></p>
162
+
163
+
164
+ <p><pre class='syntax'>
165
+ <span class="ident">data</span> <span class="punct">=</span> <span class="punct">[</span><span class="number">27</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">27</span><span class="punct">,</span><span class="number">100</span><span class="punct">,</span><span class="number">31</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">36</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">39</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">31</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">26</span><span class="punct">,</span><span class="number">26</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">28</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">100</span><span class="punct">,</span><span class="number">28</span><span class="punct">,</span><span class="number">27</span><span class="punct">,</span><span class="number">31</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">27</span><span class="punct">,</span><span class="number">27</span><span class="punct">,</span><span class="number">29</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">27</span><span class="punct">,</span><span class="number">26</span><span class="punct">,</span><span class="number">26</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">26</span><span class="punct">,</span><span class="number">26</span><span class="punct">,</span><span class="number">35</span><span class="punct">,</span><span class="number">33</span><span class="punct">,</span><span class="number">34</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">26</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">36</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">26</span><span class="punct">,</span><span class="number">37</span><span class="punct">,</span><span class="number">33</span><span class="punct">,</span><span class="number">33</span><span class="punct">,</span><span class="number">37</span><span class="punct">,</span><span class="number">37</span><span class="punct">,</span><span class="number">39</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">25</span><span class="punct">,</span><span class="number">25</span><span class="punct">]</span>
166
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">sparkline</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="ident">data</span><span class="punct">,</span> <span class="symbol">:size</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">120x40</span><span class="punct">',</span> <span class="symbol">:line_colors</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">0077CC</span><span class="punct">')</span>
167
+ </pre></p>
168
+
169
+
170
+ <p><img src="http://chart.apis.google.com/chart?chd=s:QPPPPQ9SPVPPXPSPPPPPPPRPP9RQSPQQRPQPPPPPVUUPPPVPPWUUWWXPPPP&#38;chco=0077CC&#38;chs=120x40&#38;cht=ls" title="sparline" alt="sparline" /></p>
171
+
172
+
173
+ <p>A sparkline chart has exactly the same parameters as a line chart. The only difference is that the axes lines are not drawn for sparklines by default.</p>
174
+
175
+
176
+ <p><strong>bar chart</strong></p>
177
+
178
+
179
+ <p><pre class='syntax'>
180
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">])</span>
181
+ </pre>
182
+ <img src="http://chart.apis.google.com/chart?cht=bvs&#38;chs=300x200&#38;chd=s:9UGo" title="bars" alt="bars" /></p>
183
+
184
+
185
+ <p><strong>set the bar chart orientation</strong></p>
186
+
187
+
188
+ <p><pre class='syntax'>
189
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">],</span> <span class="symbol">:orientation</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">horizontal</span><span class="punct">')</span>
190
+ </pre>
191
+ <img src="http://chart.apis.google.com/chart?cht=bhs&#38;chs=300x200&#38;chd=s:9UGo" title="bars" alt="bars" /></p>
192
+
193
+
194
+ <p><strong>multiple bars chart</strong></p>
195
+
196
+
197
+ <p><pre class='syntax'>
198
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">],</span> <span class="punct">[</span><span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">]])</span>
199
+ </pre></p>
200
+
201
+
202
+ <p><img src="http://chart.apis.google.com/chart?cht=bvs&#38;chs=300x200&#38;chd=s:9UGo,Uo9C" title="stacked multiple bars" alt="stacked multiple bars" /></p>
203
+
204
+
205
+ <p>The problem is that by default the bars are stacked, so we need to set the colors:</p>
206
+
207
+
208
+ <p><pre class='syntax'>
209
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">],</span> <span class="punct">[</span><span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">]],</span> <span class="symbol">:bar_colors</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">FF0000,00FF00</span><span class="punct">')</span>
210
+ </pre></p>
211
+
212
+
213
+ <p>If you prefer you can use this other syntax:</p>
214
+
215
+
216
+ <p><pre class='syntax'>
217
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">],</span> <span class="punct">[</span><span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">]],</span> <span class="symbol">:bar_colors</span> <span class="punct">=&gt;</span> <span class="punct">['</span><span class="string">FF0000</span><span class="punct">',</span> <span class="punct">'</span><span class="string">00FF00</span><span class="punct">'])</span>
218
+ </pre></p>
219
+
220
+
221
+ <p><img src="http://chart.apis.google.com/chart?cht=bvs&#38;chs=300x200&#38;chd=s:9UGo,Uo9C&#38;chco=FF0000,00FF00" title="colors" alt="colors" /></p>
222
+
223
+
224
+ <p>The problem now, is that we can&#8217;t see the first value of the second dataset since it&#8217;s lower than the first value of the first dataset. Let&#8217;s unstack the bars:</p>
225
+
226
+
227
+ <p><pre class='syntax'>
228
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">],</span> <span class="punct">[</span><span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">]],</span>
229
+ <span class="symbol">:bar_colors</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">FF0000,00FF00</span><span class="punct">',</span>
230
+ <span class="symbol">:stacked</span> <span class="punct">=&gt;</span> <span class="constant">false</span> <span class="punct">)</span>
231
+ </pre></p>
232
+
233
+
234
+ <p><img src="http://chart.apis.google.com/chart?cht=bvg&#38;chs=300x200&#38;chd=s:9UGo,Uo9C&#38;chco=FF0000,00FF00" title="grouped bars" alt="grouped bars" /></p>
235
+
236
+
237
+ <p><strong>bar chart width and spacing</strong></p>
238
+
239
+
240
+ <p>A bar chart can accept options to set the width of the bars, spacing between bars and spacing between bar groups. To set these, you can either provide a string, array or hash.</p>
241
+
242
+
243
+ <p>The Google <span class="caps">API</span> sets these options in the order of width, spacing, and group spacing, with both spacing values being optional. So, if you provide a string or array, provide them in that order:</p>
244
+
245
+
246
+ <p><pre class='syntax'>
247
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="attribute">@data</span><span class="punct">,</span> <span class="symbol">:bar_width_and_spacing</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">25,6</span><span class="punct">')</span> <span class="comment"># width of 25, spacing of 6</span>
248
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="attribute">@data</span><span class="punct">,</span> <span class="symbol">:bar_width_and_spacing</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">25,6,12</span><span class="punct">')</span> <span class="comment"># width of 25, spacing of 6, group spacing of 12</span>
249
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="attribute">@data</span><span class="punct">,</span> <span class="symbol">:bar_width_and_spacing</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">25</span><span class="punct">,</span><span class="number">6</span><span class="punct">])</span> <span class="comment"># width of 25, spacing of 6</span>
250
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="attribute">@data</span><span class="punct">,</span> <span class="symbol">:bar_width_and_spacing</span> <span class="punct">=&gt;</span> <span class="number">25</span><span class="punct">)</span> <span class="comment"># width of 25</span>
251
+ </pre></p>
252
+
253
+
254
+ <p>The hash lets you set these values directly, with the Google default values set for any options you don&#8217;t include:</p>
255
+
256
+
257
+ <p><pre class='syntax'>
258
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="attribute">@data</span><span class="punct">,</span> <span class="symbol">:bar_width_and_spacing</span> <span class="punct">=&gt;</span> <span class="punct">{</span><span class="symbol">:width</span> <span class="punct">=&gt;</span> <span class="number">19</span><span class="punct">})</span>
259
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="attribute">@data</span><span class="punct">,</span> <span class="symbol">:bar_width_and_spacing</span> <span class="punct">=&gt;</span> <span class="punct">{</span><span class="symbol">:spacing</span> <span class="punct">=&gt;</span> <span class="number">10</span><span class="punct">,</span> <span class="symbol">:group_spacing</span> <span class="punct">=&gt;</span> <span class="number">12</span><span class="punct">})</span>
260
+ </pre></p>
261
+
262
+
263
+ <p><strong>pie chart</strong></p>
264
+
265
+
266
+ <p><pre class='syntax'>
267
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">pie</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">20</span><span class="punct">,</span> <span class="number">35</span><span class="punct">,</span> <span class="number">45</span><span class="punct">])</span>
268
+ </pre>
269
+ <img src="http://chart.apis.google.com/chart?cht=p&#38;chs=300x200&#38;chd=s:bv9" title="Pie Chart" alt="Pie Chart" /></p>
270
+
271
+
272
+ <p><strong>3D pie chart</strong></p>
273
+
274
+
275
+ <p><pre class='syntax'>
276
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">pie_3d</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">20</span><span class="punct">,</span> <span class="number">35</span><span class="punct">,</span> <span class="number">45</span><span class="punct">])</span>
277
+ </pre>
278
+ <img src="http://chart.apis.google.com/chart?cht=p3&#38;chs=300x200&#38;chd=s:bv9" title="Pie Chart" alt="Pie Chart" /></p>
279
+
280
+
281
+ <p><strong>venn diagram</strong></p>
282
+
283
+
284
+ <p><a href="http://code.google.com/apis/chart/#venn">Google documentation</a></p>
285
+
286
+
287
+ Data set:
288
+ <ul>
289
+ <li>the first three values specify the relative sizes of three circles, A, B, and C</li>
290
+ <li>the fourth value specifies the area of A intersecting B</li>
291
+ <li>the fifth value specifies the area of B intersecting C</li>
292
+ <li>the sixth value specifies the area of C intersecting A</li>
293
+ <li>the seventh value specifies the area of A intersecting B intersecting C</li>
294
+ </ul>
295
+
296
+
297
+ <p><pre class='syntax'>
298
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">venn</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">100</span><span class="punct">,</span> <span class="number">80</span><span class="punct">,</span> <span class="number">60</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">10</span><span class="punct">])</span>
299
+ </pre>
300
+ <img src="http://chart.apis.google.com/chart?cht=v&#38;chs=300x200&#38;chd=s:9wkSSSG" title="Venn" alt="Venn" /></p>
301
+
302
+
303
+ <p><strong>scatter plot</strong></p>
304
+
305
+
306
+ <p><a href="http://code.google.com/apis/chart/#scatter_plot">Google Documentation</a></p>
307
+
308
+
309
+ <p>Supply two data sets, the first data set specifies x coordinates, the second set specifies y coordinates, the third set the data point size.</p>
310
+
311
+
312
+ <p><pre class='syntax'>
313
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">scatter</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[[</span><span class="number">1</span><span class="punct">,</span> <span class="number">2</span><span class="punct">,</span> <span class="number">3</span><span class="punct">,</span> <span class="number">4</span><span class="punct">,</span> <span class="number">5</span><span class="punct">],</span> <span class="punct">[</span><span class="number">1</span><span class="punct">,</span> <span class="number">2</span><span class="punct">,</span> <span class="number">3</span><span class="punct">,</span> <span class="number">4</span> <span class="punct">,</span><span class="number">5</span><span class="punct">],</span> <span class="punct">[</span><span class="number">5</span><span class="punct">,</span> <span class="number">4</span><span class="punct">,</span> <span class="number">3</span><span class="punct">,</span> <span class="number">2</span><span class="punct">,</span> <span class="number">1</span><span class="punct">]])</span>
314
+ </pre></p>
315
+
316
+
317
+ <p><img src="http://chart.apis.google.com/chart?cht=s&#38;chs=300x200&#38;chd=s:MYkw9,MYkw9,9wkYM" title="scatter" alt="scatter" /></p>
318
+
319
+
320
+ <p><strong>google-o-meter</strong></p>
321
+
322
+
323
+ <p><a href="http://code.google.com/apis/chart/#gom">Google Documentation</a></p>
324
+
325
+
326
+ <p>Supply a single label that will be what the arrow points to. It only supports a solid fill for the background.</p>
327
+
328
+
329
+ <p><pre class='syntax'>
330
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">meter</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">70</span><span class="punct">],</span> <span class="symbol">:label</span> <span class="punct">=&gt;</span> <span class="punct">['</span><span class="string">Flavor</span><span class="punct">'])</span>
331
+ </pre></p>
332
+
333
+
334
+ <hr />
335
+
336
+
337
+ <p><strong>set a chart title</strong></p>
338
+
339
+
340
+ <p><pre class='syntax'>
341
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:title</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">Recent Chart Sexyness</span><span class="punct">&quot;,</span> <span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">15</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">40</span><span class="punct">,</span> <span class="number">100</span><span class="punct">])</span>
342
+ </pre></p>
343
+
344
+
345
+ <p><img src="http://chart.apis.google.com/chart?cht=bvs&#38;chs=300x200&#38;chd=s:JSGM9MY9&#38;chtt=Recent+Chart+Sexyness" title="chart title" alt="chart title" /></p>
346
+
347
+
348
+ <p><strong>set the title size</strong></p>
349
+
350
+
351
+ <p><pre class='syntax'>
352
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:title</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">Recent Chart Sexyness</span><span class="punct">&quot;,</span> <span class="symbol">:title_size</span> <span class="punct">=&gt;</span> <span class="number">20</span><span class="punct">,</span> <span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">15</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">40</span><span class="punct">,</span> <span class="number">100</span><span class="punct">])</span>
353
+ </pre></p>
354
+
355
+
356
+ <p><img src="http://chart.apis.google.com/chart?cht=bvs&#38;chs=300x200&#38;chd=s:JSGM9MY9&#38;chtt=Recent+Chart+Sexyness&#38;chts=454545,20" title="title size" alt="title size" /></p>
357
+
358
+
359
+ <p><strong>set the title color</strong></p>
360
+
361
+
362
+ <p><pre class='syntax'>
363
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:title</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">Recent Chart Sexyness</span><span class="punct">&quot;,</span> <span class="symbol">:title_color</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">FF0000</span><span class="punct">',</span> <span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">15</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">40</span><span class="punct">,</span> <span class="number">100</span><span class="punct">])</span>
364
+ </pre></p>
365
+
366
+
367
+ <p><img src="http://chart.apis.google.com/chart?cht=bvs&#38;chs=300x200&#38;chd=s:JSGM9MY9&#38;chtt=Recent+Chart+Sexyness&#38;chts=FF0000" title="Title color" alt="Title color" /></p>
368
+
369
+
370
+ <p><strong>set the chart&#8217;s size</strong></p>
371
+
372
+
373
+ <p><pre class='syntax'>
374
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:title</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">Recent Chart Sexyness</span><span class="punct">&quot;,</span>
375
+ <span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">15</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">40</span><span class="punct">,</span> <span class="number">100</span><span class="punct">],</span>
376
+ <span class="symbol">:size</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">600x400</span><span class="punct">')</span>
377
+ </pre></p>
378
+
379
+
380
+ <p><img src="http://chart.apis.google.com/chart?cht=bvs&#38;chs=600x400&#38;chd=s:JSGM9MY9&#38;chtt=Recent+Chart+Sexyness" title="size" alt="size" /></p>
381
+
382
+
383
+ <p><strong>set the image background color</strong></p>
384
+
385
+
386
+ <p><pre class='syntax'>
387
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:title</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">Matt's Mojo</span><span class="punct">&quot;,</span>
388
+ <span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">15</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">40</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">90</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">80</span><span class="punct">],</span>
389
+ <span class="symbol">:background</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">FF9994</span><span class="punct">')</span>
390
+ </pre></p>
391
+
392
+
393
+ <p><img src="http://chart.apis.google.com/chart?chf=bg,s,FF9994&#38;cht=bvs&#38;chs=300x200&#38;chd=s:JSGM9MY929w&#38;chtt=Matt's+Mojo" title="Background" alt="Background" /></p>
394
+
395
+
396
+ <p><strong>set the chart background color</strong></p>
397
+
398
+
399
+ <p><pre class='syntax'>
400
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:title</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">Matt's Mojo</span><span class="punct">&quot;,</span>
401
+ <span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">15</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">40</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">90</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">80</span><span class="punct">],</span>
402
+ <span class="symbol">:background</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">FF9994</span><span class="punct">',</span> <span class="symbol">:chart_background</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">000000</span><span class="punct">')</span>
403
+ </pre></p>
404
+
405
+
406
+ <p><img src="http://chart.apis.google.com/chart?chf=c,s,000000|bg,s,FF9994&#38;cht=bvs&#38;chs=300x200&#38;chd=s:JSGM9MY929w&#38;chtt=Matt's+Mojo" title="chart background" alt="chart background" /></p>
407
+
408
+
409
+ <p><strong>Set bar/line colors</strong></p>
410
+
411
+
412
+ <p><pre class='syntax'>
413
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:title</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">Matt's Mojo</span><span class="punct">&quot;,</span>
414
+ <span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">15</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">40</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">90</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">80</span><span class="punct">],</span>
415
+ <span class="symbol">:bar_colors</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">76A4FB</span><span class="punct">',</span>
416
+ <span class="symbol">:background</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">EEEEEE</span><span class="punct">',</span> <span class="symbol">:chart_background</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">CCCCCC</span><span class="punct">')</span>
417
+ </pre></p>
418
+
419
+
420
+ <p><img src="http://chart.apis.google.com/chart?chf=c,s,CCCCCC|bg,s,EEEEEE&#38;cht=bvs&#38;chs=300x200&#38;chd=s:JSGM9MY929w&#38;chco=76A4FB&#38;chtt=Matt's+Mojo" title="bar colors" alt="bar colors" /></p>
421
+
422
+
423
+ <p><pre class='syntax'>
424
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:title</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">Matt's Mojo</span><span class="punct">&quot;,</span>
425
+ <span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">15</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">40</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">90</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">80</span><span class="punct">],</span>
426
+ <span class="symbol">:line_colors</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">76A4FB</span><span class="punct">')</span>
427
+ </pre></p>
428
+
429
+
430
+ <p><img src="http://chart.apis.google.com/chart?cht=lc&#38;chs=300x200&#38;chd=s:JSGM9MY929w&#38;chco=76A4FB&#38;chtt=Matt's+Mojo" title="line colors" alt="line colors" /></p>
431
+
432
+
433
+ <p><strong>legend / labels</strong></p>
434
+
435
+
436
+ <p><pre class='syntax'>
437
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">bar</span><span class="punct">(</span><span class="symbol">:title</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">Matt vs Rob</span><span class="punct">&quot;,</span>
438
+ <span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">],</span> <span class="punct">[</span><span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">]],</span>
439
+ <span class="symbol">:bar_colors</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">FF0000,00FF00</span><span class="punct">',</span>
440
+ <span class="symbol">:stacked</span> <span class="punct">=&gt;</span> <span class="constant">false</span><span class="punct">,</span> <span class="symbol">:size</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">400x200</span><span class="punct">',</span>
441
+ <span class="symbol">:legend</span> <span class="punct">=&gt;</span> <span class="punct">[&quot;</span><span class="string">Matt's Mojo</span><span class="punct">&quot;,</span> <span class="punct">&quot;</span><span class="string">Rob's Mojo</span><span class="punct">&quot;]</span> <span class="punct">)</span>
442
+ </pre>
443
+ <img src="http://chart.apis.google.com/chart?cht=bvg&#38;chdl=Matt's+Mojo|Rob's+Mojo&#38;chs=400x200&#38;chd=s:9UGo,Uo9C&#38;chco=FF0000,00FF00&#38;chtt=Matt+vs+Rob" title="legend" alt="legend" /></p>
444
+
445
+
446
+ <p><pre class='syntax'>
447
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:title</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">Matt vs Rob</span><span class="punct">&quot;,</span>
448
+ <span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">],</span> <span class="punct">[</span><span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">]],</span>
449
+ <span class="symbol">:bar_colors</span> <span class="punct">=&gt;</span> <span class="punct">['</span><span class="string">FF0000</span><span class="punct">','</span><span class="string">00FF00</span><span class="punct">'],</span>
450
+ <span class="symbol">:stacked</span> <span class="punct">=&gt;</span> <span class="constant">false</span><span class="punct">,</span> <span class="symbol">:size</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">400x200</span><span class="punct">',</span>
451
+ <span class="symbol">:legend</span> <span class="punct">=&gt;</span> <span class="punct">[&quot;</span><span class="string">Matt's Mojo</span><span class="punct">&quot;,</span> <span class="punct">&quot;</span><span class="string">Rob's Mojo</span><span class="punct">&quot;]</span> <span class="punct">)</span>
452
+ </pre>
453
+ <img src="http://chart.apis.google.com/chart?cht=lc&#38;chdl=Matt's+Mojo|Rob's+Mojo&#38;chs=400x200&#38;chd=s:9UGo,Uo9C&#38;chco=FF0000,00FF00&#38;chtt=Matt+vs+Rob" title="line legend" alt="line legend" /></p>
454
+
455
+
456
+ <p><pre class='syntax'>
457
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">pie_3d</span><span class="punct">(</span><span class="symbol">:title</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">ruby_fu</span><span class="punct">',</span> <span class="symbol">:size</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">400x200</span><span class="punct">',</span>
458
+ <span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">10</span><span class="punct">,</span> <span class="number">45</span><span class="punct">,</span> <span class="number">45</span><span class="punct">],</span> <span class="symbol">:labels</span> <span class="punct">=&gt;</span> <span class="punct">[&quot;</span><span class="string">DHH</span><span class="punct">&quot;,</span> <span class="punct">&quot;</span><span class="string">Rob</span><span class="punct">&quot;,</span> <span class="punct">&quot;</span><span class="string">Matt</span><span class="punct">&quot;]</span> <span class="punct">)</span>
459
+ </pre></p>
460
+
461
+
462
+ <p><img src="http://chart.apis.google.com/chart?cht=p3&#38;chl=DHH|Rob|Matt&#38;chs=400x200&#38;chd=s:N99&#38;chtt=ruby_fu" title="labels" alt="labels" /></p>
463
+
464
+
465
+ <p><strong>Display axis labels</strong></p>
466
+
467
+
468
+ <p><pre class='syntax'>
469
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">],</span> <span class="symbol">:axis_with_labels</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">x,y,r</span><span class="punct">')</span>
470
+ </pre></p>
471
+
472
+
473
+ <p>or you can use the other syntax:</p>
474
+
475
+
476
+ <p><pre class='syntax'>
477
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">],</span> <span class="symbol">:axis_with_labels</span> <span class="punct">=&gt;</span> <span class="punct">['</span><span class="string">x</span><span class="punct">','</span><span class="string">y</span><span class="punct">','</span><span class="string">r</span><span class="punct">'])</span>
478
+ </pre></p>
479
+
480
+
481
+ <p><img src="http://chart.apis.google.com/chart?cht=lc&#38;chs=300x200&#38;chxt=x,y,r&#38;chd=s:9UGoUo9C" title="axis with labels" alt="axis with labels" /></p>
482
+
483
+
484
+ <p><pre class='syntax'>
485
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">],</span> <span class="symbol">:axis_with_labels</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">x</span><span class="punct">',</span>
486
+ <span class="symbol">:axis_labels</span> <span class="punct">=&gt;</span> <span class="punct">['</span><span class="string">Jan|July|Jan|July|Jan</span><span class="punct">'])</span>
487
+ </pre></p>
488
+
489
+
490
+ <p>or you can use the other syntax:</p>
491
+
492
+
493
+ <p><pre class='syntax'>
494
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">],</span> <span class="symbol">:axis_with_labels</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">x</span><span class="punct">',</span>
495
+ <span class="symbol">:axis_labels</span> <span class="punct">=&gt;</span> <span class="punct">['</span><span class="string">Jan</span><span class="punct">','</span><span class="string">July</span><span class="punct">','</span><span class="string">Jan</span><span class="punct">','</span><span class="string">July</span><span class="punct">','</span><span class="string">Jan</span><span class="punct">'])</span>
496
+ </pre></p>
497
+
498
+
499
+ <p><img src="http://chart.apis.google.com/chart?cht=lc&#38;chxl=0:|Jan|July|Jan|July|Jan&#38;chs=300x200&#38;chxt=x&#38;chd=s:9UGoUo9C" title="x labels" alt="x labels" /></p>
500
+
501
+
502
+ <p><strong>multiple axis labels</strong></p>
503
+
504
+
505
+ <p><pre class='syntax'>
506
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">],</span> <span class="symbol">:axis_with_labels</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">x,r</span><span class="punct">',</span>
507
+ <span class="symbol">:axis_labels</span> <span class="punct">=&gt;</span> <span class="punct">['</span><span class="string">Jan|July|Jan|July|Jan</span><span class="punct">',</span> <span class="punct">'</span><span class="string">2005|2006|2007</span><span class="punct">'])</span>
508
+ </pre></p>
509
+
510
+
511
+ <p>or</p>
512
+
513
+
514
+ <p><pre class='syntax'>
515
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">],</span> <span class="symbol">:axis_with_labels</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">x,r</span><span class="punct">',</span>
516
+ <span class="symbol">:axis_labels</span> <span class="punct">=&gt;</span> <span class="punct">[['</span><span class="string">Jan</span><span class="punct">','</span><span class="string">July</span><span class="punct">','</span><span class="string">Jan</span><span class="punct">','</span><span class="string">July</span><span class="punct">','</span><span class="string">Jan</span><span class="punct">'],</span> <span class="punct">['</span><span class="string">2005</span><span class="punct">','</span><span class="string">2006</span><span class="punct">','</span><span class="string">2007</span><span class="punct">']])</span>
517
+ </pre></p>
518
+
519
+
520
+ <p><img src="http://chart.apis.google.com/chart?cht=lc&#38;chxl=0:|Jan|July|Jan|July|Jan|1:|2005|2006|2007&#38;chs=300x200&#38;chxt=x,r&#38;chd=s:9UGoUo9C" title="multiple axis labels" alt="multiple axis labels" /></p>
521
+
522
+
523
+ <p>(This syntax will probably be improved in the future)</p>
524
+
525
+
526
+ <p><strong>custom params</strong></p>
527
+
528
+
529
+ <p>I certainly didn&#8217;t cover the entire <span class="caps">API</span>, if you want to add your own params:</p>
530
+
531
+
532
+ <p><pre class='syntax'>
533
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:custom</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">chd=s:93zyvneTTOMJMLIJFHEAECFJGHDBFCFIERcgnpy45879,IJKNUWUWYdnswz047977315533zy1246872tnkgcaZQONHCECAAAAEII&amp;chls=3,6,3|1,1,0</span><span class="punct">')</span>
534
+ </pre></p>
535
+
536
+
537
+ <p><img src="http://chart.apis.google.com/chart?cht=lc&#38;chs=300x200&#38;chd=s:93zyvneTTOMJMLIJFHEAECFJGHDBFCFIERcgnpy45879,IJKNUWUWYdnswz047977315533zy1246872tnkgcaZQONHCECAAAAEII&#38;chls=3,6,3|1,1,0" title="Custom" alt="Custom" /></p>
538
+
539
+
540
+ <hr />
541
+
542
+
543
+ <p><strong>Save the chart as a file</strong></p>
544
+
545
+
546
+ <p>You might prefer to save the chart instead of using the url, not a problem:</p>
547
+
548
+
549
+ <p><pre class='syntax'>
550
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">0</span><span class="punct">,</span> <span class="number">26</span><span class="punct">],</span> <span class="symbol">:format</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">file</span><span class="punct">')</span>
551
+ </pre></p>
552
+
553
+
554
+ <p>You might want to specify the path and/or the filename used to save your chart:</p>
555
+
556
+
557
+ <p><pre class='syntax'>
558
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">0</span><span class="punct">,</span> <span class="number">26</span><span class="punct">],</span> <span class="symbol">:format</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">file</span><span class="punct">',</span> <span class="symbol">:filename</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">custom_filename.png</span><span class="punct">')</span>
559
+ </pre></p>
560
+
561
+
562
+ <p><strong>Insert as an image tag</strong></p>
563
+
564
+
565
+ <p>Because, I&#8217;m lazy, you can generate a full image tag, with support for standard html options.</p>
566
+
567
+
568
+ <p><pre class='syntax'>
569
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">0</span><span class="punct">,</span> <span class="number">26</span><span class="punct">],</span> <span class="symbol">:format</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">image_tag</span><span class="punct">')</span>
570
+ </pre></p>
571
+
572
+
573
+ <p><pre class='syntax'>
574
+ <span class="punct">&lt;</span><span class="ident">img</span> <span class="ident">src</span><span class="punct">=&quot;</span><span class="string">http://chart.apis.google.com/chart?chs=300x200&amp;amp;chd=s:A9&amp;amp;cht=lc</span><span class="punct">&quot;</span> <span class="ident">width</span><span class="punct">=&quot;</span><span class="string">300</span><span class="punct">&quot;</span> <span class="ident">height</span><span class="punct">=&quot;</span><span class="string">200</span><span class="punct">&quot;</span> <span class="ident">alt</span><span class="punct">=&quot;</span><span class="string">Google Chart</span><span class="punct">&quot;</span> <span class="punct">/&gt;</span>
575
+ </pre></p>
576
+
577
+
578
+ <p>Here are a few more examples:</p>
579
+
580
+
581
+ <p><pre class='syntax'>
582
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">0</span><span class="punct">,</span> <span class="number">26</span><span class="punct">],</span> <span class="symbol">:format</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">image_tag</span><span class="punct">')</span>
583
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">0</span><span class="punct">,</span> <span class="number">26</span><span class="punct">],</span> <span class="symbol">:format</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">image_tag</span><span class="punct">',</span> <span class="symbol">:id</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">sexy</span><span class="punct">&quot;)</span>
584
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">0</span><span class="punct">,</span> <span class="number">26</span><span class="punct">],</span> <span class="symbol">:format</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">image_tag</span><span class="punct">',</span> <span class="symbol">:class</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">chart</span><span class="punct">&quot;)</span>
585
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">0</span><span class="punct">,</span> <span class="number">26</span><span class="punct">],</span> <span class="symbol">:format</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">image_tag</span><span class="punct">',</span> <span class="symbol">:alt</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">Sexy Chart</span><span class="punct">&quot;)</span>
586
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">0</span><span class="punct">,</span> <span class="number">26</span><span class="punct">],</span> <span class="symbol">:format</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">image_tag</span><span class="punct">',</span> <span class="symbol">:title</span> <span class="punct">=&gt;</span> <span class="punct">&quot;</span><span class="string">Sexy Chart</span><span class="punct">&quot;)</span>
587
+ </pre></p>
588
+
589
+
590
+ <p>Image dimensions will be automatically set based on your chart&#8217;s size.</p>
591
+
592
+
593
+ <hr />
594
+
595
+
596
+ <p><strong>Encoding</strong></p>
597
+
598
+
599
+ <p>Google Chart <span class="caps">API</span> offers <a href="http://code.google.com/apis/chart/#chart_data">3 types of data encoding</a></p>
600
+
601
+
602
+ <ul>
603
+ <li>simple</li>
604
+ <li>text</li>
605
+ <li>extended</li>
606
+ </ul>
607
+
608
+
609
+ <p>By default this library uses the simple encoding, if you need a different type of encoding, you can change it really easily:</p>
610
+
611
+
612
+ <p>default / simple: chd=s:9UGoUo9C
613
+ <pre class='syntax'>
614
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">]</span> <span class="punct">)</span>
615
+ </pre></p>
616
+
617
+
618
+ <p>extended: chd=e:..VVGZqqVVqq..CI
619
+ <pre class='syntax'>
620
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">],</span> <span class="symbol">:encoding</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">extended</span><span class="punct">'</span> <span class="punct">)</span>
621
+ </pre></p>
622
+
623
+
624
+ <p>text: chd=t:300,100,30,200,100,200,300,10
625
+ <pre class='syntax'>
626
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">],</span> <span class="symbol">:encoding</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">text</span><span class="punct">'</span> <span class="punct">)</span>
627
+ </pre></p>
628
+
629
+
630
+ <p>(note that the text encoding doesn&#8217;t use a max value and therefore should be under 100)</p>
631
+
632
+
633
+ <p><strong>Max value</strong></p>
634
+
635
+
636
+ <p>Simple and extended encoding support the max value option.</p>
637
+
638
+
639
+ <p>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.</p>
640
+
641
+
642
+ <p><pre class='syntax'>
643
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">]</span> <span class="punct">)</span>
644
+ </pre></p>
645
+
646
+
647
+ <p><img src="http://chart.apis.google.com/chart?cht=lc&#38;chs=300x200&#38;chd=s:9UGoUo9C" title="Title" alt="Title" /></p>
648
+
649
+
650
+ <p><pre class='syntax'>
651
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">300</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">100</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span> <span class="number">300</span><span class="punct">,</span> <span class="number">10</span><span class="punct">],</span> <span class="symbol">:max_value</span> <span class="punct">=&gt;</span> <span class="number">500</span> <span class="punct">)</span>
652
+ </pre></p>
653
+
654
+
655
+ <p><img src="http://chart.apis.google.com/chart?cht=lc&#38;chs=300x200&#38;chd=s:kMDYMYkB" title="max 500" alt="max 500" /></p>
656
+
657
+
658
+ <p><pre class='syntax'>
659
+ <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span><span class="symbol">:data</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">100</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">20</span><span class="punct">,</span> <span class="number">10</span><span class="punct">,</span> <span class="number">14</span><span class="punct">,</span> <span class="number">30</span><span class="punct">,</span> <span class="number">10</span><span class="punct">],</span> <span class="symbol">:max_value</span> <span class="punct">=&gt;</span> <span class="constant">false</span> <span class="punct">)</span>
660
+ </pre></p>
661
+
662
+
663
+ <p><img src="http://chart.apis.google.com/chart?cht=lc&#38;chs=300x200&#38;chd=s:_UeUKOeK" title="real size" alt="real size" /></p>
664
+
665
+
666
+ <h2>Repository</h2>
667
+
668
+
669
+ <p>The trunk repository is <code>http://github.com/mattetti/googlecharts/</code> for anonymous access.</p>
670
+
671
+
672
+ <h2>People reported using this gem</h2>
673
+
674
+
675
+ <div>
676
+ <img src="http://img.skitch.com/20080627-r14subqdx2ye3w13qefbx974gc.png" alt="github"/><br/>
677
+ <li><a href="http://github.com">http://github.com</a></li><br/>
678
+ </div>
679
+
680
+ <div>
681
+ <img src="http://stafftool.com/images/masthead_screen.gif" alt="stafftool"/><br/>
682
+ <li><a href="http://stafftool.com/">Takeo(contributor)</a></li><br/>
683
+ </div>
684
+
685
+ <div>
686
+ <img src="http://img.skitch.com/20080627-g2pp89h7gdbh15m1rr8hx48jep.jpg" alt="graffletopia"/><br/>
687
+ <li><a href="http://graffletopia.com"> http://graffletopia.com Mokolabs(contributor)</a></li><br/>
688
+ </div>
689
+
690
+ <div>
691
+ <img src="http://img.skitch.com/20080627-kc1weqsbkmxeqhwiyriq3n6g8k.jpg" alt="gumgum"/><br/>
692
+ <li><a href="http://gumgum.com"> http://gumgum.com Mattetti(contributor)</a></li><br/>
693
+ </div>
694
+
695
+ <div>
696
+ <img src="http://img.skitch.com/20080627-n48j8pb2r7irsewfeh4yp3da12.jpg" alt="gumgum"/><br/>
697
+ <li><a href="http://feedflix.com/"> http://feedflix.com/</a></li><br/>
698
+ </div>
699
+
700
+ <h2>License</h2>
701
+
702
+
703
+ <p>This code is free to use under the terms of the <span class="caps">MIT</span> license.</p>
704
+
705
+
706
+ <h2>Contact</h2>
707
+
708
+
709
+ <p>Comments are welcome. Send an email to <a href="mailto:mattaimonetti@gmail.com">Matt Aimonetti</a></p>
710
+
711
+
712
+ <h3>Contributors</h3>
713
+
714
+
715
+ <p><a href="http://github.com/dbgrandi">David Grandinetti</a>
716
+ <a href="http://github.com/takeo">Toby Sterrett</a>
717
+ <a href="http://github.com/mokolabs">Patrick Crowley</a></p>
718
+ <p class="coda">
719
+ <a href="mattaimonetti@gmail.com">Matt Aimonetti</a>, 2nd July 2008<br>
720
+ Theme extended from <a href="http://rb2js.rubyforge.org/">Paul Battley</a>
721
+ </p>
722
+ </div>
723
+
724
+ <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
725
+ </script>
726
+ <script type="text/javascript">
727
+ _uacct = "UA-179809-11";
728
+ urchinTracker();
729
+ </script>
730
+
731
+ </body>
732
+ </html>