Timeline chart

Introduction

The timeline chart enables a quick duration analysis of a user action. It can indicate a violation of defined thresholds and provide additional timing information by showing markers.

timeline chart threshold

The overall duration is shown as a horizontal bar. The markers indicate timing events during this duration.

Markers

The chart can have three different types of markers (usage restriction in parenthesis):

  • timing marker
  • key timing marker
  • threshold marker

timeline chart marker

The chart has a legend which is listing the default timing markers.

States and behavior

Hovering (or touching on mobile) a timing marker triggers an overlay with a description of the timing. Placement and styling of the overlay should follow the overlay guidelines. Besides that there's no interaction possible.

timeline chart hover legend

Showing thresholds

It is possible to show a threshold marker in the timeline chart. For each threshold marker a color needs to be defined. If the duration exceeds the threshold the bar's color changes to the threshold-color.

timeline chart threshold

If the overall duration is exceeding 70% of a configured threshold (i.e. it's close to hit the threshold), the timeframe of the chart expands to show the threshold marker in order to see how close the duration is in respect to the threshold.

timeline chart threshold marker

The timeframe shown in the chart is expanded to accommodate space for threshold markers, so that they can be displayed without wrapping or cutting off their text label.

Showing key timing

There is a special type of timing markers to show the key timing (key performance metric) of a user action. This timing marker needs to stand out and is therefore located on top of the chart (in contrast to the other timing markers).

Responsive behavior

Markers

If multiple markers are displayed on the same position, they are overlaying each other (last marker to be added is on top). Hovering a timing marker in the legend moves the corresponding marker in the chart temporarily to the top in order to see where the marker is hidden otherwise. Markers overlap as soon as they get closer together than the radius of one marker.

timeline chart marker overlap

Legend

The legend of the timeline chart is displayed underneath the chart horizontally in multiple lines if necessary. On smaller screens this legend is shown vertically and the click target of an item enlarges to support touch input.

timeline chart mobile

Timeline chart in use

It is used as a preview for a detailed timing analysis of a user action. Most of the time it is accompanied with a link (button) to drill-down to a detailed analysis.

timeline chart in use

The timeline chart takes a value, a unit and a number of timing and key-timing markers and displays them on a horizontal bar.

´ Loading interactive demo...
<dt-timeline-chart value="0.37" unit="s"> <dt-timeline-chart-timing-marker value="0.02" identifier="R"> Request start 0.02s </dt-timeline-chart-timing-marker> <dt-timeline-chart-timing-marker value="0.04" identifier="S"> Speed index 0.04s </dt-timeline-chart-timing-marker> <dt-timeline-chart-timing-marker value="0.17" identifier="I"> DOM interactive 0.17s </dt-timeline-chart-timing-marker> <dt-timeline-chart-timing-marker value="0.37" identifier="L"> Load event start 0.37s </dt-timeline-chart-timing-marker> <dt-timeline-chart-key-timing-marker value="0.03" identifier="V"> Visually complete </dt-timeline-chart-key-timing-marker> </dt-timeline-chart> export class TimelineChartDefaultExample {} <dt-timeline-chart value="0.37" unit="s"> <dt-timeline-chart-timing-marker value="0.02" identifier="R"> Request start 0.02s </dt-timeline-chart-timing-marker> <dt-timeline-chart-timing-marker value="0.04" identifier="S"> Speed index 0.04s </dt-timeline-chart-timing-marker> <dt-timeline-chart-timing-marker value="0.17" identifier="I"> DOM interactive 0.17s </dt-timeline-chart-timing-marker> <dt-timeline-chart-timing-marker value="0.37" identifier="L"> Load event start 0.37s </dt-timeline-chart-timing-marker> <dt-timeline-chart-key-timing-marker value="0.03" identifier="V"> Visually complete </dt-timeline-chart-key-timing-marker> </dt-timeline-chart> export class TimelineChartDefaultExample {}

Imports

You have to import the DtTimelineChartModule when you want to use the <dt-timeline-chart>:

@NgModule({
  imports: [DtTimelineChartModule],
})
class MyModule {}

Inputs

Name Type Default Description
unit string - The unit of the provided values. Needs to be a time-unit like "s".
value number 0 The value (length) of the timeline chart. In most cases it is the same value as the last timing marker.

Markers

The chart takes "timing" (DtTimelineChartTimingMarker) markers and "key-timing" (DtTimelineChartKeyTimingMarker) markers. Each marker needs an identifier which should be a single unique character and a value. The value is used to position the marker on the horizontal timeline bar. For each timing marker the chart will also create an item in the legend below the chart.

Inputs

Name Type Default Description
identifier string - The single character identifier character."
value number 0 The actual value of the marker.

Overlay

For timing markers you can also add additional information that will be displayed in an overlay when hovering the legend item.

´ Loading interactive demo...
<dt-timeline-chart value="0.37" unit="s"> <dt-timeline-chart-timing-marker value="0.02" identifier="R"> Request start 0.02s <dt-timeline-chart-overlay-title> Request start - 0.02s </dt-timeline-chart-overlay-title> <dt-timeline-chart-overlay-text> The time before the user agent starts requesting the current document from the server, or from relevant application caches or from local resources. </dt-timeline-chart-overlay-text> </dt-timeline-chart-timing-marker> <dt-timeline-chart-timing-marker value="0.04" identifier="S"> Speed index 0.04s </dt-timeline-chart-timing-marker> <dt-timeline-chart-timing-marker value="0.17" identifier="I"> DOM interactive 0.17s </dt-timeline-chart-timing-marker> <dt-timeline-chart-timing-marker value="0.37" identifier="L"> Load event start 0.37s </dt-timeline-chart-timing-marker> <dt-timeline-chart-key-timing-marker value="0.03" identifier="V"> Visually complete </dt-timeline-chart-key-timing-marker> </dt-timeline-chart> export class TimelineChartOverlayExample {} <dt-timeline-chart value="0.37" unit="s"> <dt-timeline-chart-timing-marker value="0.02" identifier="R"> Request start 0.02s <dt-timeline-chart-overlay-title> Request start - 0.02s </dt-timeline-chart-overlay-title> <dt-timeline-chart-overlay-text> The time before the user agent starts requesting the current document from the server, or from relevant application caches or from local resources. </dt-timeline-chart-overlay-text> </dt-timeline-chart-timing-marker> <dt-timeline-chart-timing-marker value="0.04" identifier="S"> Speed index 0.04s </dt-timeline-chart-timing-marker> <dt-timeline-chart-timing-marker value="0.17" identifier="I"> DOM interactive 0.17s </dt-timeline-chart-timing-marker> <dt-timeline-chart-timing-marker value="0.37" identifier="L"> Load event start 0.37s </dt-timeline-chart-timing-marker> <dt-timeline-chart-key-timing-marker value="0.03" identifier="V"> Visually complete </dt-timeline-chart-key-timing-marker> </dt-timeline-chart> export class TimelineChartOverlayExample {}