Graph Display

Navigation:  Widget Designer > Widgets > Displays >

Graph Display

Previous page Return to chapter overview Next page

The GraphDisplay allows showing the graphical procession of a value over time that is routed to the Graph Display Output Node.

wd_widget_graph-display

To create a GraphDisplay widget choose "Widgets > Displays > GraphDisplay". The mouse cursor changes to a crosshair 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 GraphDisplay’s properties, simply right-click on the GraphDisplay 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 GraphDisplay Property dialog opens up.

wd_widget_graph-display-properties

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

Max / Min

Set the value range for incoming data using Max and Min. If you checked "Automatic Min/Max", those values are automatically to the incoming values.

X-/Y-Factor

Set here a factor to adjust the coordinate system by compressing or stretching the graph.

X-Axis

Enter here an offset for your X-axis.

Interval

If you check "Update Always", the graph is being constantly updated within the given interval. Otherwise, it will only be updated on value change.

Background

An image can be loaded as a background. You can either browse your system for a picture or choose one out of the Resource Manager. Additionally, you can define two different colors for a background gradient by clicking on the two far right color buttons.

 

Title

Enter here a title that is displayed at the top of the GraphDisplay. Uncheck the box "Show Title" if you want to remove the title bar.

Labels

The labels show the the current value as well as Min and Max. Check the box on the left to show the data and set color and font with the respective buttons. Adjust the exactness of the displayed values with the Decimal field.

Customize your GraphDisplay design by adjusting the Line Color and Thickness, the amount of Blur for the line and the Axis Color, as well as the Opacity of the graph.

 

Ui Effects & Animations

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