Introduction

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

timeline chart on desktop

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

timing marker

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

States

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

timline chart with legend item selected

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 on desktop

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.

extending timeline with marker

Behavior & corner cases

If multiple markers are displayed on the same position, they are just 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.

The timeframe shown in the chart is expanded to accomodate space for threshold markers, so that they can be displayed without wrapping or cutting off their text label (like seen in the sample image above).

Responsive behavior

The legend is layouted per default in horizontal orientation with wrapping into multiple lines if necessary. On small screens the legend is layouted vertically and the click target of an item enlarges to support touch input.

timeline chart on 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 the detail analysis.

timeline chart in use

Margins are derived by the parent, no additional guidelines or spacings from the chart.