Oracle Fusion Middleware Data Visualization Tools Tag Reference for Oracle ADF Faces
11g Release 1 (



dvt:timeline timeline timeline

UIComponent class:
Component type: oracle.dss.adf.timeline.Timeline

The Timeline component is used to display a series of events in chronlogical order. It supports zoom operation, expanding and collapsing a group of related events, and rendering of simple ADF components within each event. The Timeline component is capable of displaying two series of events side-by-side each other to allow comparison of events between two timelines.

Relationship with other tags

The Timeline component can have the following children: <dvt:timelineSeries>, <dvt:timelineOverview>, <dvt:timeAxis>.


The TimelineSeries component is used to specify the data layer in a timeline. Developers must specify at least one (at most two) TimelineSeries with the Timeline component. See the documentation for <dvt:timelineSeries> for details.


Developers can optionally add a TimelineOverview component to the Timeline. A TimelineOverview component provides a macro view of all the events from all TimelineSeries in the Timeline. Users can scroll through the timeline using the TimelineOverview. See the documentation for <dvt:timelineOverview> for details.


A time axis must be specified on the Timeline component. An application can specify the time axis by adding the <dvt:timeAxis> tag to timeline. See the documentation for <dvt:timeAxis> for details.

Sort Data

By default, the timeline automatically sorts the data to ensure the data is in chronological order. However, in some situations it will be desirable for the applications to sort the data themselves. Application can switch off automatic data sorting using the "sortData" attribute on the Timeline.


The selection feature lets the user select one or more events in the timeline. The user can then perform operations on the selected events. Use the "itemSelection" attribute on the Timeline to enable the selection feature.

Fetch Window

The Timeline component is virtualized. This means that not all data available for the component on the server are fetched and displayed on the client. Only events that falls within a specified date range are fetched. The initial date range is controlled by the "rangeStartTime" and "rangeEndTime" attributes. The date range gets updated as the user scrolls horizontally, and more events are fetched from the server as it happens. If no date range is specified, the Timeline uses the size of the viewport to determine the range.

Emailable And Printable Modes

Note that when the Timeline is displayed in emailable or printable mode, only the events currently present on the client will be included as part of the emailable or printable content. In emailable mode, a table with all the events is displayed. In printable mode, zoom is disabled and timelineOverview is not rendered.

Attachment Mode

In attachment mode, all events are fetched from the server. User is able to scroll through the timeline, select events if selection feature is enabled, and expand/collapse group events. The zoom operation is disabled.

Vertical Timeline

The Timeline supports displaying items in a vertical layout. There are several behavioral differences and limitations in vertical timeline:

Geometry Management

Accessibility Guideline(s)

summary attribute:The summary property must be specified. The summary should describe the purpose of the component.

Supported Client Events for Client Behaviors

  • blur
  • click (default)
  • contextMenu
  • dblClick
  • focus
  • keyDown
  • keyPress
  • keyUp
  • mouseDown
  • mouseMove
  • mouseOut
  • mouseOver
  • mouseUp
  • propertyChange


The following example shows a simple example of using the timeline tag.
<dvt:timeline id="timeline1" startTime="hier_vert_top" endTime="hier_vert_top" inlineStyle="width:1000px;height:600px;"> <dvt:timelineSeries id="timelineSeries1"/> var="evt"/> value="#{backing.primaryModel}"> <dvt:timelineItem id="timelineItem1" value="#{}"> <af:panelGroupLayout id="panelGroup1" layout="vertical"> <af:outputText id="outputText1" value="#{evt.description}"/> <af:outputText id="outputText2" value="#{}"/> </af:panelGroupLayout> </dvt:timelineItem> </dvt:timelineSeries> </dvt:timeline>


Type Phases Description Apply Request Values The time range change event is delivered when a zoom operation is performed or when the sliding window in the timeline overview is resized.
org.apache.myfaces.trinidad.event.AttributeChangeEvent Invoke Application,
Apply Request Values
Event delivered to describe an attribute change. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing.


Name Type Supports EL? Description
animationOnDataChange String Yes Valid Values: default, none

the animation effect when a data change event occurs. Valid values are: "default", "none". The default value is "default".
animationOnDisplay String Yes Valid Values: default, none

the animation effect during initial display of the timeline. Valid values are: "default", "none". The default value is "default".
attributeChangeListener javax.el.MethodExpression Only EL a method reference to an attribute change listener. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing.
binding String Only EL an EL reference that will store the component instance on a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean.
currentTime java.util.Date Yes the current time which will be marked with an indicator on the timeline.
customTimeScales java.util.Map Yes the custom time scales for this timeline. The type is Map<String, CustomTimeScale>. The String being used for the map key is the custom time scale name. The value is the implementation of the CustomTimeScale interface. Timeline will use this map to render custom time scales.
endTime java.util.Date Yes the end time of the timeline.
fetchEndTime java.util.Date Yes the end of the time range where data is currently being fetched.
fetchStartTime java.util.Date Yes the start of the time range where data is currently being fetched.
formattedTimeRanges java.util.List Yes a list of formattedTimeRange object which specifies the range of time period to format and the css style format used to stylize the time period.
id String Yes the identifier for the component
inlineStyle String Yes the CSS styles to use for this component. This is intended for basic style changes. The inlineStyle is a set of CSS styles that are applied to the root DOM element of the component. Be aware that because of browser CSS precedence rules, CSS rendered on a DOM element takes precedence over external stylesheets like the skin file. Therefore skins will not be able to override what you set on this attribute. If the inlineStyle's CSS properties do not affect the DOM element you want affected, then you will have to create a skin and use the skinning keys which are meant to target particular DOM elements, like ::label or ::icon-style.
itemPosition String Yes Valid Values: noOverlap, random

how items are layout vertically in the available space in the timeline. Use the value "noOverlap" to layout items such that none of them overlap each other. Use the value "random" to randomly layout the items vertically in the available space in the timeline.
itemSelection String Yes Valid Values: single, multiple, none

whether items in the timeline are selectable. Use the value "single" to enable single selection and "multiple" to enable multiple selection. Note that this applies to item across timeline series. I.e. if "single" is specified, then only one item among all timeline series are selectable at a time.
partialTriggers String[] Yes the IDs of the components that should trigger a partial update. This component will listen on the trigger components. If one of the trigger components receives an event that will cause it to update in some way, this component will request to be updated too. Identifiers are relative to the source component, and must account for NamingContainers. If your component is already inside of a naming container, you can use a single colon to start the search from the root, or multiple colons to move up through the NamingContainers - "::" will search from the parent naming container, ":::" will search from the grandparent naming container, etc.
rendered boolean Yes specifies whether the component is rendered. The default value is true.
sortData String Yes Valid Values: auto, none

whether data from the underlying model should be sorted automatically by the timeline based on time of the event. The timeline requires the data to be sorted based on time. This attribute allows the application to control whether sorting should be done automatically by the timeline or manually by the model itself. Valid values are: "auto", "none". The default value is "auto".
startTime java.util.Date Yes the start time of the timeline.
styleClass String Yes a CSS style class to use for this component. The style class can be defined in your page or in a skinning CSS file, for example, or you can use one of our public style classes, like 'AFInstructionText'.
summary String Yes the summary of this timeline's purpose and structure for user agents rendering to non-visual media (e.g. screen readers).
timeRangeChangeListener javax.el.MethodExpression Only EL A method reference to a time range change listener that will be called after a time range of the timeline has changed due to zoom operations or the current range window in the timeline overview is resized.
timeZone java.util.TimeZone Yes the timezone to use for this instance. If not set, the timezone is pulled from the AdfFacesContext.
visible boolean Yes the visibility of the component. If it is "false", the component will be hidden on the client. Unlike "rendered", this does not affect the lifecycle on the server - the component may have its bindings executed, etc. - and the visibility of the component can be toggled on and off on the client, or toggled with PPR. When "rendered" is false, the component will not in any way be rendered, and cannot be made visible on the client. The default value is true.