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.
The overall duration is shown as a horizontal bar. The markers indicate timing events during this duration.
The chart can have three different types of markers (usage restriction in parenthesis):
- timing marker
- key timing marker
- threshold marker
The chart has a legend which is listing the default timing markers.
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.
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.
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.
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).
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 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.
Margins are derived by the parent, no additional guidelines or spacings from the chart.