GoogleVisualr - Annotation Chart


Overview

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.


Example


Code

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

  # https://developers.google.com/chart/interactive/docs/gallery/annotationchart#example
  def annotation_chart

    data_table = GoogleVisualr::DataTable.new
    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')
    data_table.add_rows(
      [
        [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 = GoogleVisualr::Interactive::AnnotationChart.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: 300px;'></div>
  <%= render_chart @chart, 'chart' %>