GoogleVisualr - Candlestick Chart


Overview

A candlestick chart is used to show an opening and closing value overlaid on top of a total variance and is often used to show stock value behaviour. And in the chart below:

  • items where the opening value is < the closing value (a gain) are drawn as filled boxes
  • items where the opening value is > the closing value (a loss) are drawn as hollow boxes.

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/candlestickchart.html
  def candlestick_chart

    data_table = GoogleVisualr::DataTable.new
    data_table.new_column('string', 'day')
    data_table.new_column('number', 'min')
    data_table.new_column('number', 'opening')
    data_table.new_column('number', 'closing')
    data_table.new_column('number', 'max')
    data_table.add_rows(
      [
        ['Mon',20,28,38,45],
        ['Tue',31,38,55,66],
        ['Wed',50,55,77,80],
        ['Thu',50,77,66,77],
        ['Fri',15,66,22,68]
      ]
    )

    opts   = { :width => 400, :height => 240, :legend => 'none' }
    @chart = GoogleVisualr::Interactive::CandlestickChart.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' %>