GoogleVisualr - Sankey Diagram


A sankey diagram is a visualization used to depict a flow from one set of values to another.

Sankeys are best used when you want to show a many-to-many mapping between two domains (e.g., universities and majors) or multiple paths through a set of stages (for instance, Google Analytics uses sankeys to show how traffic flows from pages to other pages on your web site).

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



In your controller, create the data_table object, set new columns, add row values, then instantiate the chart with configuration options.

  def sankey

    data_table =
    data_table.new_column('string', 'From')
    data_table.new_column('string', 'To')
    data_table.new_column('number', 'Weight')
        ['A', 'X', 5],
        ['A', 'Y', 7],
        ['A', 'Z', 6],
        ['B', 'X', 2],
        ['B', 'Y', 9],
        ['B', 'Z', 4]

    opts   = { width: 600 }
    @chart =, opts)


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

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