GoogleVisualr - Calendar


Overview

A calendar chart is a visualization used to show activity over the course of a long span of time, such as months or years.

They're best used when you want to illustrate how some quantity varies depending on the day of the week, or how it trends over time.

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


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/calendar#a-simple-example
  def calendar

    data_table = GoogleVisualr::DataTable.new
    data_table.new_column('date'  , 'Date')
    data_table.new_column('number', 'Won/Loss')
    data_table.add_rows(
      [
        [Date.parse("2012-3-13"), 37032],
        [Date.parse("2012-3-14"), 38024],
        [Date.parse("2012-3-15"), 38024],
        [Date.parse("2012-3-16"), 38108],
        [Date.parse("2012-3-17"), 38229],
        [Date.parse("2013-9-4") , 38177],
        [Date.parse("2013-9-5") , 38705],
        [Date.parse("2013-9-12"), 38210],
        [Date.parse("2013-9-13"), 38029],
        [Date.parse("2013-9-19"), 38823],
        [Date.parse("2013-9-23"), 38345],
        [Date.parse("2013-9-24"), 38436],
        [Date.parse("2013-9-30"), 38447]
      ]
    )

    opts   = { :title => "Red Sox Attendance", :width => 800, :height => 300, calendar: { cellSize: 13.5 } }
    @chart = GoogleVisualr::Interactive::Calendar.new(data_table, opts)

  end

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

  <div id='chart'></div>
  <%= render_chart @chart, 'chart' %>