googlecharts 0.0.3 → 0.1.0

data/History.txt

@@ -1,3 +1,6 @@
+== 0.0.4 2007-12-11
+* fixed the axis labels
+
 == 0.0.3 2007-12-11
 * added :chart_background alias and fixed a bug related to the background colors.
 

data/lib/gchart.rb

@@ -192,9 +192,8 @@ class Gchart
   
   def set_axis_labels
     labels_arr = []
-    axis_labels.each_with_index{|labels,index| labels_arr << "#{index}:#{labels}"}
+    axis_labels.each_with_index{|labels,index| labels_arr << "#{index}:|#{labels}"}
     "chxl=#{labels_arr.join('|')}"
-    #"chxl=0:Jan|July|Jan|July|Jan|1:0|100|2:A|B|C|3:2005|2006|2007"
   end
   
   def set_type

data/lib/gchart/version.rb

@@ -1,8 +1,8 @@
 module GchartInfo #:nodoc:
   module VERSION #:nodoc:
     MAJOR = 0
-    MINOR = 0
-    TINY  = 3
+    MINOR = 1
+    TINY  = 0
 
     STRING = [MAJOR, MINOR, TINY].join('.')
   end

data/spec/gchart_spec.rb

@@ -68,7 +68,8 @@ describe "generating a default Gchart" do
   end
   
   it "should be able to have axis labels" do
-   Gchart.line(:axis_labels => ['Jan|July|Jan|July|Jan', '0|100', 'A|B|C', '2005|2006|2007']).include?('chxl=0:Jan|July|Jan|July|Jan|1:0|100|2:A|B|C|3:2005|2006|2007').should be_true
+   Gchart.line(:axis_labels => ['Jan|July|Jan|July|Jan', '0|100', 'A|B|C', '2005|2006|2007']).include?('chxl=0:|Jan|July|Jan|July|Jan|1:|0|100|2:|A|B|C|3:|2005|2006|2007').should be_true
+   Gchart.line(:axis_labels => ['Jan|July|Jan|July|Jan']).include?('chxl=0:|Jan|July|Jan|July|Jan').should be_true
   end
   
 end

data/website/index.html

@@ -33,7 +33,7 @@
     <h1>Googlecharts</h1>
     <div id="version" class="clickable" onclick='document.location = "http://rubyforge.org/projects/googlecharts"; return false'>
       <p>Get Version</p>
-      <a href="http://rubyforge.org/projects/googlecharts" class="numbers">0.0.2</a>
+      <a href="http://rubyforge.org/projects/googlecharts" class="numbers">0.1.0</a>
     </div>
     <h2>&#x2192; &#8216;Sexy Charts using Google <span class="caps">API</span> &#38; Ruby&#8217;</h2>
 
@@ -97,10 +97,11 @@ install:
 <hr />
 
 
-<strong>simple line chart</strong>
-<pre syntax"ruby">
-  Gchart.line(:data =&gt; [0, 40, 10, 70, 20])
-</pre>
+	<p><strong>simple line chart</strong>
+<pre class='syntax'>
+  <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>
+</pre></p>
+
 
 	<p>Generate the following url: http://chart.apis.google.com/chart?chs=300&#215;200&#38;chd=s:AiI9R&#38;cht=lc</p>
 
@@ -111,10 +112,11 @@ install:
 	<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>
 
 
-<strong>multiple line charts</strong>
-<pre syntax"ruby">
-  Gchart.line(:data =&gt; [[0, 40, 10, 70, 20],[41, 10, 80, 50]])
-</pre>
+	<p><strong>multiple line charts</strong>
+<pre class='syntax'>
+  <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>
+</pre></p>
+
 
 	<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>
 
@@ -122,9 +124,10 @@ install:
 	<p><strong>set line colors</strong></p>
 
 
-<pre syntax"ruby">
-  Gchart.line(:data =&gt; [[0, 40, 10, 70, 20],[41, 10, 80, 50]], :line_colors =&gt; "FF0000,00FF00")
-</pre>
+	<p><pre class='syntax'>
+  <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>
+</pre></p>
+
 
 	<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>
 
@@ -135,26 +138,73 @@ install:
 	<p><strong>bar chart</strong></p>
 
 
-<pre syntax"ruby">
-  Gchart.bar(:data =&gt; [300, 100, 30, 200])
+	<p><pre class='syntax'>
+  <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>
 </pre>
-<img src="http://chart.apis.google.com/chart?cht=bvs&#38;chs=300x200&#38;chd=s:9UGo" title="bars" alt="bars" />
+<img src="http://chart.apis.google.com/chart?cht=bvs&#38;chs=300x200&#38;chd=s:9UGo" title="bars" alt="bars" /></p>
+
 
-	<p><strong>Set the bar chart orientation</strong></p>
+	<p><strong>set the bar chart orientation</strong></p>
 
 
-<pre syntax"ruby">
-  Gchart.bar(:data =&gt; [300, 100, 30, 200], :orientation =&gt; 'horizontal')
+	<p><pre class='syntax'>
+  <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>
 </pre>
-<img src="http://chart.apis.google.com/chart?cht=bhs&#38;chs=300x200&#38;chd=s:9UGo" title="bars" alt="bars" />
+<img src="http://chart.apis.google.com/chart?cht=bhs&#38;chs=300x200&#38;chd=s:9UGo" title="bars" alt="bars" /></p>
+
+
+	<p><strong>multiple bars chart</strong></p>
+
+
+	<p><pre class='syntax'>
+  <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>
+</pre></p>
+
+
+	<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>
+
+
+	<p>The problem is that by default the bars are stacked, so we need to set the colors:</p>
+
+
+	<p><pre class='syntax'>
+  <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>
+</pre></p>
+
+
+	<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>
+
+
+	<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>
+
+
+	<p><pre class='syntax'>
+  <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>
+              <span class="symbol">:stacked</span> <span class="punct">=&gt;</span> <span class="constant">false</span> <span class="punct">)</span>
+</pre></p>
+
+
+	<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>
+
 
 	<p><strong>pie chart</strong></p>
 
 
-<pre syntax"ruby">
-  Gchart.pie(:data =&gt; [20, 35, 45])
+	<p><pre class='syntax'>
+  <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>
 </pre>
-<img src="http://chart.apis.google.com/chart?cht=p&#38;chs=300x200&#38;chd=s:bv9" title="Pie Chart" alt="Pie Chart" />
+<img src="http://chart.apis.google.com/chart?cht=p&#38;chs=300x200&#38;chd=s:bv9" title="Pie Chart" alt="Pie Chart" /></p>
+
+
+	<p><strong>3D pie chart</strong></p>
+
+
+	<p><pre class='syntax'>
+  <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>
+</pre>
+<img src="http://chart.apis.google.com/chart?cht=p3&#38;chs=300x200&#38;chd=s:bv9" title="Pie Chart" alt="Pie Chart" /></p>
+
 
 	<p><strong>venn diagram</strong></p>
 
@@ -172,10 +222,11 @@ Data set:
 	</ul>
 
 
-<pre syntax"ruby">
-  Gchart.venn(:data =&gt; [100, 80, 60, 30, 30, 30, 10])
+	<p><pre class='syntax'>
+  <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>
 </pre>
-<img src="http://chart.apis.google.com/chart?cht=v&#38;chs=300x200&#38;chd=s:9wkSSSG" title="Venn" alt="Venn" />
+<img src="http://chart.apis.google.com/chart?cht=v&#38;chs=300x200&#38;chd=s:9wkSSSG" title="Venn" alt="Venn" /></p>
+
 
 	<p><strong>scatter plot</strong></p>
 
@@ -186,21 +237,265 @@ Data set:
 	<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>
 
 
-<pre syntax"ruby">
-  Gchart.scatter(:data =&gt; [[1, 2, 3, 4, 5], [1, 2, 3, 4 ,5], [5, 4, 3, 2, 1]])
-</pre>
+	<p><pre class='syntax'>
+  <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>
+</pre></p>
+
 
 	<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>
 
 
-	<p><strong>set a title</strong></p>
+<hr />
+
+
+	<p><strong>set a chart title</strong></p>
+
+
+	<p><pre class='syntax'>
+  <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>
+</pre></p>
+
+
+	<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>
+
+
+	<p><strong>set the title size</strong></p>
+
+
+	<p><pre class='syntax'>
+  <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>
+</pre></p>
+
+
+	<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>
+
+
+	<p><strong>set the title color</strong></p>
+
+
+	<p><pre class='syntax'>
+  <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>
+</pre></p>
+
+
+	<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>
+
+
+	<p><strong>set the chart&#8217;s size</strong></p>
+
+
+	<p><pre class='syntax'>
+  <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>
+              <span class="symbol">:size</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">600x400</span><span class="punct">')</span>
+</pre></p>
+
+
+	<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>
+
+
+	<p><strong>set the image background color</strong></p>
+
+
+	<p><pre class='syntax'>
+  <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> 
+              <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>
+              <span class="symbol">:background</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">FF9994</span><span class="punct">')</span>
+</pre></p>
+
+
+	<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>
+
+
+	<p><strong>set the chart background color</strong></p>
+
+
+	<p><pre class='syntax'>
+  <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> 
+              <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>
+              <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>
+</pre></p>
+
+
+	<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>
+
+
+	<p><strong>Set bar/line colors</strong></p>
+
+
+	<p><pre class='syntax'>
+  <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> 
+              <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>
+              <span class="symbol">:bar_colors</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">76A4FB</span><span class="punct">',</span>
+              <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>
+</pre></p>
+
+
+	<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>
 
 
-<pre syntax"ruby">
-  Gchart.bar(:title =&gt; "Chart Sexyness in the last 5 days", :data =&gt; [15, 30, 10, 20, 100])
+	<p><pre class='syntax'>
+  <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> 
+              <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>
+              <span class="symbol">:line_colors</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">76A4FB</span><span class="punct">')</span>
+</pre></p>
+
+
+	<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>
+
+
+	<p><strong>legend / labels</strong></p>
+
+
+	<p><pre class='syntax'>
+  <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>
+              <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>
+              <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>
+              <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>
 </pre>
+<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>
+
+
+	<p><pre class='syntax'>
+  <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>
+              <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>
+              <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>
+              <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>
+</pre>
+<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>
+
+
+	<p><pre class='syntax'>
+  <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>
+                  <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>
+</pre></p>
+
+
+	<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>
+
+
+	<p><strong>Display axis labels</strong></p>
+
+
+	<p><pre class='syntax'>
+  <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>
+</pre></p>
+
+
+	<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>
+
+
+	<p><pre class='syntax'>
+  <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="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>
+</pre></p>
+
+
+	<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>
+
+
+	<p><strong>multiple axis labels</strong></p>
+
+
+	<p><pre class='syntax'>
+  <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>
+                <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>
+</pre></p>
+
+
+	<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>
+
+
+	<p>(This syntax will probably be improved in the future)</p>
+
+
+	<p><strong>custom params</strong></p>
+
+
+	<p>I certainly didn&#8217;t cover the entire <span class="caps">API</span>, if you want to add your own params:</p>
+
+
+	<p><pre class='syntax'>
+  <span class="constant">Gchart</span><span class="punct">.</span><span class="ident">line</span><span class="punct">(</span> <span class="ident">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>
+</pre></p>
+
+
+	<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>
+
+
+<hr />
+
+
+	<p><strong>Encoding</strong></p>
+
+
+	<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>
+
+
+	<ul>
+	<li>simple</li>
+		<li>text</li>
+		<li>extended</li>
+	</ul>
+
+
+	<p>By default this library uses the simple encoding, if you need a different type of encoding, you can change it really easily:</p>
+
+
+	<p>default / simple: chd=s:9UGoUo9C
+<pre class='syntax'>
+  <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>
+</pre></p>
+
+
+	<p>extended: chd=e:..VVGZqqVVqq..CI
+<pre class='syntax'>
+  <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>
+</pre></p>
+
+
+	<p>text: chd=t:300,100,30,200,100,200,300,10
+<pre class='syntax'>
+  <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>
+</pre></p>
+
+
+	<p>(note that the text encoding doesn&#8217;t use a max value and therefore should be under 100)</p>
+
+
+	<p><strong>Max value</strong></p>
+
+
+	<p>Simple and extended encoding support the max value option.</p>
+
+
+	<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>
+
+
+	<p><pre class='syntax'>
+  <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>
+</pre></p>
+
+
+	<p>!http://chart.apis.google.com/chart?cht=lc&#38;chs=300&#215;200&#38;chd=s:9UGoUo9C(Title)</p>
+
+
+	<p><pre class='syntax'>
+  <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>
+</pre></p>
+
+
+	<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>
+
+
+	<p><pre class='syntax'>
+  <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>
+</pre></p>
+
 
-	<p><img src="http://chart.apis.google.com/chart?cht=bvs&#38;chs=300x200&#38;chd=s:JSGM9&#38;chtt=Chart+Sexyness+in+the+last+5+days" title="chart title" alt="chart title" /></p>
+	<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>
 
 
 	<h2>Repository</h2>

data/website/index.txt

@@ -47,7 +47,7 @@ require:
 ---
 
 *simple line chart*
-<pre syntax"ruby">
+<pre syntax="ruby">
   Gchart.line(:data => [0, 40, 10, 70, 20])
 </pre>
 
@@ -58,7 +58,7 @@ Inserted in an image tag, it will look like that:
 !http://chart.apis.google.com/chart?chs=300x200&chd=s:AiI9R&cht=lc(simple line chart)!
 
 *multiple line charts*
-<pre syntax"ruby">
+<pre syntax="ruby">
   Gchart.line(:data => [[0, 40, 10, 70, 20],[41, 10, 80, 50]])
 </pre>
 
@@ -66,7 +66,7 @@ Inserted in an image tag, it will look like that:
 
 *set line colors*
 
-<pre syntax"ruby">
+<pre syntax="ruby">
   Gchart.line(:data => [[0, 40, 10, 70, 20],[41, 10, 80, 50]], :line_colors => "FF0000,00FF00")
 </pre>
 
@@ -76,26 +76,59 @@ Inserted in an image tag, it will look like that:
 
 *bar chart*
 
-<pre syntax"ruby">
+<pre syntax="ruby">
   Gchart.bar(:data => [300, 100, 30, 200])
 </pre>
 !http://chart.apis.google.com/chart?cht=bvs&chs=300x200&chd=s:9UGo(bars)!
 
-*Set the bar chart orientation*
+*set the bar chart orientation*
 
-<pre syntax"ruby">
+<pre syntax="ruby">
   Gchart.bar(:data => [300, 100, 30, 200], :orientation => 'horizontal')
 </pre>
 !http://chart.apis.google.com/chart?cht=bhs&chs=300x200&chd=s:9UGo(bars)!
 
+*multiple bars chart*
+
+<pre syntax="ruby">
+  Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]])
+</pre>
+
+!http://chart.apis.google.com/chart?cht=bvs&chs=300x200&chd=s:9UGo,Uo9C(stacked multiple bars)!
+
+The problem is that by default the bars are stacked, so we need to set the colors:
+
+<pre syntax="ruby">
+  Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => 'FF0000,00FF00')
+</pre>
+
+!http://chart.apis.google.com/chart?cht=bvs&chs=300x200&chd=s:9UGo,Uo9C&chco=FF0000,00FF00(colors)!
+
+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:
+
+<pre syntax="ruby">
+  Gchart.bar( :data => [[300, 100, 30, 200], [100, 200, 300, 10]], 
+              :bar_colors => 'FF0000,00FF00',
+              :stacked => false )
+</pre>
+
+!http://chart.apis.google.com/chart?cht=bvg&chs=300x200&chd=s:9UGo,Uo9C&chco=FF0000,00FF00(grouped bars)!
+
 
 *pie chart*
 
-<pre syntax"ruby">
+<pre syntax="ruby">
   Gchart.pie(:data => [20, 35, 45])
 </pre>
 !http://chart.apis.google.com/chart?cht=p&chs=300x200&chd=s:bv9(Pie Chart)!
 
+*3D pie chart*
+
+<pre syntax="ruby">
+  Gchart.pie_3d(:data => [20, 35, 45])
+</pre>
+!http://chart.apis.google.com/chart?cht=p3&chs=300x200&chd=s:bv9(Pie Chart)!
+
 *venn diagram*
 
 "Google documentation":http://code.google.com/apis/chart/#venn
@@ -107,7 +140,7 @@ Data set:
 * the sixth value specifies the area of C intersecting A
 * the seventh value specifies the area of A intersecting B intersecting C
 
-<pre syntax"ruby">
+<pre syntax="ruby">
   Gchart.venn(:data => [100, 80, 60, 30, 30, 30, 10])
 </pre>
 !http://chart.apis.google.com/chart?cht=v&chs=300x200&chd=s:9wkSSSG(Venn)!
@@ -118,7 +151,7 @@ Data set:
 
 Supply two data sets, the first data set specifies x coordinates, the second set specifies y coordinates, the third set the data point size.
 
-<pre syntax"ruby">
+<pre syntax="ruby">
   Gchart.scatter(:data => [[1, 2, 3, 4, 5], [1, 2, 3, 4 ,5], [5, 4, 3, 2, 1]])
 </pre>
 
@@ -128,31 +161,194 @@ Supply two data sets, the first data set specifies x coordinates, the second set
 
 *set a chart title*
 
-<pre syntax"ruby">
+<pre syntax="ruby">
   Gchart.bar(:title => "Recent Chart Sexyness", :data => [15, 30, 10, 20, 100, 20, 40, 100])
 </pre>
 
 !http://chart.apis.google.com/chart?cht=bvs&chs=300x200&chd=s:JSGM9MY9&chtt=Recent+Chart+Sexyness(chart title)!
 
+*set the title size*
+
+<pre syntax="ruby">
+  Gchart.bar(:title => "Recent Chart Sexyness", :title_size => 20, :data => [15, 30, 10, 20, 100, 20, 40, 100])
+</pre>
+
+!http://chart.apis.google.com/chart?cht=bvs&chs=300x200&chd=s:JSGM9MY9&chtt=Recent+Chart+Sexyness&chts=454545,20(title size)!
+
+*set the title color*
+
+<pre syntax="ruby">
+  Gchart.bar(:title => "Recent Chart Sexyness", :title_color => 'FF0000', :data => [15, 30, 10, 20, 100, 20, 40, 100])
+</pre>
+
+!http://chart.apis.google.com/chart?cht=bvs&chs=300x200&chd=s:JSGM9MY9&chtt=Recent+Chart+Sexyness&chts=FF0000(Title color)!
+
+*set the chart's size*
+
+<pre syntax="ruby">
+  Gchart.bar( :title => "Recent Chart Sexyness", 
+              :data => [15, 30, 10, 20, 100, 20, 40, 100],
+              :size => '600x400')
+</pre>
+
+!http://chart.apis.google.com/chart?cht=bvs&chs=600x400&chd=s:JSGM9MY9&chtt=Recent+Chart+Sexyness(size)!
+
 *set the image background color*
 
-<pre syntax"ruby">
+<pre syntax="ruby">
   Gchart.bar( :title => "Matt's Mojo", 
               :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80],
-              :background => 'EEEEEE')
+              :background => 'FF9994')
 </pre>
 
-!http://chart.apis.google.com/chart?chf=bg,s,EEEEEE&cht=bvs&chs=300x200&chd=s:JSGM9MY929w&chtt=Matt's+Mojo(Background)!
+!http://chart.apis.google.com/chart?chf=bg,s,FF9994&cht=bvs&chs=300x200&chd=s:JSGM9MY929w&chtt=Matt's+Mojo(Background)!
 
 *set the chart background color*
 
-<pre syntax"ruby">
+<pre syntax="ruby">
+  Gchart.bar( :title => "Matt's Mojo", 
+              :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80],
+              :background => 'FF9994', :chart_background => '000000')
+</pre>
+
+!http://chart.apis.google.com/chart?chf=c,s,000000|bg,s,FF9994&cht=bvs&chs=300x200&chd=s:JSGM9MY929w&chtt=Matt's+Mojo(chart background)!
+
+*Set bar/line colors*
+
+<pre syntax="ruby">
   Gchart.bar( :title => "Matt's Mojo", 
               :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80],
-              :background => 'EEEEEE', :chart_background => '000000')
+              :bar_colors => '76A4FB',
+              :background => 'EEEEEE', :chart_background => 'CCCCCC')
 </pre>
 
-!http://chart.apis.google.com/chart?chf=c,s,000000|bg,s,EEEEEE&cht=bvs&chs=300x200&chd=s:JSGM9MY929w&chtt=Matt's+Mojo(chart background)!
+!http://chart.apis.google.com/chart?chf=c,s,CCCCCC|bg,s,EEEEEE&cht=bvs&chs=300x200&chd=s:JSGM9MY929w&chco=76A4FB&chtt=Matt's+Mojo(bar colors)!
+
+<pre syntax="ruby">
+  Gchart.line( :title => "Matt's Mojo", 
+              :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80],
+              :line_colors => '76A4FB')
+</pre>
+
+!http://chart.apis.google.com/chart?cht=lc&chs=300x200&chd=s:JSGM9MY929w&chco=76A4FB&chtt=Matt's+Mojo(line colors)!
+
+*legend / labels*
+
+<pre syntax="ruby">
+  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"] )
+</pre>
+!http://chart.apis.google.com/chart?cht=bvg&chdl=Matt's+Mojo|Rob's+Mojo&chs=400x200&chd=s:9UGo,Uo9C&chco=FF0000,00FF00&chtt=Matt+vs+Rob(legend)!
+
+<pre syntax="ruby">
+  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"] )
+</pre>
+!http://chart.apis.google.com/chart?cht=lc&chdl=Matt's+Mojo|Rob's+Mojo&chs=400x200&chd=s:9UGo,Uo9C&chco=FF0000,00FF00&chtt=Matt+vs+Rob(line legend)!
+
+
+<pre syntax="ruby">
+  Gchart.pie_3d(  :title => 'ruby_fu', :size => '400x200',
+                  :data => [10, 45, 45], :labels => ["DHH", "Rob", "Matt"] )
+</pre>
+
+!http://chart.apis.google.com/chart?cht=p3&chl=DHH|Rob|Matt&chs=400x200&chd=s:N99&chtt=ruby_fu(labels)!
+
+*Display axis labels*
+
+<pre syntax="ruby">
+  Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x,y,r')
+</pre>
+
+!http://chart.apis.google.com/chart?cht=lc&chs=300x200&chxt=x,y,r&chd=s:9UGoUo9C(axis with labels)!
+
+<pre syntax="ruby">
+  Gchart.line(  :data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x',
+                :axis_labels => ['Jan|July|Jan|July|Jan'])
+</pre>
+
+!http://chart.apis.google.com/chart?cht=lc&chxl=0:|Jan|July|Jan|July|Jan&chs=300x200&chxt=x&chd=s:9UGoUo9C(x labels)!
+
+*multiple axis labels*
+
+<pre syntax="ruby">
+  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'])
+</pre>
+
+!http://chart.apis.google.com/chart?cht=lc&chxl=0:|Jan|July|Jan|July|Jan|1:|2005|2006|2007&chs=300x200&chxt=x,r&chd=s:9UGoUo9C(multiple axis labels)!
+
+(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:
+
+<pre syntax="ruby">
+  Gchart.line( custom => 'chd=s:93zyvneTTOMJMLIJFHEAECFJGHDBFCFIERcgnpy45879,IJKNUWUWYdnswz047977315533zy1246872tnkgcaZQONHCECAAAAEII&chls=3,6,3|1,1,0')
+</pre>
+
+!http://chart.apis.google.com/chart?cht=lc&chs=300x200&chd=s:93zyvneTTOMJMLIJFHEAECFJGHDBFCFIERcgnpy45879,IJKNUWUWYdnswz047977315533zy1246872tnkgcaZQONHCECAAAAEII&chls=3,6,3|1,1,0(Custom)!
+
+---
+
+*Encoding*
+
+Google Chart API offers "3 types of data encoding":http://code.google.com/apis/chart/#chart_data
+
+  * 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
+<pre syntax="ruby">
+  Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10] )
+</pre>
+
+extended: chd=e:..VVGZqqVVqq..CI
+<pre syntax="ruby">
+  Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :encoding => 'extended' )
+</pre>
+
+text: chd=t:300,100,30,200,100,200,300,10
+<pre syntax="ruby">
+  Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :encoding => 'text' )
+</pre> 
+
+(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.
+
+<pre syntax="ruby">
+  Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10] )
+</pre>
+
+!http://chart.apis.google.com/chart?cht=lc&chs=300x200&chd=s:9UGoUo9C(Title)
+
+<pre syntax="ruby">
+  Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :max_value => 500 )
+</pre>
+
+!http://chart.apis.google.com/chart?cht=lc&chs=300x200&chd=s:kMDYMYkB(max 500)!
+
+<pre syntax="ruby">
+  Gchart.line( :data => [100, 20, 30, 20, 10, 14, 30, 10], :max_value => false )
+</pre>
+
+!http://chart.apis.google.com/chart?cht=lc&chs=300x200&chd=s:_UeUKOeK(real size)!
+
 
 
 h2. Repository

metadata

@@ -3,7 +3,7 @@ rubygems_version: 0.9.4
 specification_version: 1
 name: googlecharts
 version: !ruby/object:Gem::Version 
-  version: 0.0.3
+  version: 0.1.0
 date: 2007-12-11 00:00:00 -08:00
 summary: description of gem
 require_paths: