GoogleVisualr - Geo Map


Overview

A map of a continent, region, or country with colors and values assigned to specific areas. The chart is rendered within the browser using Flash.

Values are displayed as a color scale, and you can specify optional hover text for areas.

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


Example

We have two examples - the first uses the regions display style, while the second uses the markers display style.

Regions Example

The regions style fills entire areas (typically countries) with colors corresponding to the assigned values.

Specify the regions style by assigning options['dataMode'] = 'regions' in your code.


Markers Example

The markers style displays a circle, sized and colored to indicate a value, over the areas that you specify.

Specify the regions style by assigning options['dataMode'] = 'markers' in your code.


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/geomap.html#Example
  def geo_map

    # Regions Example
    data_table_regions = GoogleVisualr::DataTable.new
    data_table_regions.new_column('string'  , 'Country'   )
    data_table_regions.new_column('number'  , 'Popularity')
    data_table_regions.add_rows(6)
    data_table_regions.set_cell(0, 0, 'Germany'      )
    data_table_regions.set_cell(0, 1, 200)
    data_table_regions.set_cell(1, 0, 'United States')
    data_table_regions.set_cell(1, 1, 300)
    data_table_regions.set_cell(2, 0, 'Brazil'       )
    data_table_regions.set_cell(2, 1, 400)
    data_table_regions.set_cell(3, 0, 'Canada'       )
    data_table_regions.set_cell(3, 1, 500)
    data_table_regions.set_cell(4, 0, 'France'       )
    data_table_regions.set_cell(4, 1, 600)
    data_table_regions.set_cell(5, 0, 'RU'           )
    data_table_regions.set_cell(5, 1, 700)

    opts           = { :dataMode => 'regions' }
    @chart_regions = GoogleVisualr::Interactive::GeoMap.new(data_table_regions, opts)

    # Markers Example
    data_table_markers = GoogleVisualr::DataTable.new
    data_table_markers.new_column('string'  , 'Country'   )
    data_table_markers.new_column('number'  , 'Popularity')
    data_table_markers.add_rows(6)
    data_table_markers.set_cell(0, 0, 'New York'     )
    data_table_markers.set_cell(0, 1, 200)
    data_table_markers.set_cell(1, 0, 'Boston'       )
    data_table_markers.set_cell(1, 1, 300)
    data_table_markers.set_cell(2, 0, 'Miami'        )
    data_table_markers.set_cell(2, 1, 400)
    data_table_markers.set_cell(3, 0, 'Chicago'      )
    data_table_markers.set_cell(3, 1, 500)
    data_table_markers.set_cell(4, 0, 'Los Angeles'  )
    data_table_markers.set_cell(4, 1, 600)
    data_table_markers.set_cell(5, 0, 'Houston'      )
    data_table_markers.set_cell(5, 1, 700)

    opts           = { :dataMode => 'markers', :region => 'US', :colors => ['0xFF8747', '0xFFB581', '0xc06000'] }
    @chart_markers = GoogleVisualr::Interactive::GeoMap.new(data_table_markers, 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' %>