Timeline¶
A timeline shows how the state of an object changes over a period of time as horizontal bands: each row represents one object, and each color segment within a row represents the interval during which that object was in a given state. It suits reviewing equipment operating status, analyzing production line downtime periods, and comparing shift states.
This topic describes the configuration items specific to the timeline. For the items common to all charts, such as the Basic tab and the Filter tab, see Common Configurations for Charts.
Data of Timeline¶
The timeline takes a Time field and a State field as a pair of inputs and splits rows with a Contrast field. For general information about data sources and data fields, see Common Configurations for Charts > Configuring Data.
Dimension¶
Dimension plays the role of the time field in a timeline, and the data field is labeled Time. Exactly 1 field is required. After the data is sorted by that field, the time of each record is the start of a state interval and the time of the next record is its end; the last segment extends to the window end time.
Measurement¶
Measurement plays the role of the state field in a timeline, and the data field is labeled State. Exactly 1 field is required. Adjacent records with the same state value are merged into one continuous color segment, whose color comes from the matching item in State Enum.
Note
Aggregation must stay No. With Yes selected, the system applies Sum aggregation to the State field automatically, and since state values are strings, the sum is 0, no state matches a state identifier in State Enum, and the chart draws no color segments at all.
Contrast¶
Contrast is optional and accepts up to 1 field. Once added, the data is grouped by the values of that field, each value occupies one row of the timeline, and the rows are ordered by the first appearance of the value in the data. Without a contrast field, all data is merged into one row.
Note
As long as a contrast value appears anywhere in the data, an empty row is kept as a placeholder even when that value has no valid time records, which keeps the rows aligned for reading.
Extension¶
Extension is optional, the data field is labeled Extension Fields, and there is no limit on the number. Extension fields do not take part in drawing the color segments; they are additional information per segment and can appear in the tooltip, the table view, and exported files. Once added, select the fields to show in Extra Display Fields.
Style of Timeline¶
The Style tab is grouped into Basic, Chart Style, and Other. For common styles such as the title, widget padding, and background, see Common Configurations for Charts > Configuring Style.
Data Processing¶
Data Processing limits the statistical time window and selects the extension fields to show. The window also determines the display range of the time axis and the end of the last color segment.
Window Start Time / Window End Time: Set the start and end of the statistical time window. You can enter a time directly, use
@{parameter_name}to reference a data source query parameter, or use${parameter_name}to reference a page parameter. When left empty or unresolvable, the system infers the window from the earliest and latest times in the data.Parameter Name / Offset Seconds: Shift the time window dynamically before a query is issued. Parameter Name specifies the query parameter to offset and Offset Seconds sets the amount, from 0 to 86400 seconds with a default of 0. Both must be configured to take effect; the offset is applied before the request is sent and does not change the returned data.
Extra Display Fields¶
Extra Display Fields is specific to the timeline and takes a multiple selection from the Extension data fields you added. The selected fields appear as additional rows in the tooltip, and as columns in the table view and in exported files. The options of the dropdown list update as extension fields are added or removed; once an extension field is removed, a selected field that no longer exists is dropped from the selection automatically.
General¶
State Enum¶
State Enum defines the states included in the display and their colors, and is what the widget uses to recognize state values. Select + Add to add an enum item. Each item contains:
State Key: Corresponds to the raw value of the state field in the data. Several raw values can be separated by commas to merge them into one state, for example
200-001,200-002.State Label: The name of that state shown in the chart, the legend, and the tooltip.
Color: The color of that state.
Order: The index of the enum item. In a timeline it determines the order of the states in the legend and the proportion chart; in a Pareto chart it has no effect, where bars are always ordered by duration in descending order.
Note
State values not defined in the state enum are not shown in the chart.
The widget comes with 7 sample enum items whose state labels are English defaults; change them to the state values of your business.
Display Mode¶
Display Mode determines the form of the widget. Timeline by default:
Timeline: Shows the state intervals of each row as horizontal bands, with zooming and panning.
Table: Lists the state, duration, start and end times, and extra display fields segment by segment in a table, with column sorting and pagination.
The Timeline Style and Table Style sections that follow are always shown together and are not hidden by Display Mode. After you switch modes, only the items of the corresponding section take effect on the chart.
Export¶
Once Export is selected, an export button appears on the widget and end users can export the data as an Excel file. Cleared by default. For a description of the exported content, see Interactions at Runtime.
Timeline Style¶
Timeline Style controls the appearance of the rows, color segments, and proportion chart of the timeline view. The following items take effect only when Display Mode is Timeline:
Y-Axis Label Font: Sets the font, size, and color of the row labels on the left, which are the contrast field values.
Time Axis Font: Sets the font, size, and color of the time axis tick text at the top.
Row Height: Sets the height of each row, from 28 to 80 px with a default of 40 px. Row height is not compressed to fit the widget height; with many rows the area scrolls vertically.
Bar Height: Sets the height of the color segments within a row, from 12 to 40 px with a default of 24 px. It should be smaller than Row Height, and the difference is the gap between adjacent rows.
Show Stacked Bar: Selected by default, adding a column of stacked bars to the right of the timeline that summarizes the share of each state in that row. When cleared, only the timeline remains.
Show Time Axis: Selected by default, showing the time ticks at the top. When cleared, the time axis is hidden.
Stacked Bar Width Ratio: Sets the share of the widget width taken by the proportion chart as a percentage, from 10 to 50% with a default of 30%.
Stacked Bar Left Gap: Sets the distance between the proportion chart and the timeline, from 0 to 40 px with a default of 20.
Y-Axis Label Min Width: Sets a minimum width for the row label area on the left, from 0 to 500 px with a default of 0, which fits the content. Setting the same value on several timeline widgets stacked vertically aligns the left end of their time axes.
Placeholder Color: Sets the color of the placeholder segments for intervals with no data. Determined by the theme by default.
Table Style¶
Table Style controls the appearance of the table view. The following items take effect only when Display Mode is Table:
Header Font: Sets the font, size, and color of the header text.
Body Font: Sets the font, size, and color of the table content text.
Page Size: Sets the number of rows shown per page, from 5 to 100 with a default of 20.
Legend¶
The legend lists the color and name of each state along with its summary value. Use the eye button 
to hide it.
Label Font: Sets the font, size, and color of the state names.
Value Font: Sets the font and size of the state summary values. This item provides no color setting.
Alignment: Sets how legend items are arranged. Options are Left, Row Center, and Adaptive Center, with Left as the default.
Icon Size: Sets the size of the legend color blocks, from 8 to 32 px with a default of 14 px.
Gap: Sets the distance between adjacent legend items, from 4 to 48 px with a default of 16 px.
Checkbox follows state color: When selected, the check box in front of a legend item uses the color of that state rather than the default theme color. Cleared by default.
Single-line scroll: When selected, the legend is forced onto one line and scrolls horizontally when it exceeds the width; when cleared, the legend wraps automatically. Cleared by default.
Interactions at Runtime¶
The timeline behaves as follows at runtime:
Legend filtering: Requires the legend to be visible. Selecting the check box in front of a legend item hides or shows the corresponding state. A hidden state is excluded from the chart, the table, and the proportion summary, but does not affect the exported content.
Switching the summary method: Requires the legend to be visible. The legend area provides Percentage and Duration buttons, which switch how the state summary values and the labels on the proportion chart are presented. This choice is not saved to the widget configuration.
Zooming and panning: In the timeline view on the end-user page, hold Ctrl and scroll the mouse wheel to zoom the time range, and drag to pan; hold Ctrl and drag a box to zoom into the selected interval; double-click to return to the initial window.
Tooltip: Hovering the mouse over a color segment shows the state name, duration, time range, and the extra display fields you selected. Hovering over the proportion chart shows the summary breakdown of the states in that row.
Table sorting and pagination: In the table view you can sort by the contrast, state, duration, start time, end time, and other columns, and pages follow Page Size.
Export: Once Export is enabled, selecting the export button exports the data as an Excel file with one worksheet per row, with columns for device, state, state identifier, duration, extra display fields, and start and end times. The exported content is the full data set and is unaffected by legend filtering; if a state key is configured with several raw values, the export restores the detail rows of each raw value. A confirmation appears first when the data exceeds 100,000 rows.
Empty state: When no time field or state field is configured, or the query returns no data, an empty-data message is shown.