DataTable API Reference - Formatters


Overview

Formatters can be used to reformat data in a data_table, by changing the display values of the specified column in all rows of the data_table.

They only modify the display values; not the underlying values. E.g., displayed value can be "$1,000.00" but the underlying value remains as "1000".

Formatters can only affect one column at a time. To reformat multiple columns, apply a formatter to each column that you want to change.

Please refer to Google's Documentation for more details.


Usage

Firstly, initialize the required formatter, without (will use default) or with configuration options.

  # Initialize with Width Option
  formatter = GoogleVisualr::BarFormat.new( { :width => 150 } )

Secondly, set the formatter to format the display values for specified column/s. The columns method is the only public method for a formatter.

  # Apply to 2nd and 3rd Column
  formatter.columns(1,2)

Finally, pass the formatter as an argument to a data_table's format method. That's all!

  data_table.format(formatter)

google.visualization.ArrowFormat

Adds an up or down arrow to a numeric cell, depending on whether the value is above or below a specified base value.

There is no arrow is shown, when cell value is equal to the base value.


Example


Code

In your controller, create your data_table object, then create your formatter and apply it to specific column/s.

  data_table_1 = GoogleVisualr::DataTable.new
  data_table_1.new_column('string', 'Department'      )
  data_table_1.new_column('number', 'Revenues Change' )
  data_table_1.add_rows(
    [
      ['Shoes'      , { :v => 12   , :f => '12.0%' }],
      ['Sports'     , { :v => -7.3 , :f => '-7.3%' }],
      ['Toys'       , { :v => 0    , :f => '0%'    }],
      ['Electronics', { :v => -2.1 , :f => '-2.1%' }],
      ['Food'       , { :v => 22   , :f => '22.0%' }]
    ]
  )

  formatter = GoogleVisualr::ArrowFormat.new
  formatter.columns(1) # Apply to 2nd Column

  data_table_1.format(formatter)

  opts     = { :width => 600, :allowHtml => true, :showRowNumber => true }
  @chart_1 = GoogleVisualr::Interactive::Table.new(data_table_1, opts)

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

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

google.visualization.BarFormat

Adds a colored bar to a numeric cell, indicating whether the cell value is above or below a specified base value.


Example


Code

In your controller, create your data_table object, then create your formatter and apply it to specific column/s.

  data_table_2 = GoogleVisualr::DataTable.new
  data_table_2.new_column('string', 'Department')
  data_table_2.new_column('number', 'Revenues Change')
  data_table_2.add_rows(
    [
      ['Shoes'      , 10700 ],
      ['Sports'     , -15400],
      ['Toys'       , 12500 ],
      ['Electronics', -2100 ],
      ['Food'       , 22600 ],
      ['Art'        , 1100  ]
    ]
  )

  formatter = GoogleVisualr::BarFormat.new({ :width => 150 })
  formatter.columns(1) # Apply to 2nd Column

  data_table_2.format(formatter)

  opts     = { :width => 600, :allowHtml => true, :showRowNumber => true }
  @chart_2 = GoogleVisualr::Interactive::Table.new(data_table_2, opts)

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

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

google.visualization.ColorFormat

Assigns colors (in HTML format, e.g. "black" or "#000") to the foreground or background of a numeric cell, depending on the cell value.

This formatter does not accept options in the constructor. Instead, you should call add_range() or add_gradient_range() as many times as you want, to add color ranges, before calling format().


Example


Code

In your controller, create your data_table object, then create your formatter and apply it to specific column/s.

  data_table_3 = GoogleVisualr::DataTable.new
  data_table_3.new_column('string', 'Department'      )
  data_table_3.new_column('number', 'Revenues Change' )
  data_table_3.add_rows([
    ['Shoes'      , 10700 ],
    ['Sports'     , -15400],
    ['Toys'       , 12500 ],
    ['Electronics', -2100 ],
    ['Food'       , 22600 ],
    ['Art'        , 1100  ]
  ])

  formatter = GoogleVisualr::ColorFormat.new
  formatter.add_range( -20000, 0   , 'white' , 'orange'  )
  formatter.add_range( 20000 , nil , 'red'   , '#33ff33' )
  formatter.columns(1) # Apply to 2nd Column

  data_table_3.format(formatter)

  opts     = { :width => 600, :allowHtml => true, :showRowNumber => true }
  @chart_3 = GoogleVisualr::Interactive::Table.new(data_table_3, opts)

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

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

google.visualization.DateFormat

Formats a JavaScript Date value in a variety of ways, including "January 1, 2009," "1/1/09" and "Jan 1, 2009.


Example


Code

In your controller, create your data_table object, then create your formatter and apply it to specific column/s.

  data_table_4 = GoogleVisualr::DataTable.new
  data_table_4.new_column('string', 'Employee Name')
  data_table_4.new_column('date', 'Start Date (L)' )
  data_table_4.new_column('date', 'Start Date (M)' )
  data_table_4.new_column('date', 'Start Date (S)' )
  data_table_4.add_rows([
    ['Mike' , Date.parse('2008-02-28 00:31:26'), Date.parse('2008-02-28 00:31:26'), Date.parse('2008-02-28 00:31:26') ],
    ['Bob'  , Date.parse('2007-06-01 00:00:00'), Date.parse('2007-06-01 00:00:00'), Date.parse('2007-06-01 00:00:00') ],
    ['Alice', Date.parse('2006-08-16'), Date.parse('2006-08-16'), Date.parse('2006-08-16') ],
  ])

  # Create 3 x Formatters
  formatter_L = GoogleVisualr::DateFormat.new( { :formatType => 'long'   } )
  formatter_M = GoogleVisualr::DateFormat.new( { :formatType => 'medium' } )
  formatter_S = GoogleVisualr::DateFormat.new( { :formatType => 'short'  } )

  # Format Columns
  formatter_L.columns(1) # Apply to 2nd Column
  formatter_M.columns(2) # Apply to 3rd Column
  formatter_S.columns(3) # Apply to 4th Column

  data_table_4.format( formatter_L, formatter_M, formatter_S )

  opts     = { :width => 600, :allowHtml => true, :showRowNumber => true }
  @chart_4 = GoogleVisualr::Interactive::Table.new(data_table_4, opts)

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

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

google.visualization.NumberFormat

Formatting options for numeric columns include specifying a prefix symbol (such as a $ sign) or the punctuation to use as a thousands marker.


Example


Code

In your controller, create your data_table object, then create your formatter and apply it to specific column/s.

  data_table_5 = GoogleVisualr::DataTable.new
  data_table_5.new_column('string', 'Department'      )
  data_table_5.new_column('number', 'Revenues Change' )
  data_table_5.add_rows([
    ['Shoes'      , 10700 ],
    ['Sports'     , -15400],
    ['Toys'       , 12500 ],
    ['Electronics', -2100 ],
    ['Food'       , 22600 ],
    ['Art'        , 1100  ]
  ])

  formatter = GoogleVisualr::NumberFormat.new( { :prefix => '$', :negativeColor => 'red', :negativeParens => true } )
  formatter.columns(1) # Apply to 2nd Column

  data_table_5.format(formatter)

  opts     = { :width => 600, :allowHtml => true, :showRowNumber => true }
  @chart_5 = GoogleVisualr::Interactive::Table.new(data_table_5, opts)

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

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