Live Data#

Overview#

The Live Data widget provides a mechanism to execute an action in the system. An example is shown below, where a UI Page possesses one Live Data Widget listening to a variable change, through a Message Bus Data Source.

General Steps#

To use the Live Data widget in a UI Page, follow the steps below:

1. In any UI Page in Build mode, select the Live Data from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
2. Enter the Settings section of the widget through the three vertical dots.
3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image.

Widget Customization#

1. Optionally, in the Style tab, you can define a Border Width and Color.

   

2. In the Layout tab, you can configure the visual properties of the widget, such as:

   • Show Caption - Toggle to show or hide the caption.
   • Show Axes Labels - Toggle to show or hide the axes labels.

   You should also define the properties for the Time Axis, or X-Axis, which include:

   • Time Scale - The X-axis scale displayed in the graph; units can be Minute, Hour, Day, Week, Month, or Year.
   • Time Between Values - The interval between values; units can be Second, Minute, Hour, Day, Week, or Month.
   • Date Format - Choose from DD/MM/YYYY, MM/DD/YYYY, DD/MM, or MM/DD.
   • Time Format - Choose from HH:mm, hh:mm A, HH:mm:ss, or hh:mm:ss A.
   • Timestamp Data Path - Path to the property in the object containing the the event timestamp.

   Finally, you should define the properties for the Values Axis, or Y-Axis, which include:

   • Minimum - The Y-Axis minimum scale value.
   • Maximum - The Y-Axis maximum scale value.
   • Major Unit - The Y-Axis major units.
   • Units - The Y-Axis scale units.
   • Value Data Path - Path to the property in the object containing the event information to display.

   

3. In the Series tab, you should configure series details:

   • Name - Name of the series.
   • Chart Type - Choose between Line or Area.
   • Color - The series color.
   • Is Visible - Toggle to display the series or not.
   • Value Data Path - Path to the property in the object containing the event information specific to the series.
   • Units - The series units.

   

4. Optionally, define the Links between this widget and other elements of the UI Page.

   

5. By saving and closing the settings, the widget will be changed accordingly.

Real Use Case#

To demonstrate how to link a Live Data widget to a Task, we will connect a Live Data widget with a Real Test Time Chart Data Source in this example.

1. Configure the Layout of the Live Data widget as shown below.

   

2. In the Series tab, specify the series that will be displayed.

   

3. Configure the Real Test Time Chart Data Source as shown below. You will find the Task when you select Links Diagram in the UI Page builder.

   

4. In the Links tab of the Live Data widget, set up the link details as shown below.

   

5. The final result should resemble this: