Available from FrameworX 10.1.6.
The WaterfallChart draws floating columns over a running total. Use it for an OEE loss waterfall (planned time, then each loss, down to good output), an energy balance or a batch mass balance. Increases, decreases and totals each have their own color, and connector lines link consecutive columns.
Requirements
This component is Portable. It runs both on Windows and on Web Pages hosted on any platform.
Clients: works in the Rich Client and in the web client (HTML5), with the same values and layout on both. Verified on FrameworX 10.1.6.
Configuration
- Go to Displays / Draw.
- In the Components Panel, select Charts, then choose WaterfallChart.
- Click or drag-and-drop the component into the drawing area.
- Double-click the object to open the configuration window.
Data Binding
Tag mode (default): fill the Steps list, left to right. Each step has a Label, a LinkedValue (a number, a tag or an expression) and IsTotal. A total step draws a full column from 0 to the running total and ignores its own value.
Table mode: set UseDataTable to true and point DataSourceLink to a Dataset query or table (
@Dataset.Query.Name/@Dataset.Table.Name) or a tag that holds a DataTable (@Tag.Name). CategoryColumn and ValueColumn name the columns; the optional IsTotalColumn marks total rows (true, yes, or a non-zero number).
Behavior
A step with a value of 0 or more uses IncreaseFill; a negative step uses DecreaseFill; a total uses TotalFill.
The value axis is automatic and always includes 0.
At most 100 steps are drawn; with more, the StepLimitText note is shown.
When a value label does not fit its slot, all value labels shrink; when the category labels do not fit, only every k-th label is drawn.
Properties
Property | Description | Default |
|---|---|---|
Steps | Tag mode: the columns, left to right (Label, LinkedValue, IsTotal). | (empty) |
UseDataTable | Read the steps from a table instead of the Steps list. | false |
DataSourceLink | Table mode: the data source (Dataset query or table, or a DataTable tag). | (empty) |
CategoryColumn | Table mode: column that holds the step label. | Category |
ValueColumn | Table mode: column that holds the step value. | Value |
IsTotalColumn | Table mode: optional column that marks total rows. Empty means no totals. | (empty) |
ShowConnectors | Draw a connector line at the running total between consecutive columns. | true |
ShowValueLabels | Show the value above each column (the running total on a total column). | true |
ShowCategoryLabels | Show the step labels under the columns. | true |
ShowValueAxis | Show the value-axis tick labels on the left. | true |
ShowGridLines | Show the grid lines. | true |
BarWidthRatio | Column width as a fraction of its slot, 0.1 to 1. | 0.6 |
ValueFormat | Format of the value labels and axis. | #,0.## |
LabelFontSize | Font size of the labels. | 11 |
LabelFontFamily | Font family of the labels. | Verdana |
StepLimitText | Note shown when the data has more than 100 steps. | Step limit reached (100) |
Localize | Enable runtime text localization. | false |
Colors follow the Display theme by default: each color property has a theme slot. Set an explicit color (#AARRGGBB) only to override the theme. Color properties: IncreaseFill (theme green), DecreaseFill (theme red), TotalFill (theme accent), ConnectorStroke, GridStroke and LabelForeground.
Example
An OEE loss waterfall for one shift, in minutes, in tag mode with five steps:
Label | Value | IsTotal |
|---|---|---|
Planned | 480 | false |
Breakdowns | -60 | false |
Setup | -45 | false |
Speed | -15 | false |
Good output | (ignored) | true |
The chart draws Planned from 0 to 480, three red loss columns stepping down to 420, 375 and 360, and the Good output total from 0 to 360, labelled 360. The value axis runs from 0 to 500. In the narrow chart of the image, the Breakdowns and Speed labels are skipped because they do not fit.
Runtime Execution
At runtime the WaterfallChart recomputes the running total and redraws when the values change. The image shows the example above in the Rich Client; the web client draws the same chart.
In this section...