GoogleVisualr - Histogram


Overview

A histogram is a chart that groups numeric data into bins, displaying the bins as segmented columns.

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.

  # https://developers.google.com/chart/interactive/docs/gallery/histogram#Example1
  def histogram

    data_table = GoogleVisualr::DataTable.new
    data_table.new_column('string'  , 'Dinosaur')
    data_table.new_column('number'  , 'Length')
    data_table.add_rows(
      [
        ['Acrocanthosaurus (top-spined lizard)' , 12.2],
        ['Albertosaurus (Alberta lizard)'       , 9.1],
        ['Allosaurus (other lizard)'            , 12.2],
        ['Apatosaurus (deceptive lizard)'       , 22.9],
        ['Archaeopteryx (ancient wing)'         , 0.9],
        ['Argentinosaurus (Argentina lizard)'   , 36.6],
        ['Baryonyx (heavy claws)'               , 9.1],
        ['Brachiosaurus (arm lizard)'           , 30.5],
        ['Ceratosaurus (horned lizard)'         , 6.1],
        ['Coelophysis (hollow form)'            , 2.7],
        ['Compsognathus (elegant jaw)'          , 0.9],
        ['Deinonychus (terrible claw)'          , 2.7],
        ['Diplodocus (double beam)'             , 27.1],
        ['Dromicelomimus (emu mimic)'           , 3.4],
        ['Gallimimus (fowl mimic)'              , 5.5],
        ['Mamenchisaurus (Mamenchi lizard)'     , 21.0],
        ['Megalosaurus (big lizard)'            , 7.9],
        ['Microvenator (small hunter)'          , 1.2],
        ['Ornithomimus (bird mimic)'            , 4.6],
        ['Oviraptor (egg robber)'               , 1.5],
        ['Plateosaurus (flat lizard)'           , 7.9],
        ['Sauronithoides (narrow-clawed lizard)', 2.0],
        ['Seismosaurus (tremor lizard)'         , 45.7],
        ['Spinosaurus (spiny lizard)'           , 12.2],
        ['Supersaurus (super lizard)'           , 30.5],
        ['Tyrannosaurus (tyrant lizard)'        , 15.2],
        ['Ultrasaurus (ultra lizard)'           , 30.5],
        ['Velociraptor (swift robber)'          , 1.8]
      ]
    )

    opts   = { :width => 700, :height => 400, :title => 'Lengths of dinosaurs, in meters', :legend => { position: 'none' } }
    @chart = GoogleVisualr::Interactive::Histogram.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' %>