Simple XML for Sankey diagrams

Custom visualizations use a namespaced syntax for Simple XML. Specific visualization properties are appended to the app and visualization context.

Add a Sankey diagram to a dashboard panel

You can add a Sankey diagram to a dashboard panel using Simple XML. Use this syntax to specify the app and visualization context.

<viz type="sankey_diagram_app.sankey_diagram">
</viz>

Configure Sankey diagram properties

To configure a Sankey diagram property, add any of the following property names and a value to this syntax.

<option name=
    "sankey_diagram_app.sankey_diagram.[property_name]">[property_value]
</option>

Option name	Accepted values	Default	Example
showLabels	[ true | false]	true	<option name="sankey_diagram_app.sankey_diagram.showLabels">false</option>
showLegend	[ true | false]	true	<option name="sankey_diagram_app.sankey_diagram.showLegend">false</option>
showTooltip	[ true | false]	true	<option name="sankey_diagram_app.sankey_diagram.showTooltip">false</option>
useColors	[ true | false]	true	<option name="sankey_diagram_app.sankey_diagram.useColors">false</option>
colorMode	[ categorical | sequential]	categorical	<option name="sankey_diagram_app.sankey_diagram.colorMode">categorical</option>
minColor	Any valid CSS color string.	#d93f3c	<option name="sankey_diagram_app.sankey_diagram.minColor">#3fc77a</option>
maxColor	Any valid CSS color string.	#3fc77a	<option name="sankey_diagram_app.sankey_diagram.maxColor">#6db7c5</option>
numBins	Any number from 3-9	6	<option name="sankey_diagram_app.sankey_diagram.numOfBins">5</option>
showSelf	[ true | false]	false	<option name="sankey_diagram_app.sankey_diagram.showSelf">true</option>
showBackwards	[ true | false]	false	<option name="sankey_diagram_app.sankey_diagram.showBackwards">true</option>
styleBackwards	[ true | false] Use true for dashed backwards links. Use false for solid backwards links.	false	<option name="sankey_diagram_app.sankey_diagram.styleBackwards">true</option>

Example Simple XML source

Here is an example dashboard panel.

<dashboard version="1.1">
  <label>Sankey Diagram</label>
  <description>Sankey diagrams show metric flows and category relationships, visualizing density and trends.</description>
  <row>
    <panel>
      <title>Categorical Colors</title>
      <viz type="sankey_diagram_app.sankey_diagram">
        <search>
          <query>|inputlookup webstore_requests.csv  | rex field=referer "https?://.*(?<referer_path>/.*)\?.*"  | stats count, avg(bytes) by referer_path uri_path</query>
          <earliest></earliest>
          <latest></latest>
        </search>
        <option name="sankey_diagram_app.sankey_diagram.colorMode">categorical</option>
        <option name="sankey_diagram_app.sankey_diagram.maxColor">#3fc77a</option>
        <option name="sankey_diagram_app.sankey_diagram.minColor">#d93f3c</option>
        <option name="sankey_diagram_app.sankey_diagram.numOfBins">6</option>
        <option name="sankey_diagram_app.sankey_diagram.showBackwards">0</option>
        <option name="sankey_diagram_app.sankey_diagram.showLabels">1</option>
        <option name="sankey_diagram_app.sankey_diagram.showLegend">1</option>
        <option name="sankey_diagram_app.sankey_diagram.showSelf">0</option>
        <option name="sankey_diagram_app.sankey_diagram.showTooltip">1</option>
        <option name="sankey_diagram_app.sankey_diagram.styleBackwards">0</option>
        <option name="sankey_diagram_app.sankey_diagram.useColors">1</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel>
      <title>Sequential Colors</title>
      <viz type="sankey_diagram_app.sankey_diagram">
        <title>Color here indicates average bytes transferred between two requested pages.</title>
        <search>
          <query>|inputlookup webstore_requests.csv  | rex field=referer "https?://.*(?<referer_path>/.*)\?.*"  | stats count, avg(bytes) by referer_path uri_path</query>
        </search>
        <option name="sankey_diagram_app.sankey_diagram.colorMode">sequential</option>
        <option name="sankey_diagram_app.sankey_diagram.maxColor">#65a637</option>
        <option name="sankey_diagram_app.sankey_diagram.minColor">#f7bc38</option>
        <option name="sankey_diagram_app.sankey_diagram.numOfBins">6</option>
        <option name="sankey_diagram_app.sankey_diagram.showBackwards">0</option>
        <option name="sankey_diagram_app.sankey_diagram.showLabels">1</option>
        <option name="sankey_diagram_app.sankey_diagram.showLegend">1</option>
        <option name="sankey_diagram_app.sankey_diagram.showSelf">0</option>
        <option name="sankey_diagram_app.sankey_diagram.showTooltip">1</option>
        <option name="sankey_diagram_app.sankey_diagram.styleBackwards">0</option>
        <option name="sankey_diagram_app.sankey_diagram.useColors">1</option>
      </viz>
    </panel>
  </row>
  <row>
    <panel>
      <title>With Backwards Links Enabled</title>
      <viz type="sankey_diagram_app.sankey_diagram">
        <title>Includes links that go back to previous steps</title>
        <search>
          <query>|inputlookup webstore_requests.csv  | rex field=referer "https?://.*(?<referer_path>/.*)\?.*"  | stats count, avg(bytes) by referer_path uri_path  | where count > 10</query>
          <earliest>0</earliest>
        </search>
        <option name="sankey_diagram_app.sankey_diagram.colorMode">categorical</option>
        <option name="sankey_diagram_app.sankey_diagram.maxColor">#3fc77a</option>
        <option name="sankey_diagram_app.sankey_diagram.minColor">#d93f3c</option>
        <option name="sankey_diagram_app.sankey_diagram.numOfBins">6</option>
        <option name="sankey_diagram_app.sankey_diagram.showBackwards">true</option>
        <option name="sankey_diagram_app.sankey_diagram.showLabels">1</option>
        <option name="sankey_diagram_app.sankey_diagram.showLegend">1</option>
        <option name="sankey_diagram_app.sankey_diagram.showSelf">false</option>
        <option name="sankey_diagram_app.sankey_diagram.showTooltip">1</option>
        <option name="sankey_diagram_app.sankey_diagram.styleBackwards">0</option>
        <option name="sankey_diagram_app.sankey_diagram.useColors">1</option>
      </viz>
    </panel>
  </row>
</dashboard>