Time series charts

Latest Dynatrace

Time series charts plot time-based data along a continuous time axis (x-axis). In such charts, the time data can be one of two major types, timestamp data or timeframe data.

Timestamp data

Timestamp data includes only one timestamp (start) per data point.

plaintext
{
    start: new Date ("2022-10-01 06:00:00")
    value: 1500,
}

Timeframe data

Timeframe data on the other hand includes two timestamps (start and end) per data point. As such, timeframe data represents a duration.

plaintext
{
    start: new Date ("2022-10-01 06:00:00"),
    end: new Date ("2022-10-01 08:00:00"),
    value: 1500,

}

Gaps in time series data

So-called gaps in the data appear when there is missing data between data points. Gaps can be “shown” in time series charts as such (gaps along a line, for example) or connected (linear interpolation) – this is a configuration option on the chart determined by the app Creator.

In a timestamp-only dataset, no continuity can be determined and therefore, there are always “gaps” between data points regardless of the resolution of the dataset. In a timeframe dataset, however, gaps are considered when the end timestamp of the first datapoint is equal to (overlaps) the start timestamp of the next data point.

plaintext
//example timeframe data without gaps
{
    start: new Date ("2022-10-01 06:00:00"),
    end: new Date ("2022-10-01 08:00:00"),
    value: 1500,
},
{
    start: new Date ("2022-10-01 08:00:00"),
    end: new Date ("2022-10-01 10:00:00"),
    value: 1250,
}

//example timeframe data with gaps
{
    start: new Date ("2022-10-01 10:00:00"),
    end: new Date ("2022-10-01 12:00:00"),
    value: 1150,
},
{
    start: new Date ("2022-10-01 14:00:00"),
    end: new Date ("2022-10-01 16:00:00"),
    value: 950,
}

Time series chart variants

Time series charts come in 3x variants namely, line, area, and bar (stacked bar). See below for details specific to each variant.

Time series line variant

The time series line chart connects each consecutive data point with a straight line (linear interpolation).

Time series area variant

Similarly to the time series line chart described above, the time series area chart connects each consecutive datapoint with a straight line (linear interpolation); however, additionally shades the area beneath this line. Another difference to note is that our time series area chart is a stacked area chart and not a layered area chart.

Time series bar variant

The time series bar chart is a stacked bar chart with grouping not supported (grouping is only supported in the categorical bar chart). The width of the bar in a time series bar chart depends on the underlying data and how it relates to the continuous time axis (x-axis).

In a chart with timeframe data, the width of a bar is equivalent to the duration of the data point (the start timestamp is mapped to the left-hand side of the bar, and the end timestamp to the right-hand side).

In a chart with timestamp data, the bar takes on a minimum width as the data point doesn’t have a duration that can be plotted.

Interactions on time series charts

The chart toolbar and its controls (and additional shortcuts) provide an important mechanism to interact with the data in your chart.

The table below briefly describes the various tools available on the toolbar (note that not all tools will necessarily be available in a given app/dataset).

Name	Shortcut	Action
Move		Reposition the toolbar within the chart area.
Inspect	I	Inspect datapoints with a tooltip.
X-axis zoom	Z	Zoom in along the x-axis.
Pan	P Middle mouse button Click-and-drag in the x-axis	Pan the chart left and right.
Zoom in	ctrl/⌘ + ↑ ctrl/⌘ + scroll up	Zoom into the chart by a predefined amount.
Zoom out	ctrl/⌘ + ↓ ctrl/⌘ + scroll down	Zoom out of the chart by a predefined amount.
Reset	R	Reset the chart’s zoom level to the original view.
Collapse		Collapse the chart’s toolbar.

In order to re-position the chart toolbar to another location within the chart, click and drag the move icon within the toolbar.

Inspect (mode)

The inspect chart mode is the default toolbar mode in most cases. This mode allows you to inspect data points within the chart by hovering over them to see their details and perform additional actions that are specified in the series actions sub-menu.

X-axis zoom (mode)

This mode allows you to zoom in on your data along the x-axis (time series). To perform an X-axis zoom activate the mode by either clicking on the tool in the toolbar or alternatively utilizing the keyboard shortcut described above. Once activated, click and drag in the chart area to form a zoom window. When you release your mouse button, the zoom action will be performed.

The zoom action performed may or may not fetch additional data with a higher resolution from the data source. This behavior will differ between apps and usage scenarios.

Pan (mode)

This mode allows you to pan your chart along the x-axis (time axis). In order to perform a pan action activate the mode by either clicking on the tool in the toolbar or alternatively utilizing the keyboard shortcut defined above. As an alternative to the pan mode, you can click and drag the chart's X-axis to pan the chart in any mode.

Note: in some cases, you will not be able to pan a chart until a zoom action has been performed. In other scenarios panning your chart will fetch additional data in order to perform the pan action.

Zoom in/out

Clicking on either the zoom in or zoom out tools in the toolbar will immediately perform the corresponding zoom action in the chart. The chart is zoomed in / out with a predetermined increment around the center of the chart.

As noted above, the zoom action performed may or may not fetch additional data with a higher resolution from the data source. This behavior will differ between apps and usage scenarios.

Reset

By clicking on the reset tool within the toolbar, the chart’s zoom level is reset to its original / default zoom level.

Collapse

By clicking on the “collapse” button within the chart’s toolbar, the toolbar is collapsed to its minifed state. Clicking on the “collapse” button again will reveal the “full” toolbar again.

Dual units / dual Y-axes

Time series charts can optionally display dual units and, in turn, dual axes. The example above shows such a chart.