# Time Series data timeline

Graphical representation of a time series data timeline.

## How it works

{{< staticImage "ux/TimeserieTimeline/Widget/TimeserieTimelineWidget.png" "Time Series Timeline widget" >}}

This widget facilitates the visualization of value changes in a field over time within a time series.

Each timeline will display the group, the field, and the represented value, arranged as follows:

- Group
- Field
- Value

### Grouping

{{< staticImage "ux/TimeserieTimeline/Widget/TimeserieTimelineWidgetGrouped.png" "Time Series Timeline grouped information" >}}

By enabling the grouping of timelines, you can view all represented states on a single timeline (without separation).

When the data is grouped, the representation of the timeline changes, displaying the value on the same timeline, and each bar will contain the following:

- Group
- Field

### Resume

{{< staticImage "ux/TimeserieTimeline/Widget/TimeserieTimelineWidgetResume.png" "Time Series Timeline information resume" >}}

With the summary panel, you can observe the total time each value has been maintained.

### Widget Menu

{{< staticImage "ux/TimeserieTimeline/Widget/TimeserieTimelineWidgetActions.png" "Time Series Timeline Actions" >}}

From here, the following actions can be performed:

{{% ux-widget-menu-actions %}}

## Configuration

{{% ux-widget-configuration %}}

- **Organization + Time Series** provides data of the time series to be queried.
- **Start date field** specifies which date-type column should be used to indicate the beginning of the period (\*).
- **End date field** specifies which date-type column should be used to indicate the end of the period (\*).
- **Identifier field** tells the widget which column to use for data grouping.

(\*) If both dates use the same field, the start of the next state will be used to calculate the period.

{{< staticImage "ux/TimeserieTimeline/Configuration/TimeserieTimelineConfigGeneral.png" "Time Series Timeline General Configuration" >}}

Lastly, columns must be configured to extract data to display on the graph. For each of these and the group/identifier, a graph will be generated.

For each piece of data, the following can be configured:

- **Alias** specifies a representative name for the column data on the graph.
- **Color** provides a way to distinguish data within the graph.
- **Formatter tool** is a tool that treats each piece of data individually, allowing for modifications and/or calculations before displaying it on the graph. For example, you can convert numerical data into discrete data for representation.
- **Remove** will remove the column from the configuration.

### Advanced

In this section, various filters that will be applied to queries will be configured, regardless of what the user may wish to filter subsequently.

{{< staticImage "ux/TimeserieTimeline/Configuration/TimeserieTimelineConfigAdvanced.png" "Time Series Timeline Advanced Configuration" >}}

### Visualization

{{< staticImage "ux/TimeserieTimeline/Configuration/TimeserieTimelineConfigVisualization.png" "Time Series Timeline Visualization" >}}

From here, some visual aspects of the widget can be modified.

- **Background color** allows setting a distinctive color for the widget.
- **Hide details header panel** hides the top information panel of the widget, freeing up that space.

{{% children sort="weight" depth="10" %}}

---