GoogleVisualr::AnnotatedTimeLine Creation Example

annotated_time_line.html.erb

<!-- Specify the size of the Container element explicitly! -->
<div id='chart' style='width: 700px; height: 240px;'></div>
<%= @chart.render('chart') %>

example_controller.rb

# http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html#Example
def annotated_time_line

  @chart = GoogleVisualr::AnnotatedTimeLine.new
  @chart.add_column('date'  , 'Date')
  @chart.add_column('number', 'Sold Pencils')
  @chart.add_column('string', 'title1')
  @chart.add_column('string', 'text1' )
  @chart.add_column('number', 'Sold Pens'   )
  @chart.add_column('string', 'title2')
  @chart.add_column('string', 'text2' )
  @chart.add_rows( [
    [ Date.parse("2008-2-1"), 30000, '', '', 40645, '', ''],
    [ Date.parse("2008-2-2"), 14045, '', '', 20374, '', ''],
    [ Date.parse("2008-2-3"), 55022, '', '', 50766, '', ''],
    [ Date.parse("2008-2-4"), 75284, '', '', 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
    [ Date.parse("2008-2-5"), 41476, 'Bought Pens','Bought 200k pens', 66467, '', ''],
    [ Date.parse("2008-2-6"), 33322, '', '', 39463, '', '']
  ] )

  options = { :displayAnnotations => true }
  options.each_pair do | key, value |
    @chart.send "#{key}=", value
  end

end