Timeline

dvtm:timeline

The Timeline component displays events in chronological order and allows for easy navigation in a defined time range. It can show one or two timelines side by side (dual timeline). The purpose of the timeline is to show events or items as they occur throughout time. For example, you could use a timeline to look at the life cycle of an employee - hire date, promotions, bonuses, leaves of absences, etc.

This component is used on tablets and phones.

Appearance

Appearance characteristics for this component.

Layout: The timeline component supports horizontal (i.e. takes more space, shows more details) and vertical (takes less space, shows fewer details) layout, which is not available in MAF 2.0.
Dual Timelne: The timeline component can be configured to display two series of events side by side for easier comparison of related information (dual timeline).
Elements: The timeline component consists of Timeline Panel (contains timeline items and timeline axis) and Timeline Overview Panel (contains overview window and the overview axis), which is not available in MAF 2.0.

Timeline Panel

Timeline Items:

Appear within the timeline panel. They represent and event in time.
Are ordered according to their event date. Each timeline item has a feeler which connects it with the timeline time axis.

Feeler:

Is a vertical line which connects the timeline item with the time axis.

Related Items: Not available in MAF 2.0

Timeline items can be grouped into "related items". When this has been done, instead of a single bubble, the timeline item looks like a stacked group of bubbles.
If desired, teams can show a 'counter' to communicate how many related items are in the stack.

Zoom Control: Not available in MAF 2.0

The zoom control is a horizontal slider that allows the user to zoom the timeline in and out.
There is a plus icon at the right of the slider and a minus icon at the left of the slider which when pressed zoom in/out 1 level. There is a thumb that the user can drag right or left to zoom multiple levels.
The smallest time scale increment appears at the left of the slider; the largest time scale increment appears at the right of the slider.

Time Axis:

Runs along the bottom of the timeline panel. It shows the user the current time increment for the timeline.
Each supported zoom level shows a different time increment on the time axis.

Timeline Overview Panel

The timeline overview appears directly below the timeline time axis.
The timeline overview contains the overview window, markers, current date line, and the overview time axis.
The overview panel has it's own time axis.
Overview Window:

The overview window is a section of the overview panel which corresponds with the period of viewable time in the timeline panel.

Overview Time Axis:

The overview time axis communicates to the user the total time increment covered by the time line.
The overview time axis sets the start point and end point of the timeline.
The timeline and overview panel share the same start points and end points.
The time increment stays the same, regardless of zoom level or overview window location.

Markers:

Markers are rectangles within the overview panel. Each marker represents a timeline item.
Markers appearing within the overview window are the timeline items currently in view.

Current Date Line:

The current date line is a vertical line that appears at the current date on the overview time axis.

Behavior

Common behaviors for this component.

Timeline Panel

The timeline panel reflects the zoom level.
Users can pan the timeline panel right, left, up and down. (Up/down panning is only supported if the number of timeline items exceeds vertical space of timeline).
Timeline Item:

Timeline items support selection and multi-selection.
If the number of timeline items for a given time exceeds the vertical space of the timeline panel, vertical panning is possible.

Feeler:

The feeler highlights when the user taps the timeline item.

Related Items: Not available in MAF 2.0

To expand the stack, users can tap on the timeline item or the counter.
When the number of related items exceeds the vertical space of the timeline, arrows will appear at the top and bottom of the expanded region to indicate that.

Zoom Control: Not available in MAF 2.0

The zoom control allows the user to zoom the timeline in and out.
There is a plus icon at the right of the slider and a minus icon at the left of the slider which when pressed zoom in/out 1 level.
There is a thumb that the user can drag right or left to zoom multiple levels.
The zoom control supports tooltips.
Tooltip content should match zoom levels supported. For example, if the timeline supports on 3 zoom levels, then as the user dragged the thumb from right to left, the tooltip might be: "Years", then "Months", then "Weeks".
The zoom control is not a mandatory element. It only renders if there is more than 1 zoom level supported by the timeline.
Zoom levels are dependent on the configuration of the Timeline's time axis. The minimum number of zoom levels is 2. There is no maximum number of zoom levels.
Each zoom level represents a time increment. The largest zoom level is always the same time increment as the overview's time axis. For example, if the overview window's time axis time increment is Years, then the timeline's axis increment might be (from large to small): Years, Quarters, Months, Weeks, Days.

Time Axis:

The time axis supports tooltips to help users understand the abbreviations and place in time.

Timeline Overview Panel

Users can tap anywhere in the overview panel (outside of overview window) to navigate the timeline to the point tapped.
Overview Time Axis:

The overview time axis sets the start point and end point of the timeline.
The timeline and overview panel share the same start points and end points.
Teams set the start point, end point, and time increment for the overview time axis.
The time increment stays the same, regardless of zoom level or overview window location.

Markers:

Tapping a marker navigates the timeline such that the tapped marker appears in the center of the overview window.
Tapping a marker, selects the marker and the associated timeline item.

Current Date Line:

The current date line appears at the current date on the overview time axis.

Usage

Usage guidelines for this component.

It is not recommended to show more than one timeline component per page. Try to use the timeline in "comparison" mode instead.
The timeline component supports horizontal (i.e. more space, more details) and vertical (i.e. less space, less details) layouts.
The timeline component supports horizontal (i.e. takes more space, shows more details) and vertical (i.e. takes less space, shows less details) layouts.
The timeline component has no limit on the number of items that may appear within the timeline panel.
The timeline scale is capable of showing any increment, such as Hours, Days, Weeks, Years. It is recommended to use "Hours" as a time scale increment, if other increments are also very small (e.g. minutes, seconds, etc.). Using "Hours" when your largest increment is "Years" is not usable.
Use meaningful labels for timeline axis. Try to avoid labels such as H1, H2, or other abbreviations.
You may want to build filters on top of the timeline component in order to show/hide different types of timeline items. For example, in the case of the employee life cycle timeline, you might have filters such as Personal, Employment, Compensation, Stock, Training.

Sample

DVTM sample code for this component.

 <dvtm:timeline
    id="tl"
    itemSelection="#{pageFlowScope.itemSelection}"
    startTime="#{pageFlowScope.startTime}"
    endTime="#{pageFlowScope.endTime}">

    <?audit suppress oracle.ide.xml.validation-error?>

    <dvtm:timelineSeries
    id="ts1"
    label="#{pageFlowScope.s1Label}"
    value="#{bindings.series1Data.collectionModel}"
    var="row"
    selectionListener="#{PropertyBean.timelineSeries1SelectionHandler}">

    <dvtm:timelineItem
    id="ti1"
    startTime="#{row.startDate}"
    endTime="#{row.endDate}"
    title="#{row.title}"
    description="#{row.description}" />

    </dvtm:timelineSeries>

    <dvtm:timelineSeries
    id="ts2"
    label="#{pageFlowScope.s2Label}"
    value="#{bindings.series2Data.collectionModel}"
    var="row"
    selectionListener="#{PropertyBean.timelineSeries2SelectionHandler}">

    <dvtm:timelineItem
    id="ti2"
    startTime="#{row.startDate}"
    endTime="#{row.endDate}"
    title="#{row.title}"
    description="#{row.description}" />

    </dvtm:timelineSeries>

    <dvtm:timeAxis scale="#{pageFlowScope.scale}"/>

    </dvtm:timeline>

Used On: Phone, Tablet
Also Called: None
Related Components: Gauge, N-Box
Resources: ADF RCUX Spec: Timeline, ADF RCUX Spec: Usage Notes

Fig 1. iOS and Android - Timeline

Timeline

dvtm:timeline

Appearance

Timeline Panel

Timeline Overview Panel

Behavior

Timeline Panel

Timeline Overview Panel

Usage

Sample

Related