Oracle Fusion Middleware Data Visualization Tools Tag Reference for Oracle ADF Faces
12c (12.2.1.2)
E76719-01

<dvt:timeline>

dvt:timeline timeline timeline

UIComponent class: oracle.adf.view.faces.bi.component.timeline.UITimeline
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>.

TimelineSeries

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.

TimelineOverview

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.

TimeAxis

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.

Selection

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 "fetchStartTime" and "fetchEndTime" attributes. The date range gets updated as the user scrolls 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:

Items by default can overlap each other
Overview items can overlap each other
Shape used to represent an overview item is restricted to rectangle only
In addition to shape, scale x and scale y attributes on the marker tag are also not supported
Multiple timeline series is not supported

Geometry Management

This component can be stretched by a parent layout component that stretches its children, e.g. panelStretchLayout, panelSplitter
This component is automatically stretched to fill up the browser's viewport when it is the "sole visual root component" in the component tree and if the document component is configured with maximized="true" (the default).
When NOT stretched, this component will be displayed in its default dimensions which are provided by the skin. This can be modified by applying a dimension using the inlineStyle or styleClass attributes.
This component will stretch the timeline overview but not other children (timeline series and time axis).

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

Example

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="#{evt.date}"> <af:panelGroupLayout id="panelGroup1" layout="vertical"> <af:outputText id="outputText1" value="#{evt.description}"/> <af:outputText id="outputText2" value="#{evt.date}"/> </af:panelGroupLayout> </dvt:timelineItem> </dvt:timelineSeries> </dvt:timeline>

Events

Type	Phases	Description
oracle.adf.view.faces.bi.event.timeline.TimeRangeChangeEvent	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 event might include the width of a column that supported client-side resizing.

Attributes

Name	Type	Supports EL?	Description
animationOnDataChange	String	Yes	Valid Values: default, none Default Value: default 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 Default Value: default 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	No	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 Default Value: noOverlap 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. Note that "noOverlap" is not supported for vertical timeline.
itemSelection	String	Yes	Valid Values: single, multiple, none Default Value: 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.
orientation	String	Yes	Valid Values: horizontal, vertical Default Value: horizontal specifies the orientation of the timeline. The default value is "horizontal", in which case the time axis and the timeline items flows from left to right (or right to left in rtl mode). If the value is "vertical", then the time axis and the timeline items flows from top to bottom.
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	Default Value: true specifies whether the component is rendered. The default value is true.
sortData	String	Yes	Valid Values: auto, none Default Value: auto 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	Default Value: true 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.