GoogleVisualr - Annotation Chart


Annotation charts are interactive time series line charts that support annotations, rendered with SVG/VML.

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.



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

  def annotation_chart

    data_table =
    data_table.new_column('date', 'Date')
    data_table.new_column('number', 'Kepler-22b mission')
    data_table.new_column('string', 'Kepler title')
    data_table.new_column('string', 'Kepler text')
    data_table.new_column('number', 'Gliese 163 mission')
    data_table.new_column('string', 'Gliese title')
    data_table.new_column('string', 'Gliese text')
        [Date.parse("2314-2-15"), 12400, nil, nil, 10645, nil, nil],
        [Date.parse("2314-2-16"), 24045, 'Lalibertines', 'First encounter', 12374, nil, nil],
        [Date.parse("2314-2-17"), 35022, 'Lalibertines', 'They are very tall', 15766, 'Gallantors', 'First Encounter'],
        [Date.parse("2314-2-18"), 12284, 'Lalibertines', 'Attack on our crew!', 34334, 'Gallantors', 'Statement of shared principles'],
        [Date.parse("2314-2-19"), 8476, 'Lalibertines', 'Heavy casualties', 66467, 'Gallantors', 'Mysteries revealed'],
        [Date.parse("2314-2-20"), 0, 'Lalibertines', 'All crew lost', 79463, 'Gallantors', 'Omniscience achieved']

    opts   = { :displayAnnotations => true }
    @chart =, opts)


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: 300px;'></div>
  <%= render_chart @chart, 'chart' %>