---
title: "Timeline widget"
slug: "timeline-widget"
updated: 2026-03-20T16:01:58Z
published: 2026-03-20T16:01:58Z
canonical: "docs.calculus.group/timeline-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.calculus.group/llms.txt
> Use this file to discover all available pages before exploring further.

# Timeline widget

A timeline widget shows events in chronological order and with color coding. It is a meaningful way to visualize situation changes over a period of time.

![Graph showing digital input status over time with highlighted on and off periods.](https://cdn.document360.io/94d0a983-5058-4b02-8d06-1228a999a7a1/Images/Documentation/time_line.png?sv=2026-02-06&spr=https&st=2026-11-11T13%3A58%3A38Z&se=2026-11-11T14%3A58%3A38Z&sr=c&sp=r&sig=Rjsdubtjz1n00rjVb6sbyIsO4wwVoiLoeksWrt8XEkg%3D)

## Widget control elements

- **Context menu** Lets you select a date range, or download the data in various formats.
- **Hovering over a segment** Shows a coaster detailing the measurement or event for that period.
- **Clicking on a legend** Hides the segments having that particular value. Clicking the legend again unhides them.

## Widget configuration panel

In the widget selection panel, click on **Timeline**. A new panel will appear where you can configure the widget.

### Timeline data

![Dashboard interface displaying sensor options for engine monitoring and timeline settings.](https://cdn.document360.io/94d0a983-5058-4b02-8d06-1228a999a7a1/Images/Documentation/2025-08-13 16-31-32.png?sv=2026-02-06&spr=https&st=2026-11-11T13%3A58%3A38Z&se=2026-11-11T14%3A58%3A38Z&sr=c&sp=r&sig=Rjsdubtjz1n00rjVb6sbyIsO4wwVoiLoeksWrt8XEkg%3D)

#### Select sensors

The first step is to add at least one measurement to the chart. Press the **Add Sensors** button, a panel will appear where you can select the sensors you want to include in the chart. Click **Save**.

![Dashboard interface displaying timeline settings and options for adding sensors and widgets.](https://cdn.document360.io/94d0a983-5058-4b02-8d06-1228a999a7a1/Images/Documentation/2025-08-13 16-31-41.png?sv=2026-02-06&spr=https&st=2026-11-11T13%3A58%3A38Z&se=2026-11-11T14%3A58%3A38Z&sr=c&sp=r&sig=Rjsdubtjz1n00rjVb6sbyIsO4wwVoiLoeksWrt8XEkg%3D)

Fill in the fields below:

- **Show events** If enabled, shows the corresponding message defined in event definitions.
- **Show string data** Enable this if the measurement data is a string.

Click **Next** to go to Timeline settings.

### Timeline settings

![Dashboard settings interface displaying timeline data and widget configuration options.](https://cdn.document360.io/94d0a983-5058-4b02-8d06-1228a999a7a1/Images/Documentation/2025-08-13 16-31-50.png?sv=2026-02-06&spr=https&st=2026-11-11T13%3A58%3A38Z&se=2026-11-11T14%3A58%3A38Z&sr=c&sp=r&sig=Rjsdubtjz1n00rjVb6sbyIsO4wwVoiLoeksWrt8XEkg%3D)

Fill in the fields below:

- **Title** A title or description for the widget.
- **Widget width** The width in relation to the screen width.
- **Height** The height of the widget in pixels.
- **Order** The position on the dashboard.
- **Refresh in seconds** Leave this at the default.
- **Show legend** If enabled, displays the sensor labels at the bottom of the chart.

### Settings

![Dashboard settings for timeline data and color configurations in asset tracking.](https://cdn.document360.io/94d0a983-5058-4b02-8d06-1228a999a7a1/Images/Documentation/widget_timeline_3.png?sv=2026-02-06&spr=https&st=2026-11-11T13%3A58%3A38Z&se=2026-11-11T14%3A58%3A38Z&sr=c&sp=r&sig=Rjsdubtjz1n00rjVb6sbyIsO4wwVoiLoeksWrt8XEkg%3D)

Fill in the fields below:

- **Color scheme** Choose the color palette for the sensors shown in the graph.

Click **Save** to add the widget to the dashboard.