GoogleVisualr - Combo Chart


Overview

A chart that lets you render each series as a different marker type from the following list: columns, lines, and area lines.

To assign a default marker type for series, specify the seriesType property. Use the series property to specify properties of each series individually.

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.

  # http://code.google.com/apis/chart/interactive/docs/gallery/combochart.html
  def combo_chart

    data_table = GoogleVisualr::DataTable.new
    data_table.new_column('string', 'month'       )
    data_table.new_column('number', 'Bolivia'     )
    data_table.new_column('number', 'Ecuador'     )
    data_table.new_column('number', 'Madagascar'  )
    data_table.new_column('number', 'Papua Guinea')
    data_table.new_column('number', 'Rwanda'      )
    data_table.new_column('number', 'Avarage'     )
    data_table.add_rows(
      [
        ['2004/05', 165, 938  , 522, 998  , 450, 614.6],
        ['2005/06', 135, 1120 , 599, 1268 , 288, 682  ],
        ['2006/07', 157, 1167 , 587, 807  , 397, 623  ],
        ['2007/08', 139, 1110 , 615, 968  , 215, 609.4],
        ['2008/09', 136, 691  , 629, 1026 , 366, 569.6]
      ]
    )

    opts   = { :width => 700, :height => 400, :title => 'Monthly Coffee Production by Country', :vAxis => { :title => 'Cups' }, :hAxis => { :title => 'Month' }, :seriesType => 'bars', :series => { '5' => { :type => 'line' } } }
    @chart = GoogleVisualr::Interactive::ComboChart.new(data_table, opts)

  end

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

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