@@ -192,7 +192,7 @@ A Google-o-meter has a few restrictions. It may only use a solid filled backgrou === try yourself Gchart.bar( :data => [[1,2,4,67,100,41,234],[45,23,67,12,67,300, 250]], - :title => 'SDRuby Fu level', + :title => 'SD Ruby Fu level', :legend => ['matt','patrick'], :bg => {:color => '76A4FB', :type => 'gradient'}, :bar_colors => 'ff0000,00ff00') README.markdown @@ -47,6 +47,9 @@ class Gchart @grouped = false @encoding = 'simple' @max_value = 'auto' + @alt = 'Google Chart' + @id = false + @class = false # set the options value if definable options.each do |attribute, value| @@ -68,6 +71,33 @@ class Gchart "#{@width}x#{@height}" end + # Sets the alt tag when chart is exported as image tag + def alt=(alt='Google Chart') + @alt = alt + end + + def alt + @alt + end + + # Sets the CSS id selector when chart is exported as image tag + def id=(id=false) + @id = id + end + + def id + @id + end + + # Sets the CSS class selector when chart is exported as image tag + def class=(klass=false) + @class = klass + end + + def class + @class + end + # Sets the orientation of a bar graph def orientation=(orientation='h') if orientation == 'h' || orientation == 'horizontal' @@ -123,10 +153,20 @@ class Gchart # Format - def img_tag - "<img src='#{query_builder}'/>" + def image_tag + image = "<img" + image += " id=\"#{@id}\"" if @id + image += " class=\"#{@class}\"" if @class + image += " src=\"#{query_builder}\"" + image += " width=\"#{@width}\"" + image += " height=\"#{@height}\"" + image += " alt=\"#{@alt}\"" + image += " title=\"#{@title}\"" if @title + image += " />" end + alias_method :img_tag, :image_tag + def url query_builder end lib/gchart.rb @@ -377,10 +377,34 @@ describe 'exporting a chart' do Gchart.line(:data => [0, 26], :format => 'url').should == Gchart.line(:data => [0, 26]) end - it "should be available as the img tag" do - Gchart.line(:data => [0, 26], :format => 'img_tag').should match(/<img src=(.*)\/>/) + it "should be available as an image tag" do + Gchart.line(:data => [0, 26], :format => 'image_tag').should match(/<img src=(.*) width="300" height="200" alt="Google Chart" \/>/) end + it "should be available as an image tag using img_tag alias" do + Gchart.line(:data => [0, 26], :format => 'img_tag').should match(/<img src=(.*) width="300" height="200" alt="Google Chart" \/>/) + end + + it "should be available as an image tag using custom dimensions" do + Gchart.line(:data => [0, 26], :format => 'image_tag', :size => '400x400').should match(/<img src=(.*) width="400" height="400" alt="Google Chart" \/>/) + end + + it "should be available as an image tag using custom alt text" do + Gchart.line(:data => [0, 26], :format => 'image_tag', :alt => 'Sexy chart').should match(/<img src=(.*) width="300" height="200" alt="Sexy chart" \/>/) + end + + it "should be available as an image tag using custom title text" do + Gchart.line(:data => [0, 26], :format => 'image_tag', :title => 'Sexy chart').should match(/<img src=(.*) width="300" height="200" alt="Google Chart" title="Sexy chart" \/>/) + end + + it "should be available as an image tag using custom css id selector" do + Gchart.line(:data => [0, 26], :format => 'image_tag', :id => 'chart').should match(/<img id="chart" src=(.*) width="300" height="200" alt="Google Chart" \/>/) + end + + it "should be available as an image tag using custom css class selector" do + Gchart.line(:data => [0, 26], :format => 'image_tag', :class => 'chart').should match(/<img class="chart" src=(.*) width="300" height="200" alt="Google Chart" \/>/) + end + it "should be available as a file" do File.delete('chart.png') if File.exist?('chart.png') Gchart.line(:data => [0, 26], :format => 'file') spec/gchart_spec.rb @@ -41,7 +41,7 @@ <h2>What</h2> - <pre><code>A nice and simple wrapper for <a href="http://code.google.com/apis/chart/">Google Chart API</a></code></pre> + A nice and simple wrapper for <a href="http://code.google.com/apis/chart/">Google Chart API</a> <h2>Installing</h2> @@ -108,11 +108,12 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w <pre class='syntax'>require 'gchart'</pre> - <pre class='syntax'>Gchart.line( :size => '200x300', - :title => "example title", - :bg => 'efefef', - :legend => ['first data set label', 'second data set label'], - :data => [10, 30, 120, 45, 72])</pre> + <pre class='syntax'> +Gchart.line(:size => '200x300', + :title => "example title", + :bg => 'efefef', + :legend => ['first data set label', 'second data set label'], + :data => [10, 30, 120, 45, 72])</pre> <hr /> @@ -120,7 +121,7 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w simple line chart <pre class='syntax'> - Gchart.line(:data => [0, 40, 10, 70, 20]) +Gchart.line(:data => [0, 40, 10, 70, 20]) </pre> @@ -135,7 +136,7 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w multiple line charts <pre class='syntax'> - Gchart.line(:data => [[0, 40, 10, 70, 20],[41, 10, 80, 50]]) +Gchart.line(:data => [[0, 40, 10, 70, 20],[41, 10, 80, 50]]) </pre> @@ -146,7 +147,7 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w <pre class='syntax'> - Gchart.line(:data => [[0, 40, 10, 70, 20],[41, 10, 80, 50]], :line_colors => "FF0000,00FF00") +Gchart.line(:data => [[0, 40, 10, 70, 20],[41, 10, 80, 50]], :line_colors => "FF0000,00FF00") </pre> @@ -160,8 +161,8 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w <pre class='syntax'> - data = [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] - Gchart.sparkline(:data => data, :size => '120x40', :line_colors => '0077CC') +data = [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] +Gchart.sparkline(:data => data, :size => '120x40', :line_colors => '0077CC') </pre> @@ -175,7 +176,7 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w <pre class='syntax'> - Gchart.bar(:data => [300, 100, 30, 200]) +Gchart.bar(:data => [300, 100, 30, 200]) </pre> <img src="http://chart.apis.google.com/chart?cht=bvs&chs=300x200&chd=s:9UGo" title="bars" alt="bars" /> @@ -184,7 +185,7 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w <pre class='syntax'> - Gchart.bar(:data => [300, 100, 30, 200], :orientation => 'horizontal') +Gchart.bar(:data => [300, 100, 30, 200], :orientation => 'horizontal') </pre> <img src="http://chart.apis.google.com/chart?cht=bhs&chs=300x200&chd=s:9UGo" title="bars" alt="bars" /> @@ -193,7 +194,7 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w <pre class='syntax'> - Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]]) +Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]]) </pre> @@ -204,7 +205,7 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w <pre class='syntax'> - Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => 'FF0000,00FF00') +Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => 'FF0000,00FF00') </pre> @@ -212,7 +213,7 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w <pre class='syntax'> - Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00']) +Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00']) </pre> @@ -223,9 +224,9 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w <pre class='syntax'> - Gchart.bar( :data => [[300, 100, 30, 200], [100, 200, 300, 10]], - :bar_colors => 'FF0000,00FF00', - :stacked => false ) +Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], + :bar_colors => 'FF0000,00FF00', + :stacked => false ) </pre> @@ -242,10 +243,10 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w <pre class='syntax'> - Gchart.bar(:data => @data, :bar_width_and_spacing => '25,6') # width of 25, spacing of 6 - Gchart.bar(:data => @data, :bar_width_and_spacing => '25,6,12') # width of 25, spacing of 6, group spacing of 12 - Gchart.bar(:data => @data, :bar_width_and_spacing => [25,6]) # width of 25, spacing of 6 - Gchart.bar(:data => @data, :bar_width_and_spacing => 25) # width of 25 +Gchart.bar(:data => @data, :bar_width_and_spacing => '25,6') # width of 25, spacing of 6 +Gchart.bar(:data => @data, :bar_width_and_spacing => '25,6,12') # width of 25, spacing of 6, group spacing of 12 +Gchart.bar(:data => @data, :bar_width_and_spacing => [25,6]) # width of 25, spacing of 6 +Gchart.bar(:data => @data, :bar_width_and_spacing => 25) # width of 25 </pre> @@ -253,8 +254,8 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w <pre class='syntax'> - Gchart.bar(:data => @data, :bar_width_and_spacing => {:width => 19}) - Gchart.bar(:data => @data, :bar_width_and_spacing => {:spacing => 10, :group_spacing => 12}) +Gchart.bar(:data => @data, :bar_width_and_spacing => {:width => 19}) +Gchart.bar(:data => @data, :bar_width_and_spacing => {:spacing => 10, :group_spacing => 12}) </pre> @@ -262,7 +263,7 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w <pre class='syntax'> - Gchart.pie(:data => [20, 35, 45]) +Gchart.pie(:data => [20, 35, 45]) </pre> <img src="http://chart.apis.google.com/chart?cht=p&chs=300x200&chd=s:bv9" title="Pie Chart" alt="Pie Chart" /> @@ -271,7 +272,7 @@ If you never added <a href="http://github.com">GitHub</a> as a gem source, you w <pre class='syntax'> - Gchart.pie_3d(:data => [20, 35, 45]) +Gchart.pie_3d(:data => [20, 35, 45]) </pre> <img src="http://chart.apis.google.com/chart?cht=p3&chs=300x200&chd=s:bv9" title="Pie Chart" alt="Pie Chart" /> @@ -293,7 +294,7 @@ Data set: <pre class='syntax'> - Gchart.venn(:data => [100, 80, 60, 30, 30, 30, 10]) +Gchart.venn(:data => [100, 80, 60, 30, 30, 30, 10]) </pre> <img src="http://chart.apis.google.com/chart?cht=v&chs=300x200&chd=s:9wkSSSG" title="Venn" alt="Venn" /> @@ -308,7 +309,7 @@ Data set: <pre class='syntax'> - Gchart.scatter(:data => [[1, 2, 3, 4, 5], [1, 2, 3, 4 ,5], [5, 4, 3, 2, 1]]) +Gchart.scatter(:data => [[1, 2, 3, 4, 5], [1, 2, 3, 4 ,5], [5, 4, 3, 2, 1]]) </pre> @@ -325,7 +326,7 @@ Data set: <pre class='syntax'> - Gchart.meter(:data => [70], :label => ['Flavor']) +Gchart.meter(:data => [70], :label => ['Flavor']) </pre> @@ -336,7 +337,7 @@ Data set: <pre class='syntax'> - Gchart.bar(:title => "Recent Chart Sexyness", :data => [15, 30, 10, 20, 100, 20, 40, 100]) +Gchart.bar(:title => "Recent Chart Sexyness", :data => [15, 30, 10, 20, 100, 20, 40, 100]) </pre> @@ -347,7 +348,7 @@ Data set: <pre class='syntax'> - Gchart.bar(:title => "Recent Chart Sexyness", :title_size => 20, :data => [15, 30, 10, 20, 100, 20, 40, 100]) +Gchart.bar(:title => "Recent Chart Sexyness", :title_size => 20, :data => [15, 30, 10, 20, 100, 20, 40, 100]) </pre> @@ -358,7 +359,7 @@ Data set: <pre class='syntax'> - Gchart.bar(:title => "Recent Chart Sexyness", :title_color => 'FF0000', :data => [15, 30, 10, 20, 100, 20, 40, 100]) +Gchart.bar(:title => "Recent Chart Sexyness", :title_color => 'FF0000', :data => [15, 30, 10, 20, 100, 20, 40, 100]) </pre> @@ -369,9 +370,9 @@ Data set: <pre class='syntax'> - Gchart.bar( :title => "Recent Chart Sexyness", - :data => [15, 30, 10, 20, 100, 20, 40, 100], - :size => '600x400') +Gchart.bar(:title => "Recent Chart Sexyness", + :data => [15, 30, 10, 20, 100, 20, 40, 100], + :size => '600x400') </pre> @@ -382,9 +383,9 @@ Data set: <pre class='syntax'> - Gchart.bar( :title => "Matt's Mojo", - :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80], - :background => 'FF9994') +Gchart.bar(:title => "Matt's Mojo", + :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80], + :background => 'FF9994') </pre> @@ -395,9 +396,9 @@ Data set: <pre class='syntax'> - Gchart.bar( :title => "Matt's Mojo", - :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80], - :background => 'FF9994', :chart_background => '000000') +Gchart.bar(:title => "Matt's Mojo", + :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80], + :background => 'FF9994', :chart_background => '000000') </pre> @@ -408,10 +409,10 @@ Data set: <pre class='syntax'> - Gchart.bar( :title => "Matt's Mojo", - :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80], - :bar_colors => '76A4FB', - :background => 'EEEEEE', :chart_background => 'CCCCCC') +Gchart.bar(:title => "Matt's Mojo", + :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80], + :bar_colors => '76A4FB', + :background => 'EEEEEE', :chart_background => 'CCCCCC') </pre> @@ -419,9 +420,9 @@ Data set: <pre class='syntax'> - Gchart.line( :title => "Matt's Mojo", - :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80], - :line_colors => '76A4FB') +Gchart.line(:title => "Matt's Mojo", + :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80], + :line_colors => '76A4FB') </pre> @@ -432,28 +433,28 @@ Data set: <pre class='syntax'> - Gchart.bar( :title => "Matt vs Rob", - :data => [[300, 100, 30, 200], [100, 200, 300, 10]], - :bar_colors => 'FF0000,00FF00', - :stacked => false, :size => '400x200', - :legend => ["Matt's Mojo", "Rob's Mojo"] ) +Gchart.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> <img src="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" title="legend" alt="legend" /> <pre class='syntax'> - Gchart.line( :title => "Matt vs Rob", - :data => [[300, 100, 30, 200], [100, 200, 300, 10]], - :bar_colors => ['FF0000','00FF00'], - :stacked => false, :size => '400x200', - :legend => ["Matt's Mojo", "Rob's Mojo"] ) +Gchart.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> <img src="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" title="line legend" alt="line legend" /> <pre class='syntax'> - Gchart.pie_3d( :title => 'ruby_fu', :size => '400x200', - :data => [10, 45, 45], :labels => ["DHH", "Rob", "Matt"] ) +Gchart.pie_3d(:title => 'ruby_fu', :size => '400x200', + :data => [10, 45, 45], :labels => ["DHH", "Rob", "Matt"] ) </pre> @@ -464,7 +465,7 @@ Data set: <pre class='syntax'> - Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x,y,r') +Gchart.line(:data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x,y,r') </pre> @@ -472,7 +473,7 @@ Data set: <pre class='syntax'> - Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => ['x','y','r']) +Gchart.line(:data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => ['x','y','r']) </pre> @@ -480,8 +481,8 @@ Data set: <pre class='syntax'> - Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x', - :axis_labels => ['Jan|July|Jan|July|Jan']) +Gchart.line(:data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x', + :axis_labels => ['Jan|July|Jan|July|Jan']) </pre> @@ -489,8 +490,8 @@ Data set: <pre class='syntax'> - Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x', - :axis_labels => ['Jan','July','Jan','July','Jan']) +Gchart.line(:data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x', + :axis_labels => ['Jan','July','Jan','July','Jan']) </pre> @@ -501,8 +502,8 @@ Data set: <pre class='syntax'> - 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']) +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> @@ -510,8 +511,8 @@ Data set: <pre class='syntax'> - 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']]) +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> @@ -528,7 +529,7 @@ Data set: <pre class='syntax'> - Gchart.line( :custom => 'chd=s:93zyvneTTOMJMLIJFHEAECFJGHDBFCFIERcgnpy45879,IJKNUWUWYdnswz047977315533zy1246872tnkgcaZQONHCECAAAAEII&chls=3,6,3|1,1,0') +Gchart.line(:custom => 'chd=s:93zyvneTTOMJMLIJFHEAECFJGHDBFCFIERcgnpy45879,IJKNUWUWYdnswz047977315533zy1246872tnkgcaZQONHCECAAAAEII&chls=3,6,3|1,1,0') </pre> @@ -545,7 +546,7 @@ Data set: <pre class='syntax'> - Gchart.line(:data => [0, 26], :format => 'file') +Gchart.line(:data => [0, 26], :format => 'file') </pre> @@ -553,22 +554,39 @@ Data set: <pre class='syntax'> - Gchart.line(:data => [0, 26], :format => 'file', :filename => 'custom_filename.png') +Gchart.line(:data => [0, 26], :format => 'file', :filename => 'custom_filename.png') </pre> Insert as an image tag - Because, I’m lazy, I also added a custom format: + Because, I’m lazy, you can generate a full image tag, with support for the standard html options. + + + <pre class='syntax'> +Gchart.line(:data => [0, 26], :format => 'image_tag') +</pre> + + + <pre class='syntax'> +<img src="http://chart.apis.google.com/chart?chs=300x200&chd=s:A9&cht=lc" width="300" height="200" alt="Google Chart" /> +</pre> + + + Here are a few more examples: <pre class='syntax'> - Gchart.line(:data => [0, 26], :format => 'img_tag') +Gchart.line(:data => [0, 26], :format => 'image_tag') +Gchart.line(:data => [0, 26], :format => 'image_tag', :id => "sexy") +Gchart.line(:data => [0, 26], :format => 'image_tag', :class => "chart") +Gchart.line(:data => [0, 26], :format => 'image_tag', :alt => "Sexy Chart") +Gchart.line(:data => [0, 26], :format => 'image_tag', :title => "Sexy Chart") </pre> - <img src=’http://chart.apis.google.com/chart?chs=300×200&chd=s:A9&cht=lc’/> + Image dimensions will be automatically set based on your chart’s size. <hr /> @@ -592,19 +610,19 @@ Data set: default / simple: chd=s:9UGoUo9C <pre class='syntax'> - Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10] ) + Gchart.line(:data => [300, 100, 30, 200, 100, 200, 300, 10] ) </pre> extended: chd=e:..VVGZqqVVqq..CI <pre class='syntax'> - Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :encoding => 'extended' ) +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 class='syntax'> - Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :encoding => 'text' ) +Gchart.line(:data => [300, 100, 30, 200, 100, 200, 300, 10], :encoding => 'text' ) </pre> @@ -621,7 +639,7 @@ Data set: <pre class='syntax'> - Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10] ) +Gchart.line(:data => [300, 100, 30, 200, 100, 200, 300, 10] ) </pre> @@ -629,7 +647,7 @@ Data set: <pre class='syntax'> - Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :max_value => 500 ) +Gchart.line(:data => [300, 100, 30, 200, 100, 200, 300, 10], :max_value => 500 ) </pre> @@ -637,7 +655,7 @@ Data set: <pre class='syntax'> - Gchart.line( :data => [100, 20, 30, 20, 10, 14, 30, 10], :max_value => false ) +Gchart.line(:data => [100, 20, 30, 20, 10, 14, 30, 10], :max_value => false ) </pre> @@ -666,9 +684,10 @@ Data set: <a href="http://github.com/dbgrandi">David Grandinetti</a> -<a href="http://github.com/takeo">Toby Sterrett</a> +<a href="http://github.com/takeo">Toby Sterrett</a> +<a href="http://github.com/mokolabs">Patrick Crowley</a> - <a href="mattaimonetti@gmail.com">Matt Aimonetti</a>, 17th June 2008 + <a href="mattaimonetti@gmail.com">Matt Aimonetti</a>, 26th June 2008 Theme extended from <a href="http://rb2js.rubyforge.org/">Paul Battley</a> </div> website/index.html @@ -5,7 +5,7 @@ h2. → 'Sexy Charts using Google API & Ruby' h2. What - A nice and simple wrapper for "Google Chart API":http://code.google.com/apis/chart/ +A nice and simple wrapper for "Google Chart API":http://code.google.com/apis/chart/ h2. Installing @@ -52,17 +52,18 @@ or use rubyforge: require: <pre syntax="ruby">require 'gchart'</pre> -<pre syntax="ruby">Gchart.line( :size => '200x300', - :title => "example title", - :bg => 'efefef', - :legend => ['first data set label', 'second data set label'], - :data => [10, 30, 120, 45, 72])</pre> +<pre syntax="ruby"> +Gchart.line(:size => '200x300', + :title => "example title", + :bg => 'efefef', + :legend => ['first data set label', 'second data set label'], + :data => [10, 30, 120, 45, 72])</pre> --- *simple line chart* <pre syntax="ruby"> - Gchart.line(:data => [0, 40, 10, 70, 20]) +Gchart.line(:data => [0, 40, 10, 70, 20]) </pre> Generate the following url: http://chart.apis.google.com/chart?chs=300x200&chd=s:AiI9R&cht=lc @@ -73,7 +74,7 @@ Inserted in an image tag, it will look like that: *multiple line charts* <pre syntax="ruby"> - Gchart.line(:data => [[0, 40, 10, 70, 20],[41, 10, 80, 50]]) +Gchart.line(:data => [[0, 40, 10, 70, 20],[41, 10, 80, 50]]) </pre> !http://chart.apis.google.com/chart?cht=lc&chs=300x200&chd=s:AeH1P,fH9m(multiple lines chart)! @@ -81,7 +82,7 @@ Inserted in an image tag, it will look like that: *set line colors* <pre syntax="ruby"> - Gchart.line(:data => [[0, 40, 10, 70, 20],[41, 10, 80, 50]], :line_colors => "FF0000,00FF00") +Gchart.line(:data => [[0, 40, 10, 70, 20],[41, 10, 80, 50]], :line_colors => "FF0000,00FF00") </pre> !http://chart.apis.google.com/chart?cht=lc&chs=300x200&chd=s:AeH1P,fH9m&chco=FF0000,00FF00(line colors)! @@ -91,8 +92,8 @@ Inserted in an image tag, it will look like that: *sparkline chart* <pre syntax="ruby"> - data = [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] - Gchart.sparkline(:data => data, :size => '120x40', :line_colors => '0077CC') +data = [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] +Gchart.sparkline(:data => data, :size => '120x40', :line_colors => '0077CC') </pre> !http://chart.apis.google.com/chart?chd=s:QPPPPQ9SPVPPXPSPPPPPPPRPP9RQSPQQRPQPPPPPVUUPPPVPPWUUWWXPPPP&chco=0077CC&chs=120x40&cht=ls(sparline)! @@ -102,21 +103,21 @@ A sparkline chart has exactly the same parameters as a line chart. The only diff *bar chart* <pre syntax="ruby"> - Gchart.bar(:data => [300, 100, 30, 200]) +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* <pre syntax="ruby"> - Gchart.bar(:data => [300, 100, 30, 200], :orientation => 'horizontal') +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]]) +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)! @@ -124,13 +125,13 @@ A sparkline chart has exactly the same parameters as a line chart. The only diff 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') +Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => 'FF0000,00FF00') </pre> If you prefer you can use this other syntax: <pre syntax="ruby"> - Gchart.bar(:data => [[300, 100, 30, 200], [100, 200, 300, 10]], :bar_colors => ['FF0000', '00FF00']) +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)! @@ -138,9 +139,9 @@ If you prefer you can use this other syntax: 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 ) +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)! @@ -152,31 +153,31 @@ A bar chart can accept options to set the width of the bars, spacing between bar The Google API 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: <pre syntax="ruby"> - Gchart.bar(:data => @data, :bar_width_and_spacing => '25,6') # width of 25, spacing of 6 - Gchart.bar(:data => @data, :bar_width_and_spacing => '25,6,12') # width of 25, spacing of 6, group spacing of 12 - Gchart.bar(:data => @data, :bar_width_and_spacing => [25,6]) # width of 25, spacing of 6 - Gchart.bar(:data => @data, :bar_width_and_spacing => 25) # width of 25 +Gchart.bar(:data => @data, :bar_width_and_spacing => '25,6') # width of 25, spacing of 6 +Gchart.bar(:data => @data, :bar_width_and_spacing => '25,6,12') # width of 25, spacing of 6, group spacing of 12 +Gchart.bar(:data => @data, :bar_width_and_spacing => [25,6]) # width of 25, spacing of 6 +Gchart.bar(:data => @data, :bar_width_and_spacing => 25) # width of 25 </pre> The hash lets you set these values directly, with the Google default values set for any options you don't include: <pre syntax="ruby"> - Gchart.bar(:data => @data, :bar_width_and_spacing => {:width => 19}) - Gchart.bar(:data => @data, :bar_width_and_spacing => {:spacing => 10, :group_spacing => 12}) +Gchart.bar(:data => @data, :bar_width_and_spacing => {:width => 19}) +Gchart.bar(:data => @data, :bar_width_and_spacing => {:spacing => 10, :group_spacing => 12}) </pre> *pie chart* <pre syntax="ruby"> - Gchart.pie(:data => [20, 35, 45]) +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]) +Gchart.pie_3d(:data => [20, 35, 45]) </pre> !http://chart.apis.google.com/chart?cht=p3&chs=300x200&chd=s:bv9(Pie Chart)! @@ -192,7 +193,7 @@ Data set: * the seventh value specifies the area of A intersecting B intersecting C <pre syntax="ruby"> - Gchart.venn(:data => [100, 80, 60, 30, 30, 30, 10]) +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)! @@ -203,7 +204,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"> - Gchart.scatter(:data => [[1, 2, 3, 4, 5], [1, 2, 3, 4 ,5], [5, 4, 3, 2, 1]]) +Gchart.scatter(:data => [[1, 2, 3, 4, 5], [1, 2, 3, 4 ,5], [5, 4, 3, 2, 1]]) </pre> !http://chart.apis.google.com/chart?cht=s&chs=300x200&chd=s:MYkw9,MYkw9,9wkYM(scatter)! @@ -215,7 +216,7 @@ Supply two data sets, the first data set specifies x coordinates, the second set Supply a single label that will be what the arrow points to. It only supports a solid fill for the background. <pre syntax="ruby"> - Gchart.meter(:data => [70], :label => ['Flavor']) +Gchart.meter(:data => [70], :label => ['Flavor']) </pre> --- @@ -223,7 +224,7 @@ Supply a single label that will be what the arrow points to. It only supports a *set a chart title* <pre syntax="ruby"> - Gchart.bar(:title => "Recent Chart Sexyness", :data => [15, 30, 10, 20, 100, 20, 40, 100]) +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)! @@ -231,7 +232,7 @@ Supply a single label that will be what the arrow points to. It only supports a *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]) +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)! @@ -239,7 +240,7 @@ Supply a single label that will be what the arrow points to. It only supports a *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]) +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)! @@ -247,9 +248,9 @@ Supply a single label that will be what the arrow points to. It only supports a *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') +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)! @@ -257,9 +258,9 @@ Supply a single label that will be what the arrow points to. It only supports a *set the image background color* <pre syntax="ruby"> - Gchart.bar( :title => "Matt's Mojo", - :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80], - :background => 'FF9994') +Gchart.bar(:title => "Matt's Mojo", + :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80], + :background => 'FF9994') </pre> !http://chart.apis.google.com/chart?chf=bg,s,FF9994&cht=bvs&chs=300x200&chd=s:JSGM9MY929w&chtt=Matt's+Mojo(Background)! @@ -267,9 +268,9 @@ Supply a single label that will be what the arrow points to. It only supports a *set the chart background color* <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') +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)! @@ -277,18 +278,18 @@ Supply a single label that will be what the arrow points to. It only supports a *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], - :bar_colors => '76A4FB', - :background => 'EEEEEE', :chart_background => 'CCCCCC') +Gchart.bar(:title => "Matt's Mojo", + :data => [15, 30, 10, 20, 100, 20, 40, 100, 90, 100, 80], + :bar_colors => '76A4FB', + :background => 'EEEEEE', :chart_background => 'CCCCCC') </pre> !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') +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)! @@ -296,27 +297,27 @@ Supply a single label that will be what the arrow points to. It only supports a *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"] ) +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"] ) +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"] ) +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)! @@ -324,27 +325,27 @@ Supply a single label that will be what the arrow points to. It only supports a *Display axis labels* <pre syntax="ruby"> - Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x,y,r') +Gchart.line(:data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x,y,r') </pre> or you can use the other syntax: <pre syntax="ruby"> - Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => ['x','y','r']) +Gchart.line(:data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => ['x','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']) +Gchart.line(:data => [300, 100, 30, 200, 100, 200, 300, 10], :axis_with_labels => 'x', + :axis_labels => ['Jan|July|Jan|July|Jan']) </pre> or you can use the other syntax: <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']) +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)! @@ -352,15 +353,15 @@ or you can use the other syntax: *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']) +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> or <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']]) +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)! @@ -372,7 +373,7 @@ or 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') +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)! @@ -384,24 +385,38 @@ I certainly didn't cover the entire API, if you want to add your own params: You might prefer to save the chart instead of using the url, not a problem: <pre syntax="ruby"> - Gchart.line(:data => [0, 26], :format => 'file') +Gchart.line(:data => [0, 26], :format => 'file') </pre> You might want to specify the path and/or the filename used to save your chart: <pre syntax="ruby"> - Gchart.line(:data => [0, 26], :format => 'file', :filename => 'custom_filename.png') +Gchart.line(:data => [0, 26], :format => 'file', :filename => 'custom_filename.png') </pre> *Insert as an image tag* -Because, I'm lazy, I also added a custom format: +Because, I'm lazy, you can generate a full image tag, with support for the standard html options. + +<pre syntax="ruby"> +Gchart.line(:data => [0, 26], :format => 'image_tag') +</pre> + +<pre syntax="ruby"> +<img src="http://chart.apis.google.com/chart?chs=300x200&chd=s:A9&cht=lc" width="300" height="200" alt="Google Chart" /> +</pre> + +Here are a few more examples: <pre syntax="ruby"> - Gchart.line(:data => [0, 26], :format => 'img_tag') +Gchart.line(:data => [0, 26], :format => 'image_tag') +Gchart.line(:data => [0, 26], :format => 'image_tag', :id => "sexy") +Gchart.line(:data => [0, 26], :format => 'image_tag', :class => "chart") +Gchart.line(:data => [0, 26], :format => 'image_tag', :alt => "Sexy Chart") +Gchart.line(:data => [0, 26], :format => 'image_tag', :title => "Sexy Chart") </pre> -<img src='http://chart.apis.google.com/chart?chs=300x200&chd=s:A9&cht=lc'/> +Image dimensions will be automatically set based on your chart's size. --- @@ -417,17 +432,17 @@ By default this library uses the simple encoding, if you need a different type o default / simple: chd=s:9UGoUo9C <pre syntax="ruby"> - Gchart.line( :data => [300, 100, 30, 200, 100, 200, 300, 10] ) + 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' ) +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' ) +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) @@ -439,19 +454,19 @@ 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] ) +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 ) +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 ) +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)! @@ -473,4 +488,5 @@ Comments are welcome. Send an email to "Matt Aimonetti":mailto:mattaimonetti@gma h3. Contributors "David Grandinetti":http://github.com/dbgrandi -"Toby Sterrett":http://github.com/takeo \ No newline at end of file +"Toby Sterrett":http://github.com/takeo +"Patrick Crowley":http://github.com/mokolabs \ No newline at end of file website/index.txt @@ -84,6 +84,7 @@ pre, code { color: #ff8; background-color: #111; padding: 2px 10px 2px 10px; + overflow: auto; } .comment { color: #aaa; font-style: italic; } .keyword { color: #eff; font-weight: bold; } website/stylesheets/screen.css 2c62833c3575cd800edc5b65b3bfacc3d167becb Patrick patrick@moko.local http://github.com/mattetti/googlecharts/commit/2b5480f1cdd51523f6099582909b41d286cc639a 2b5480f1cdd51523f6099582909b41d286cc639a

2008-06-26T11:32:49-07:00

updated :format image tag output to use standard image tag attributes (width, height, id, class, alt, title); added documentation; fixed documentation styling bugs 0a9b86f075721c6291a28a544010c221d65c7870 Patrick patrick@moko.local