Timeline

Use the timeline widget to visually monitor the progress of your events.

Generally used for time-based events, the timeline widget can monitor the status of a machine and update the events that occurred over a time period. It can capture data on how long a machine was running, or remained in an idle state. To visualize multiple events against a single time period, add multiple timelines aligned to the same X-axis on a chart.

The timeline widget is available under Integration > Charts. When designing application pages, drag-and-drop to a container.

The following list of properties are specific to this widget. For common properties, refer to Page Components.

Table 1. Timeline Properties
Property Description
BEHAVIOR > Event Selected Trigger actions on the timeline selected event.
Title Enter a title to help identify the timeline at runtime.
Font Color Select a font color for the widget text.
Show Border Select the check box to add a border to the timeline widget. A border frames the widget and provides a clean look.
Border Color Select a color for the border.
Show X-axis Labels Select the check box to show the X-axis ticks on the widget at runtime. Clear the check box to hide the ticks.
Width Enter a width for the timeline widget.
Height Enter a height for the timeline widget.
Event Table Datasource The event table helps to match the colors and labels. It enables the widget to assign a specific color and label to an incoming event.

When a value from the result set matches a value from the event table, then the configured color and label applies to that entry. You can configure an event table either manually, or get data from a data source.

Select the output fields in this order:
  • Value
  • Label
  • Color

Use any of these options to get data from a data source:

  • Select a query output.
  • Select a global parameter.
  • Enter source data manually.
  • Add a formula.
Note: Currently, we only support the option to use a query output to retrieve data.
Point Primary Color Serves as the first color in the zebra striped color pattern. Select a primary color to apply to the timeline event table if not retrieving values from a datasource.
Point Secondary Color Serves as the second color in the zebra striped color pattern. Select a secondary color to apply to the timeline event table if not retrieving values from a datasource.
Event Table Manual You can create event table entries manually. In the absence of an Event Table Datasource, these entries are used for retrieving data for the timeline events.
  • Select +Add Item to create an event table entry.
  • For each event table entry, enter these details:
    • Value
    • Label
    • Color

Events that do not match an entry from the event table are assigned the Point Primary Color or Point Secondary Color.
Datasource Values Configure one or more data sources to get values for the timeline widget. When you add multiple data sources, you get a single view for multiple timelines all aligned to the same X-axis. It allows you to compare data at different time intervals. To configure a data source:
  1. Select +Add Item.
    Note: You must add an item even if you want to drag and drop the data to bind to the widget.
  2. Enter a Name to identify the data source at runtime.

    The name is shown next to the timeline and on the tooltip. If you do not provide a name for the data source, the query name appears on the tooltip.

  3. Use any of these options to get data from a data source:
    • Select a query output.
    • Select a global parameter.
    • Enter source data manually.
    • Add a formula.
    You must select timestamp as the first value followed by other values. Select the output fields in this order:
    • Datetime
    • Value
Note: Currently, we only support the option to use a query output to retrieve data.
Input Datetime Format Select from local or UTC.
Start Sample Select the Enable check box to insert an event at the start of the timeline. Then, specify the start timestamp.
Datasource Start Timestamp Use any of these options to provide start timestamp values from a data source:
  • Select a query output.
  • Select a global parameter.
  • Enter source data manually.
  • Add a formula.
Datasource Start Value Use any of these options to provide event value at the start (after timestamp) from a data source:
  • Select a query output.
  • Select a global parameter.
  • Enter source data manually.
  • Add a formula.
End Sample Select the Enable check box to insert an end time for the last event on the timeline. Then specify the end timestamp.
Datasource End Timestamp This is the final timestamp for the last event in the query. It is required to specify an end timestamp to get all the values from last queried batch on display.

Use any of these options to provide end timestamp values from a data source:

  • Select a query output.
  • Select a global parameter.
  • Enter source data manually.
  • Add a formula.
Output Targets You can configure output targets for a selected event. At runtime, these targets trigger only on selecting the respective event.
  • Select +Add Item to configure an output target.
  • Select an Output Value. The available values are Start Local Time, Start Local Time ISO, Start UTC Time, Start UTC Time ISO, End Local Time, End Local Time ISO, End UTC Time, End UTC Time ISO, Value, and Label.
  • To specify a target source/tag, use a query or global.
You can add one or more output targets for an event.
  • Use and to reorder output targets. The output targets are implemented in the specified order.
  • Select to delete an output target.

Timeline at Runtime