---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-live-data
widgetname: Live Data
description: "This documentation details configuring a widget for real-time data visualization and triggering actions within a system"
---

# Live Data

![uiLiveDataIcon][uiLiveDataIcon]

## 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.

![uiLiveData][uiLiveData]

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

  ![Screenshot showing the live data settings widget.](images/livedata_general_wizard.png)

## Widget Customization

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

    ![style wizard](images/livedata_style.png)

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.
  
    ![Screenshot showing the configuration options for the Live Data widget layout.](images/livedata_layout_wizard.png)

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.

    ![Screenshot showing a series selection interface with "Car Series" and "+0 sere decals" labels.](images/livedata_series_wizard.png)

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

    ![Screenshot showing the setup of link details in the Links tab of the Live Data widget.](images/livedata_links_wizard.png)

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.

    ![Screenshot showing the configuration options for the Live Data widget layout.](images/livedata_layout_wizard.png)

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

    ![Screenshot showing a series selection interface with "Car Series" and "+0 sere decals" labels.](images/livedata_series_wizard.png)

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.

    ![Screenshot showing the configuration of the Real Test Time Chart Data Source in the Wizard.](images/test_real_time_chart_datasource_wizard.png)

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

    ![Screenshot showing the setup of link details in the Links tab of the Live Data widget.](images/livedata_links_wizard.png)

5. The final result should resemble this:

    ![final result](images/use_case_livedata.png)

[uiLiveDataIcon]: images/livedata_icon.png
[uiLiveData]: images/livedata_example.png