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>
Add a Sankey diagram to a dashboard | Release notes |
This documentation applies to the following versions of Sankey Diagram: 1.0.0, 1.1.0, 1.2.0, 1.3.0, 1.5.0, 1.6.0
Feedback submitted, thanks!