The Timeline is a graphical component used for visual data representation in displays. It allows users to visualize information about periods of time in an intuitive way, only requiring a table from which to gather data.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Requirements
This graphical component requires a structured data source. This component is Portable, which means it will run both on Windows WPF displays and on Web Pages on any platform.
Configuration
Go to Displays / Draw.
On the Components Panel, select Charts, then Timeline.
Click or drag-and-drop it on the Drawing area to use it.
Double-click the object to open the configuration window.
Timeline settings | |
|---|---|
Field | Description |
LinkedValue (DataSource) | The table from which the component will draw data. This can be either a DataTable tag or a table from a dataset. |
Control Title | The timeline control title. |
Start Date Time | A DateTime tag representing the timeline’s start date. |
End Date Time | A DateTime tag representing the timeline’s end date. |
Selected Index | The tag assigned to this field will be updated to a number representing the selected timeline item. This option is output-only, which means that the assigned tag will be updated whenever the timeline control changes. However, changes made to the tag by external sources (such as devices, scripts and other components) will not affect the timeline component. |
Selected Row | Passes information about the selected timeline item to a template tag. This option is output-only, which means that the assigned tag will be updated whenever the timeline control changes. However, changes made to the tag by external sources (such as devices, scripts and other components) will not affect the timeline component. |
Tooltip on Hover | When selected, the component shows a tooltip with information about the item the mouse pointer is hovering over. |
Tooltip on Click | When selected, the component shows a tooltip with information about the item the user clicks on. |
Label Font Color | The color of time labels. |
Label Font Size | The size of time labels. |
Enable Ticks | When selected, shows evenly-distributed ticks and labels specifying at which point in time events took place. |
Stack Overlapping Frames | When selected, frames overlap within a single row. When not selected, overlapping frames are distributed across multiple rows. |
Tick Color | The color of ticks. |
Tick Count | The number of ticks to show. |
Tick Thickness | How thick ticks should be. |
State Color | The color of each timeline item state. |
Show Reason Label | When selected, displays reason labels inside the frames. |
Reason Font Size | The size of reson labels. |
Columns | Allows columns to be added or removed from the timeline. |
Field Name | The type of data the selected column contains. The following options are available:
|
Column Name | The name of the DataSource column from which timeline data will be drawn. |
Show in Tooltip | When selected, shows this column’s information in the selected item’s tooltip. |
Runtime Execution
During runtime, the Timeline Control generates a series of horizontal bars based on the provided dataset. When the runtime environment is initiated, the Timeline Control processes the dataset and displays the corresponding timeline items. Users can interact with the timeline items, which dynamically update as the underlying data changes. This allows for real-time visualization and analysis of data within the application, enabling users to monitor and interpret timeline events effectively.
