Timeline chart

The timeline chart enables a quick duration analysis of a user action.

work in progress

The timeline chart is used to analyze user actions and can indicate a violation of defined thresholds and provide additional timing information by showing markers.

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

´ 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, which are used to show key performance metrics. 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.

Marker 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 {}

Showing thresholds

Note: Threshold markers are not yet implemented in Angular.

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.

Responsive behavior

Note: Overlaying markers are not yet implemented in Angular.

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

Timeline chart in use

A timeline chart 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