GoogleVisualr - Calendar


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.



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

  def calendar

    data_table =
    data_table.new_column('date'  , 'Date')
    data_table.new_column('number', 'Won/Loss')
        [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 =, opts)


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

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