GoogleVisualr - Annotated Time Line


Overview

An interactive time series line chart with optional annotations. The chart is rendered within the browser using Flash.

Please refer to Google's documentation for details on Data Format and Configuration Options. However, Methods and Events are not implemented.

Important: Please specify the height and width of the div element explicitly in the view.


Example


Code

In your controller, create the data_table object, set new columns, add row values, then instantiate the chart with configuration options.

  # http://code.google.com/apis/chart/interactive/docs/gallery/annotatedtimeline.html#Example
  def annotated_time_line

    data_table = GoogleVisualr::DataTable.new
    data_table.new_column('date'  , 'Date')
    data_table.new_column('number', 'Sold Pencils')
    data_table.new_column('string', 'title1')
    data_table.new_column('string', 'text1' )
    data_table.new_column('number', 'Sold Pens'   )
    data_table.new_column('string', 'title2')
    data_table.new_column('string', 'text2' )
    data_table.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, '', '']
      ]
    )

    opts   = { :displayAnnotations => true }
    @chart = GoogleVisualr::Interactive::AnnotatedTimeLine.new(data_table, opts)

  end

In your view, use the render_chart method to generate JavasScript, during rendering of the view.

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