The structure of the XML data file embodies left-to-right streaming flows of values between piles of boxes. Flows in other directions are not supported. The <root> element contains two elements: <piles> for stacks of rectangular boxes and <flows> for the values flowing in between. The example diagram contains two stacks in <piles>, a red and a green one. The colours are assigned automatically, but can be adjusted. Each <pile> consist of two <box>es. The height of the boxes gets determined by the values to be displayed defined in the <flow> elements. The box only needs one attribute <box id=""> with unique content. There can be any number of <pile> stacks and each <pile> can contain any number of <box>es. It is recommended not to have too many small values. In that case, summarize data for a meaningful presentation.
The connection of the boxes through data values is defined in the element <flows>. Inside this element, one <flow> is created for every connection between two boxes. It defines which data value it represents (attribute value=""), which box it starts with (start box id value in the attribute from="") and at which it ends (end box id value in the attribute to="").
The respective <box> does not contain its own information about the data values. Its height is only determined by the flows connected to it. The connection is established through the id attribute of the box.
Text written into the box or flow elements is shown in the graphic. It is also possible to output the values.
In the following table the nodes of the XML tree are listed. Elements are dark red and Attributes are shown in light red in alphabetical order. The text node is also mentioned at the end. He doesn't have a name of his own. The name in the first column is printed bold. The fourth column shows the parent elements the Node can be used in. For the elements, the possible children (nodes contained in the element) are shown. The required children are shows bold, the optional ones are shown normally. Attributes and texts have no child elements.
As a rule, attributes cannot only be used in the element to which they refer affect, but also in the elements above. In that case they affect all elements that are included below and for which they are intended. So the colour can be set for a complete <pile color=""> with just one attribute and a different colour can still be used for a single <box color="">. <root color=""> would set all boxes and flows to the same colour. Despite such a top-level definition different colours can be applied in the levels below, each of which applies to its area.
| node | parents | children | ||||
| name | type | comment | name | name | type | number |
| align | attribute | Horizontal alignment of the text in a <box> or a <flow>. Permissible values are: • start (left justified) • middle • end (right justified) Default value: middle |
root piles pile box flows flow |
|||
| arrow | attribute | Brings a <flow> into arrow shape. Specified as numerical value in coordinate units. A meaningful value for arrow display is 10. Default value: 0 (no arrow) |
flows flow |
|||
| bend | attribute | Bend of a <flow>. Specified as numerical value in coordinate units. Default value: 150 |
flows flow |
|||
| box | element | Box as a source and/or target point of the flowing values. | pile |
align | attribute | 0..1 |
| color | attribute | 0..1 | ||||
| dominant-baseline | attribute | 0..1 | ||||
| font-family | attribute | 0..1 | ||||
| font-size | attribute | 0..1 | ||||
| gap | attribute | 0..1 | ||||
| id | attribute | 1 | ||||
| opacity | attribute | 0..1 | ||||
| text-color | attribute | 0..1 | ||||
| unit | attribute | 0..1 | ||||
| unit-pattern | attribute | 0..1 | ||||
| value | element | 0..1 | ||||
| vertical | attribute | 0..1 | ||||
| width | attribute | 0..1 | ||||
| x | attribute | 0..1 | ||||
| y | attribute | 0..1 | ||||
| box_padding_bottom | attribute | Padding in a box below text with vertical="bottom". Default value is 4. |
root piles pile box |
|||
| box_padding_top | attribute | Padding in a box above text with vertical="top". Default value is 8. |
root piles pile box |
|||
| color | attribute | Colour of a <box> or a <flow>. Permissible values are: • Colour names (e.g. Cyan, Orange, ForestGreen, Blue) following SVG specification • Hexadecimal notation (#rrggbb) • rgb (r, g, b) each with a value from 0-255 or 0% to 100% for red, green and blue An overview is provided at en.wikipedia.org/wiki/Web_colors. CSS3 colour names and HSL notation are partially supported, but not included into the SVG standard. Default value for <box>: • 1st pile: firebrick • 2nd pile: forestgreen • 3rd pile: rgb(30,144,255) • 4th pile: #FFD700 • 5th pile: rgb(0%,81%,82%) • Repeating from 6th pile on. The default value for <flow> is a gradient between the two adjacent piles with their colours. If a colour value is defined, then this one colour is used. Gradients can't be defined with divergent self defined colours. |
root piles pile box flows flow |
|||
| dominant-baseline | attribute | Position of the text relative to the coordinate position on the y axis in a <box>. Permitted in a <text> element only if that is located within a <box> element. The default value is depends on the value of the attribute vertical="": • hanging on vertical="top" (text below the coordinate) • central on vertical="middle" and if vertical is not defined (text vertical centered on the coordinate) • ideographic on vertical="bottom" (text including typographical descenders above coordinate) Problem: not all SVG renderer support this setting. See also chapter problems. |
piles pile box box/text |
|||
| end | attribute | Length of the straight part at the end of the <flow> behind the bend. For the straight part at the beginning see attribute start="", for the strength of the bend see bend="". Default value: 5 |
flows flow |
|||
| flow | element | Value flow connecting the <box>es. | flows |
align | attribute | 0..1 |
| arrow | attribute | 0..1 | ||||
| bend | attribute | 0..1 | ||||
| color | attribute | 0..1 | ||||
| end | attribute | 0..1 | ||||
| font-family | attribute | 0..1 | ||||
| from | attribute | 1 | ||||
| gradient-stop-from | attribute | 0..1 | ||||
| gradient-stop-to | attribute | 0..1 | ||||
| opacity | attribute | 0..1 | ||||
| start | attribute | 0..1 | ||||
| startOffset | attribute | 0..1 | ||||
| text-color | attribute | 0..1 | ||||
| to | attribute | 1 | ||||
| unit | attribute | 0..1 | ||||
| unit-pattern | attribute | 0..1 | ||||
| value | attribute | 1 | ||||
| via | element | 0..n | ||||
| flows | element | This element is only available once. It contains the <flow> elements. | root |
align | attribute | 0..1 |
| arrow | attribute | 0..1 | ||||
| bend | attribute | 0..1 | ||||
| color | attribute | 0..1 | ||||
| end | attribute | 0..1 | ||||
| flow | element | 1..n | ||||
| font-family | attribute | 0..1 | ||||
| gradient-stop-from | attribute | 0..1 | ||||
| gradient-stop-to | attribute | 0..1 | ||||
| opacity | attribute | 0..1 | ||||
| start | attribute | 0..1 | ||||
| startOffset | attribute | 0..1 | ||||
| text-color | attribute | 0..1 | ||||
| unit | attribute | 0..1 | ||||
| unit-pattern | attribute | 0..1 | ||||
| font-family | attribute | Font used for a <box>, <flow>, <title> or <text>. The font must be available on the displaying system. Alternative fonts can be defined through following comma separated font names. Generic fonts can be specified as serif, sans-serif, cursive, fantasy or monospace. With this input the appropriate installed font will be used. Default value: sans-serif |
root piles pile box flows flow title text |
|||
| font-size | attribute | Font size for a <box>, <flow>, <title> or <text>. The expected value is a number without added dimension information, because the value is used for calculations. The unit pt (point) is added automatically. Default value: 16 | root piles pile box flows flow title text |
|||
| from | attribute | Defines the starting point of a <flow>, the source <box> on the left side. The value is the id of the relevant <box>. The target box is defined with the <flow to=""> attribute. | flow |
|||
| gap | attribute | Height of the gap above a <box> to the one above. Doesn't affect the top <box> of a <pile>,
because here the attribute <pile y=""> is authoritative. The vertical position of a <box> can't only be specified relative to the one above with <box gap="">, but also absolutely with <box y="">. Default value: 20 |
piles pile box |
|||
| gradient-stop-from | attribute | Start of the colour gradient in a <flow> without a defined colour (see also attribute color=""). For the end of the
colour gradient see attributegradient-stop-to="". Default value: 30% |
flows flow |
|||
| gradient-stop-to | attribute | End of the colour gradient in a <flow> without a defined colour (see also attribute color=""). For the start of the
colour gradient see attributegradient-stop-from="". Default value: 70% |
flows flow |
|||
| id | element | Displays the id of the <box> the element <id> is contained in. Warning: not to be confused with with the attribute the id is defined with. |
box |
|||
| id | attribute | Defines the id of the <box>. The id's must be unique and are not allowed for multiple use. The attribute is also used as a reference in the element <via>. For using there the id must already be defined in a <box>. That also applies to the references in the attributes from and to of the element <flow>. Warning: not to be confused with with the element id used to display the id value. |
box via |
|||
| opacity | attribute | Opacity of a <box> or <flow>. The value is a number from 0 to 1. While 0 is completely transparent, 1 is completely opaque. For the value <flow> being slightly transparent is useful for a better understanding of crossing <flow>s. Default value, depending on the parent element: • 1 with <box> • 0.7 with <flow> |
root piles pile box flows flow |
|||
| pile | element | A pile contains <box> elements. For a flow of values to be represented, there must be at least two <pile> elements. | piles |
align | attribute | 0..1 |
| box | element | 1..n | ||||
| color | attribute | 0..1 | ||||
| dominant-baseline | attribute | 0..1 | ||||
| font-family | attribute | 0..1 | ||||
| font-size | attribute | 0..1 | ||||
| gap | attribute | 0..1 | ||||
| opacity | attribute | 0..1 | ||||
| text-color | attribute | 0..1 | ||||
| title | element | 0..1 | ||||
| unit | attribute | 0..1 | ||||
| unit-pattern | attribute | 0..1 | ||||
| vertical | attribute | 0..1 | ||||
| width | attribute | 0..1 | ||||
| x | attribute | 0..1 | ||||
| y | attribute | 0..1 | ||||
| piles | element | This element is only available once. It contains the <pile> elements. | root |
align | attribute | 0..1 |
| color | attribute | 0..1 | ||||
| dominant-baseline | attribute | 0..1 | ||||
| font-family | attribute | 0..1 | ||||
| font-size | attribute | 0..1 | ||||
| gap | attribute | 0..1 | ||||
| opacity | attribute | 0..1 | ||||
| pile | element | 2..n | ||||
| text-color | attribute | 0..1 | ||||
| unit | attribute | 0..1 | ||||
| unit-pattern | attribute | 0..1 | ||||
| vertical | attribute | 0..1 | ||||
| width | attribute | 0..1 | ||||
| root | element | This element is only available once on top of the node tree. It contains all other elements. | piles | element | 1 | |
| flows | element | 1 | ||||
| title | element | 0..1 | ||||
| text | element | 0..n | ||||
| svg:* | element | 0..n | ||||
| align | attribute | 0..1 | ||||
| color | attribute | 0..1 | ||||
| font-family | attribute | 0..1 | ||||
| font-size | attribute | 0..1 | ||||
| opacity | attribute | 0..1 | ||||
| text-color | attribute | 0..1 | ||||
| unit | attribute | 0..1 | ||||
| unit-pattern | attribute | 0..1 | ||||
| start | attribute | Length of the straight part at the beginning of the <flow> ahead of the bend. For the straight part at the end see attribute end="", for the strength of the bend see bend="". Default value: 5 |
flows flow |
|||
| startOffset | attribute | Horizontal position of the text in a <flow>. Inside the <text> element only permissible if that is located within a <flow> element. The range of values is 0 to 100 and denotes the percentage of the position on the <flow>, where 0 is all the way left and 100 is completely on the right side. Tip: a text can also be positioned right even though using <flow align="start"> by setting startOffset to a high value like startOffset="75". That way the text ist positioned on the right side controlling the start (left side) of the text. The default value depends on the value of the attribute align="": • 1 with align="start" • 50 with align="middle" and if align is not defined • 99 with align="end" |
flows flow flow/text |
|||
| svg:* | element | In the <root> element any SVG elements be included. These are copied into the generated SVG file without changes. A good knowledge of the SVG standard is helpful. The used coordinates must be positioned inside the generated graphic to be visible. The SVG elements must be in the svg namespace. It is recommended to put these elements together inside a group. This way e.g. a logo can be inserted into the graphic automatically. svg:* means all elements in the namespace svg. |
root |
svg:* | element | |
| text | element | Contains text to be displayed. Not required inside <box> and <flow>, but useful if the text position is to be defined more precisely. This element is required to insert text inside the <root> element. So <text x=""y=""> is required for absolut positioned text. The attributes dominant-baseline="" and vertical="" are only allowed inside the <text> element, if the parent element of that is a <box>. The attribute startOffset="" is only allowed inside the <text> element, if the parent element is a <flow>. |
root box flow |
align | attribute | 0..1 |
| dominant-baseline (*unter box) | attribute | 0|0..1* | ||||
| font-family | attribute | 0..1 | ||||
| font-size | attribute | 0..1 | ||||
| startOffset (*unter flow) | attribute | 0|0..1* | ||||
| value | element | 0..1 | ||||
| vertical (*unter box) | attribute | 0|0..1* | ||||
| x | attribute | 0..1 | ||||
| y | attribute | 0..1 | ||||
| Text | ||||||
| text-color | attribute | Text colour of an element. Possible values: • Color names (e.g. Cyan, Orange, ForestGreen, Blue) following SVG specification • Hexadecimal notation (#rrggbb) • rgb (r, g, b) each with a value from 0-255 or 0% to 100% for red, green and blue An overview is provided at en.wikipedia.org/wiki/Web_colors. CSS3 colour names and HSL notation are partially supported, but not included into the SVG standard. If no individual setting is made, black is used as default text colour. |
root piles pile box flows flow |
|||
| title | element | Title text. | root pile |
font-family | attribute | 0..1 |
| font-size | attribute | 0..1 | ||||
| value | element | 0..1 | ||||
| x | attribute | 0..1 | ||||
| y | attribute | 0..1 | ||||
| Text | ||||||
| to | attribute | Defines the end point of a <flow>, the target <box> on the right side. The value is the id of the relevant <box>. The source box is defined with the <flow from=""> attribute. | flow |
|||
| type | attribute | If the element <value> is used within the elements <box> or <pile>, the values flowing in and out can differ. In that case the attribute type="" is used to define which values to display. If the attribute is omitted, the bigger sum resulting is processed. Within a <flow> there is only one value, so that attribute is not applicable. Possible values: type="from" or type="to". |
value |
|||
| unit | attribute | Displayed values can have a unit name attached. This attribute defines that unit name, e.g. <root unit=" M €"> for million Euro. The characters defined are appended right to the value. If a space character is intended, this must be included into the attribute. For display on the left side see unit-prefix="". Default value: unit="" (empty) |
root piles pile box flows flow value |
|||
| unit-pattern | attribute | Pattern for value display. Decimal places, decimal separator and thousands separator are defined here. Available characters are as thousands separator: space , point ., acute ´ and comma , as decimal separator: point . and comma , as placeholder: Hash # for optional digits and Null 0 for required digits A number input of 1234567.89 in the XML file can be displayed as follows: unit-pattern="# ##0" 1 234 568 unit-pattern="#.##0" 1.234.568 unit-pattern="#.##0,0" 1.234.567,9 unit-pattern="#,##0" 1,234,568 unit-pattern="#,##0.0000" 1,234,567.8900 unit-pattern="#´##0" 1´234´568 unit-pattern="#´##´##0" 12´34´568 Default value: unit-pattern="# ##0" (with thousands spaces and without decimal places) |
root piles pile box flows flow value |
|||
| unit-prefix | attribute | Displayed values can have a unit name attached. This attribute defines that unit name, e.g. <root unit="$"> for Dollar. The characters defined are appended left to the value. If a space character is intended, this must be included into the attribute. For display on the right side see unit="". Default value: unit-prefix="" (empty) |
root piles pile box flows flow value |
|||
| value | element | Displays a value, depending on parent element: • With <flow> its value • With <box> its value sum • With <pile> its value sum With different from and to values within a <box> the side to be processed can be controlled with the attribute type="from|to". Within a <flow> there are no different values and thus no need for the type attribute. Warning: not to be confused with the value="" attribute that values are defined with and that is used only in the <flow> element. |
pile box flow |
type | attribute | 0..1 |
| unit | attribute | 0..1 | ||||
| unit-pattern | attribute | 0..1 | ||||
| value | attribute | Defines the value represented by a <flow> element. Exclusively used here. Warning: not to be confused with the <value> element that values are displayed with. |
flow |
|||
| vertical | attribute | Vertical alignment of the text in a <box>. Permitted values: • top • middle • bottom Default value: middle In combination with the attribute align="" positions like top left are possible. With older browsers the value top can lead to a position above the box instead of top within the box. In the <flow> element the vertical change is not supported. |
piles pile box |
|||
| via | element | Directs a value <flow> through a <box> without interrupting it there. Usefull if there are other piles between the source and the target of the value flow and in that pile(s) in between a gap is generated by a <box> defined for this purpose. If a <box> is used just for a <via>, it's recommended to use <box color="none"> to make it invisible. | flow |
id | attribute | 1 |
| x | attribute | Fixed horizontal position. Specified as a numerical value in coordinate units. Overrides the automatic positioning. | pile box title text |
|||
| y | attribute | Fixed vertical position. Specified as a numerical value in coordinate units. Overrides the automatic positioning. | pile box title text |
|||
| width | attribute | Width of a <box>. Default value: 300 |
piles pile box |
|||
| Text | Only the permitted parent elements contain displayed text. This includes suitable SVG elements. | box flow title text svg:* |
||||