Timeline widgets
- Borja Moro Moreno
About timeline widgets
A timeline is a visual representation of data on a chronological sequence, providing a clear and organized overview of events. This is useful for a variety of purposes, such as monitoring how resources are used over time or visualizing the relationship between events and their timespans.
Timelines consist of a horizontal axis that corresponds to time progression, with data items represented along the axis based on their time settings. Specific moments in time are depicted as points, while durations are shown as bars.
What data do I need for this widget?
To create a timeline widget, your query must include at least one timestamp field to pinpoint events chronologically. However, if you want to depict events that extend for a specific duration, you'll need an additional timestamp field to determine the end of the events, as well as how they will be represented on the timeline (as points or durations).
To label events on the timeline, you need an additional field of any type, otherwise, your only option to label them will be the timestamp itself.
Creating a hierarchy of events on the timeline requires as many fields as levels you want to establish in the hierarchy.
Optimizing your query
To prevent memory exhaustion and excessive loading times, your query must group events using only the grouping keys you intend to analyze and a time setting that is proportional to the time range examined.
Widget settings
To edit the widget settings, you must first activate the Edit mode.
Click the widget title bar to open its settings. Alternatively, the settings are accessible via the Ellipsis icon → Properties. The widget settings are contained in three tabs, Data, Visual, and Raw.
The settings in the Data and Raw tabs are described in the Create a widget article. These are the Visual settings for the timeline widget:
Category | Setting | Description |
|---|---|---|
Fields
| From | Select a timestamp field that indicates the start date of the events to pinpoint them on the timeline. Selecting only the start date will consider all events as points and there will be no durations. |
To | Select a timestamp field that indicates the end date of the events on the timeline, representing all events as durations, even if both timestamps coincide. The only exception is the existence of null values, which will transform events back into non-lasting events. | |
Groups | Select fields to hierarchically arrange events on the vertical axis of the timeline. Drag the fields to change the order of the hierarchy. A panel appears on the left side displaying the various combinations of values resulting from the indicated fields. This panel is interactive and can be handled as shown in the tips section below. In the following example, you can observe triggered alerts distributed within their respective contexts and then subsequently distributed into the users who create them within each context.  | |
Event name | Select a field to name the events on the timeline. | |
Item customization | Type | Select a field to define how timeline events are visually represented. The accepted values are “box” and “point” for non-lasting events and “background” and “range” for duration events. If the values of the selected field don’t match the accepted values for the event type present on the timeline, the default value will be used, “box” for non-lasting events and “range” for duration events. You can specify in the query the desired coloring conditions to generate fields to assign to this property, which will shape events accordingly upon selection. For example, you can set a shape for a specific value and another for the rest of the values: |
Color | Select a field to define the color of the event backgrounds on the timeline. The value must be a valid CSS color. You can specify in the query the desired coloring conditions to generate fields to assign to this property, which will color events accordingly upon selection. For example, you can set a color for a specific value and another color for the rest of the values: | |
Background color | Select a field to define the color of the event backgrounds on the timeline. The value must be a valid CSS color. You can specify in the query the desired coloring conditions to generate fields to assign to this property, which will color events accordingly upon selection. For example, you can set a color for a specific value and another color for the rest of the values: | |
Performance | Zoom in limit | Select how much you can zoom in on the timeline. The default option is a minute. |
Zoom out limit | Select how much you can zoom out on the timeline. The default option is 30 days. |
Tips for using a timeline widget
Here are a few tips to work with the timeline widget:
The vertical green line represents the current moment and serves as a reference point when navigating the timeline.
Click and drag to pan the timeline, both vertically to see the different events on a single moment and and horizontally to move backward and forward in time.
Scroll up or down to zoom in or out on the timeline and view the desired time range.
Hover over an event to reveal a tooltip with its label and timestamp or click it to highlight it (not available when using the background type in the item customization setting).
When you use the grouping setting:
Scrolling inside the left panel will go up and down instead of zooming in and out.
When there are two or more levels, you can expand and collapse nodes by clicking on their names.
When there two or more levels and their nodes are expanded, the timeline becomes responsive, and the nodes automatically resize to fit the number of events in the visible part of the timeline.
Query examples
This is the source query used and the fields mapped to generate the widget shown above, with the background color customized to represent each value in different color:
from siem.logtrust.web.activity
group every 1h by method
select "point" as typePoint
select ifthenelse(method="GET", "#D6E80F", ifthenelse(method="POST", "#05C3DE", ifthenelse(method="DELETE", "#A6BBC8", "#004C97") ) ) as colorFrom | eventdate |
|---|---|
Event name | method |
Background color | color |
With the following source query and fields mapped, you can generate another example with duration events and the type customized to represent the most widespread value with one type and the rest of the values with the other type:
from siem.logtrust.web.activity
group every 1h by method, responseTime
select first(eventdate) as fromDate
select last(eventdate) as toDate
select ifthenelse(method="GET", "background", "range") as type
limit 500From | fromDate |
|---|---|
To | toDate |
Event name | method |
Type | type |
With the following source query and fields mapped you can generate another example with a hierarchy of events (distributed within their respective status and then subsequently distributed into the priority they present within each context) and color customized (red when there are more than 200 alerts):
from siem.logtrust.alert.info
group every 1h by status, priority
select count() as count
select ifthenelse(status=0, "Unread", ifthenelse(status=1, "Updated", ifthenelse(status=100, "Watched", "Closed") ) ) as statusSTRING
select ifthenelse(priority=3, "Low", ifthenelse(priority=5, "Normal", ifthenelse(priority=7, "High", "Very High") ) ) as prioritySTRING
select ifthenelse(count > 200, "red", "#D6E80F") as color
limit 100From | eventdate |
|---|---|
Groups | statusSTRING, prioritySTRING |
Event name | count |
Background color | color |