The Widget Chart is useful on dashboards because it uses minimal panel space.
General Configuration
The general properties that may be configured are the same as with most other chart types. Refer to The General Configuration of a Chart in Flow for more information on these properties.
Section
In the Section tab of the chart properties, one may configure one/more sections. Multiple sections in a single Widget Chart are displayed vertically. There is no limit to how many Sections may be added to a Widget Chart. There is no vertical scrollbar in a Widget Chart - as Sections are added, the vertical space for each Section is proportionally reduced.
There is only one additional property that may be configured for a Section - the background color. Unlike other chart types, one cannot specify a Section Title, a Section Caption, whether the sections are Collapsed by default, etc.
Within each Section, one may configure one or more Widgets. Widgets within a Section are displayed horizontally within that Section. There is no limit to how many Widgets may be configured within a Section. There is no horizontal scrollbar in a Widget Chart - as Widgets are added within a Section, the horizontal space for each Widget is proportionally reduced.
In the image below, multiple (8) Sections have been configured, and within the first Section, multiple (13) Widgets have been configured.
Widget
Four types of widgets may be configured: Chart, Gauge, Donut, and Text. The default type is Chart.
Within a Widget, one may add one (1) or two (2) measures. Note, however, that adding a second measure to a Widget only makes sense if the widget type is Chart - for the other types, the second measure's value/s will not be displayed.
If two measures are added to a Widget, the value displayed will be that of the first measure added. In the example below, two measures have been added to a Widget. Note that the first measure's value (Filler 1 Good Production) is displayed in the Widget Title. In this case, the widget is displaying the Good Production in green, and the Bad Production in red. The "Chart Type" for both measures is "Area".
Section > Widget > Measure > General > Title
The Title is displayed above the measure value. By default, the Title is set to the measure name, but may be modified.
Section > Widget > Measure > General > Type
A Widget of type "Chart" is similar to a Time Based Chart. Measures that are added to this type of Widget may be configured to display in one of four types: Line, Column, Area, Shape:
The image below depicts the same measure configured to display in each of the four types mentioned above - from left to right: Line, Column, Area, Shape:
Section > Widget > Measure > General > Limit
If a measure has limit/s configured, the limit values may be displayed in the widget. The Line Style and Line Width are configurable.
In the above image, the limit has an upper and a lower value configured, and the Color property is configured with a Limit "color provider". This means that if the value is within the limits, it will display in the Base Color; but if it is outside the limit values it will display in the corresponding Low/High limit colors configured for that Limit in the Tools menu of the Config Tool.
Section > Widget > Measure > General > Context
If a measure has event attribute context configured, the values may be displayed per attribute.
These may be displayed unstacked (side-by-side), stacked by Value, or stacked by Percentage. The below image shows the three stack options, respectively:
Section > Widget > Measure > General > Color
This property is used to select the Base Color and Opacity of the measure value/s. Additional options may be configured by right-clicking on the Color property - these options may be "Measure (self)" or "Limit".
If "Measure (self)" is selected, a variety of colors will be used by taking the maximum and minimum values in the range and dividing these into the number of Steps configured. Based on the Palette, the Low, and the High Color, a color gradient will be applied to the measure values; similar to a heatmap.
If "Limit" is selected, the color will depend on the Base color, the selected limit's colors (configured in Tools), and the measure value relative to the selected limit's values. See the section above on the Limit property configuration.
Section > Widget > Measure > General > Details
This property allows you to display a measure value different from the measure configured in the Widget. This is useful when you want to display a lower interval type value in the widget. For example, you may have a daily widget, to which you've added a daily production measure, but you'd like to display the latest value for production from the last completed shiftly production measure - you can drag and drop the shiftly production measure onto the "Latest" placeholder in the Details property.
Widget Properties
The following Widget properties are configurable by selecting Section > Widget:
Font Color, Font Size, Value Font Size, Font Bold, Font Italic
These properties apply to both the Title and the Value that is displayed for the specific Widget.
Alignment & Title Position
These properties modify the placement of the Title and Value. Alignment affects the horizontal placement, while Title Position affects the vertical placement.
See below an example of different Alignment values (Left, Center, Right):
See below an example of different Title Position values (Top, Middle, Bottom):
Time Base & Time Base Format
By default, Time Base is configured as "None". In this case, the "Time Base Format" is not used and the measure value is assumed to be an arbitrary value and is displayed as such.
However, if the measure value is meant to represent a value of time, you can specify what the value represents by configuring the "Time Base" property. Possible values for Time Base are:
- None
- Seconds
- Minutes
- Hours
- Days
- Weeks
- Months
- Years
In the example below, the measure value represents the Filler Downtime. The base value is 1124000. Note how varying the Time Base from None to Years (as per the list above) results in the base value being interpreted in the different units of time.
In the above example, the "Time Base Format" was set to "Default", so Flow automatically evaluated the format that made the most sense for the value that was being displayed. If desired, the Time Base Format may be explicitly configured. Possible values for Time Base Format are:
- Default
- dd hh:mm:ss
- hh:mm:ss
- d [day], h [hrs], m [min], s [sec]
- [day], h [hrs], m [min], s [sec]
The example below shows each of these Time Base Format options, configured in the order shown in the above list:
Display Interval Type, Display Interval Base, Display Interval Fomat
These properties are used to configure the display interval, which is displayed in the top right of a widget. The display interval shows the duration/interval for which the values in that widget are being displayed. Possible options for Display Interval are:
- True
- False
If the Display Interval is set to False, it will be hidden, and the Display Interval Base and Display Interval Format properties are not used.
Possible options for Display Interval Base are:
- None
- Seconds
- Minutes
- Hours
- Days
- Weeks
- Months
- Years
Cconfiguring the Display Interval Base to one of the above values will convert/translate the interval into the respective time units. In the example below, the interval of data retrieved by each of the widgets is 477 days. Look at the text in the top-right corner of each widget - the Time Base has been configured to each of the Display Interval Base options listed above (in the order None, Seconds,..., Years). Note how the interval of 477 days is converted to the various time units.
The Display Interval Format property is used to configure how the Display Interval should be formatted. Possible options for Display Interval Format are:
- Default
- dd hh:mm:ss
- hh:mm:ss
- d [day], h [hrs], m [min], s [sec]
- [day], h [hrs], m [min], s [sec]
In the below example, the interval is 11462 hours. Note how the Display Interval is changed as the Display Interval Format is modified (from dd hh:mm:ss to [day], h [hrs], m [min], s [sec], as per the above list):
Section > Widget > Type
The "Type" property is used to configure which of the four widget types are required. As previously mentioned, these may be Chart, Gauge, Donut, and Text. The default type is Chart.
Chart
Below are examples of Chart widgets.
In the above, from left to right, the measure "Type" property (in Section > Widget > Measure > Type) is configured as Line, Column, Area, and Shape. For the Shape chart, the "Shape" has been changed to "Star".
Gauge
Below are examples of Gauge widgets:
In the left gauge, the "Start Angle" is left at its default value of "0" and the "Sweep Angle" is left at its default value of "270". Attribute Context has been configured, which is why values are displayed per product.
In the middle gauge, the Start Angle is 270 and the Sweep Angle is 180. Here, a Limit is configured and the Color is set to a Limit color provider. Therefore, the Low and High limit values are displayed on the gauge, and because the value is below the Low Limit Value, the gauge color is that of the Low Limit color.
In the right gauge, the Start Angle is 270 and the Sweep Angle is 180. The "Widget Gauge Style" property, which is configured in Section > Widget > Measure has been modified from the default value of "Dial" to "Meter". The "Meter Needle Color" property has also been modified.
Donut
Below is an example of a Donut widget. A Donut widget only makes sense when the measure value has attribute context.
Text
Below is an example of a Text widget: