Bar Graph

Navigation:  Widget Designer > Widgets > Displays >

Bar Graph

prev main next

Navigation:  Widget Designer > Widgets > Displays >

Bar Graph

prev main next

Please wait. Due to its content this page might take a while to load...

The BarGraph allows showing any numeric value that is routed to the Bar Graph Output Node.

wd_widget_bar-graph

To create a BarGraph widget choose "Widgets > Displays > BarGraph". The mouse cursor changes to a crosshairs icon, indicating the create mode. With a left-click anywhere on the empty main background window you add the selected widget to the current page. Left-click again if you like to add one more. To quit the create mode, you can switch to the run mode with [F8], where you can use all widgets. Most widgets however need to be set up first.

To set up the BarGraph’s properties, simply right-click on the BarGraph and choose the menu entry "Item Properties", press [ALT+P] whilst the mouse is hovering above it or double-click on it when being in the edit / move mode ([F9]). The BarGraph Property dialog opens up.

wd_widget_bar-graph-properties

General Widget Settings

Name:

A unique name can be entered to identify the widget via the Object and Member Notation. The default name is based on the widget type and ID.

Page:

This drop-down offers all available pages to place the widget on.

ID:
The BarGraph ’s ID may be changed by entering a new one in the text field top left. If you change it, you will be asked if you also want to adapt the name to the new ID.

Notes:

A short note can be added here. It is not displayed outside the widget but can be set and retrieved with the WidgetID.Note property member.

Visible:

Uncheck this box to hide the widget.

Fix:
When the option “Fix” is checked, the BarGraph will be displayed on every page.

Size:

Enter a pixel size for the BarGraph's size.

X and Y:

Enter the location of the widget (upper left corner) in pixels

Bar Graph Properties

Direction:

Set the orientation of the BarGraph to up, down, left or right. You may also want to edit the Edge Radius.

Max / Min:

Set the value range for incoming data using Max and Min.

Design the BarGraph for your own needs by choosing different type of colors (for background, Max, Center and Min Colour). Max, Center and Min Color are only applicable when "Gradient" is checked. Otherwise, the BarGraph will have only the Center Color.

Check "Glossy" to add a 3D gloss to the widget.

Ui Effects & Animations

CSS based effects and animations can be applied to this widget. Please refer to the topic Effects & Animations for more information.