Element: <oj-timeline>

Slots

JET elements can have up to two types of child content:

• Any child element with a slot attribute will be moved into that named slot, e.g. <span slot='startIcon'>...</span>. All supported named slots are documented below. Child elements with unsupported named slots will be removed from the DOM.
• Any child element lacking a slot attribute will be moved to the default slot, also known as a regular child.

contextMenu

The contextMenu slot is set on the oj-menu within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.

The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.

To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc and demos of the individual components for details.

Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.

Example

Initialize the component with a context menu:

<oj-some-element>
    <-- use the contextMenu slot to designate this as the context menu for this component -->
    <oj-menu slot="contextMenu" style="display:none" aria-label="Some element's context menu">
...
    </oj-menu>
</oj-some-element>

Attributes

animation-on-data-change :string

Defines the animation that is applied on data changes.

Supported Values:

Name	Type
"auto"	string
"none"	string

Default Value:

• "none"

Names

Item	Name
Property	animationOnDataChange
Property change event	animationOnDataChangeChanged
Property change listener attribute (must be of type function)	on-animation-on-data-change-changed

Examples

Initialize the Timeline with the animation-on-data-change attribute specified:

<oj-timeline animation-on-data-change='auto'></oj-timeline>

Get or set the animationOnDataChange property after initialization:

// getter
var value = myTimeline.animationOnDataChange;

// setter
myTimeline.animationOnDataChange = 'auto';

animation-on-display :string

Defines the animation that is shown on initial display.

Supported Values:

Name	Type
"auto"	string
"none"	string

Default Value:

• "none"

Names

Item	Name
Property	animationOnDisplay
Property change event	animationOnDisplayChanged
Property change listener attribute (must be of type function)	on-animation-on-display-changed

Examples

Initialize the Timeline with the animation-on-display attribute specified:

<oj-timeline animation-on-display='auto'></oj-timeline>

Get or set the animationOnDisplay property after initialization:

// getter
var value = myTimeline.animationOnDisplay;

// setter
myTimeline.animationOnDisplay = 'auto';

end :string

The end time of the timeline. A valid value is required in order for the timeline to properly render. See Date and Time Formats for more details on the required string formats.

Default Value:

• ""

Names

Item	Name
Property	end
Property change event	endChanged
Property change listener attribute (must be of type function)	on-end-changed

Example

Get or set the end property after initialization:

// getter
var value = myTimeline.end;

// setter
myTimeline.end = '2017-12-31T05:00:00.000Z';

(nullable) major-axis :Object

An object with the following properties, used to define a timeline axis. If not specified, no axis labels will be shown above the minor axis or in the overview.

Names

Item	Name
Property	majorAxis
Property change event	majorAxisChanged
Property change listener attribute (must be of type function)	on-major-axis-changed

Examples

Initialize the Timeline with the major-axis attribute specified:

<!-- Using dot notation -->
<oj-timeline major-axis.converter="[[myConverterObject]]" major-axis.scale="months" major-axis.zoom-order='["quarters", "months", "weeks", "days"]'></oj-timeline>

<!-- Using JSON notation -->
<oj-timeline major-axis='{"scale": "months", "zoomOrder": ["quarters", "months", "weeks", "days"]}'></oj-timeline>

Get or set the majorAxis property after initialization:

// Get one
var value = myTimeline.majorAxis.scale;

// Set one, leaving the others intact.
myTimeline.setProperty('majorAxis.scale', 'months');

// Get all
var values = myTimeline.majorAxis;

// Set all. Must list every resource key, as those not listed are lost.
myTimeline.majorAxis = {
    "converter": myConverterObject,
    "scale": "months"
};

(nullable) major-axis.converter :(oj.ojTimeAxis.Converter|oj.Converter.<string>)

A converter (an object literal or instance that duck types oj.Converter) used to format the labels of the major axis for all 'scale' values, or an object literal whose keys are 'scale' values that map specific converters for scale specific formatting (see oj.ojTimeAxis.Converter). See oj.DateTimeConverterFactory for details on creating built-in datetime converters.

See the major-axis attribute for usage examples.

Default Value:

• {"default": null, "seconds": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'hour': 'numeric', 'minute': '2-digit', 'second': '2-digit'}), "minutes": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'hour': 'numeric', 'minute': '2-digit'}), "hours": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'hour': 'numeric'}), "days": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'numeric', 'day': '2-digit'}), "weeks": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'numeric', 'day': '2-digit'}), "months": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'long'}), "quarters": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'long'}), "years": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'year': 'numeric'})}

Names

Item	Name
Property	majorAxis.converter

(nullable) major-axis.scale :string

The time scale used for the major axis. If not specified, no axis labels will be shown above the minor axis or in the overview.

See the major-axis attribute for usage examples.

Supported Values:

Name	Type
"days"	string
"hours"	string
"minutes"	string
"months"	string
"quarters"	string
"seconds"	string
"weeks"	string
"years"	string

Default Value:

• null

Names

Item	Name
Property	majorAxis.scale

major-axis.svg-style :Object

The CSS style defining any additional styling of the axis. If not specified, no additional styling will be applied.

See the major-axis attribute for usage examples.

Default Value:

• {}

Names

Item	Name
Property	majorAxis.svgStyle

minor-axis :Object

An object with the following properties, used to define a timeline axis. This is required in order for the timeline to properly render.

Names

Item	Name
Property	minorAxis
Property change event	minorAxisChanged
Property change listener attribute (must be of type function)	on-minor-axis-changed

Examples

Initialize the Timeline with the minor-axis attribute specified:

<!-- Using dot notation -->
<oj-timeline minor-axis.converter="[[myConverterObject]]" minor-axis.scale="weeks" minor-axis.zoom-order='["quarters", "months", "weeks", "days"]'></oj-timeline>

<!-- Using JSON notation -->
<oj-timeline minor-axis='{"scale": "weeks", "zoomOrder": ["quarters", "months", "weeks", "days"]}'></oj-timeline>

Get or set the minorAxis property after initialization:

// Get one
var value = myTimeline.minorAxis.scale;

// Set one, leaving the others intact.
myTimeline.setProperty('minorAxis.scale', 'weeks');

// Get all
var values = myTimeline.minorAxis;

// Set all. Must list every resource key, as those not listed are lost.
myTimeline.minorAxis = {
    "converter": myConverterObject,
    "scale": "weeks",
    "svgStyle": {"backgroundColor": "red"},
    "zoomOrder": ["quarters", "months", "weeks", "days"]
};

(nullable) minor-axis.converter :(oj.ojTimeAxis.Converter|oj.Converter.<string>)

A converter (an object literal or instance that duck types oj.Converter) used to format the labels of the minor axis for all 'scale' values, or an object literal whose keys are 'scale' values that map specific converters for scale specific formatting (see oj.ojTimeAxis.Converter). See oj.DateTimeConverterFactory for details on creating built-in datetime converters.

See the minor-axis attribute for usage examples.

Default Value:

• {"default": null, "seconds": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'hour': 'numeric', 'minute': '2-digit', 'second': '2-digit'}), "minutes": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'hour': 'numeric', 'minute': '2-digit'}), "hours": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'hour': 'numeric'}), "days": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'numeric', 'day': '2-digit'}), "weeks": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'numeric', 'day': '2-digit'}), "months": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'long'}), "quarters": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'long'}), "years": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'year': 'numeric'})}

Names

Item	Name
Property	minorAxis.converter

(nullable) minor-axis.scale :string

The time scale used for the minor axis. This is required in order for the timeline to properly render.

See the minor-axis attribute for usage examples.

Supported Values:

Name	Type
"days"	string
"hours"	string
"minutes"	string
"months"	string
"quarters"	string
"seconds"	string
"weeks"	string
"years"	string

Default Value:

• null

Names

Item	Name
Property	minorAxis.scale

minor-axis.svg-style :Object

The CSS style defining any additional styling of the axis. If not specified, no additional styling will be applied.

See the minor-axis attribute for usage examples.

Default Value:

• {}

Names

Item	Name
Property	minorAxis.svgStyle

(nullable) minor-axis.zoom-order :Array.<string>

An array of strings containing the names of scales used for zooming from longest to shortest. If not specified, the 'scale' specified on the axis will be used at all zoom levels.

See the minor-axis attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	minorAxis.zoomOrder

orientation :string

The orientation of the element.

Supported Values:

Name	Type
"horizontal"	string
"vertical"	string

Default Value:

• "horizontal"

Names

Item	Name
Property	orientation
Property change event	orientationChanged
Property change listener attribute (must be of type function)	on-orientation-changed

Examples

Initialize the Timeline with the orientation attribute specified:

<oj-timeline orientation='vertical'></oj-timeline>

Get or set the orientation property after initialization:

// getter
var value = myTimeline.orientation;

// setter
myTimeline.orientation = 'vertical';

(nullable) overview :Object

An object with the following properties, used to define a timeline overview. If not specified, no overview will be shown.

Names

Item	Name
Property	overview
Property change event	overviewChanged
Property change listener attribute (must be of type function)	on-overview-changed

Examples

Initialize the Timeline with the overview attribute specified:

<!-- Using dot notation -->
<oj-timeline overview.rendered="on" overview.svg-style='{"height":"50px"}'></oj-timeline>

<!-- Using JSON notation -->
<oj-timeline overview='{"rendered": "on", "svgStyle": {"height":"50px"}}'></oj-timeline>

Get or set the majorAxis property after initialization:

// Get one
var value = myTimeline.overview.rendered;

// Set one, leaving the others intact.
myTimeline.setProperty('overview.rendered', 'on');

// Get all
var values = myTimeline.rendered;

// Set all. Must list every resource key, as those not listed are lost.
myTimeline.majorAxis = {
    "rendered": "on",
    "svgStyle": {"height":"50px"}
};

overview.rendered :string

Specifies whether the overview scrollbar is rendered.

See the overview attribute for usage examples.

Supported Values:

Name	Type
"off"	string
"on"	string

Default Value:

• "off"

Names

Item	Name
Property	overview.rendered

overview.svg-style :Object

The CSS style defining any additional styling of the overview. If not specified, no additional styling will be applied.

See the overview attribute for usage examples.

Default Value:

• {}

Names

Item	Name
Property	overview.svgStyle

reference-objects :Array.<oj.ojTimeline.ReferenceObject>

The array of reference objects associated with the timeline. For each reference object, a line is rendered at the specified value. Currently only the first reference object in the array is supported. Any additional objects supplied in the array will be ignored.

Default Value:

• []

Names

Item	Name
Property	referenceObjects
Property change event	referenceObjectsChanged
Property change listener attribute (must be of type function)	on-reference-objects-changed

Examples

Initialize the Timeline with the reference-objects attribute specified:

<oj-timeline reference-objects='[{"value": "2017-04-15T04:00:00.000Z"}]'></oj-timeline>

Get or set the referenceObjects property after initialization:

// Get one
var value = myTimeline.referenceObjects[0];

// Get all
var values = myTimeline.referenceObjects;

// Set all (There is no permissible "set one" syntax.)
myTimeline.referenceObjects = [{"value": "2017-04-15T00:00:00.000Z"}];

selection :Array.<string>

An array of strings containing the ids of the initially selected items.

Default Value:

• []

Supports writeback:

• true

Names

Item	Name
Property	selection
Property change event	selectionChanged
Property change listener attribute (must be of type function)	on-selection-changed

Examples

Initialize the Timeline with the selection attribute specified:

<oj-timeline selection='["itemID1", "itemID2", "itemID3"]'></oj-timeline>

Get or set the gridlines property after initialization:

// Get one
var value = myTimeline.selection[0];

// Get all
var values = myTimeline.selection;

// Set all (There is no permissible "set one" syntax.)
myTimeline.selection = ["itemID1", "itemID2", "itemID3"];

selection-mode :string

The type of selection behavior that is enabled on the timeline. If 'single' is specified, only a single item across all series can be selected at once. If 'multiple', any number of items across all series can be selected at once. Otherwise, selection is disabled.

Supported Values:

Name	Type
"multiple"	string
"none"	string
"single"	string

Default Value:

• "none"

Names

Item	Name
Property	selectionMode
Property change event	selectionModeChanged
Property change listener attribute (must be of type function)	on-selection-mode-changed

Examples

Initialize the Timeline with the selection-mode attribute specified:

<oj-timeline selection-mode='multiple'></oj-timeline>

Get or set the selectionMode property after initialization:

// getter
var value = myTimeline.selectionMode;

// setter
myTimeline.selectionMode = 'multiple';

(nullable) series :(Array.<oj.ojTimeline.Series>|Promise.<Array.<oj.ojTimeline.Series>>|null)

An array of objects with the following properties, used to define a timeline series. Also accepts a Promise that will resolve with an array for deferred data rendering. No data will be rendered if the Promise is rejected.

Default Value:

• null

Names

Item	Name
Property	series
Property change event	seriesChanged
Property change listener attribute (must be of type function)	on-series-changed

Examples

Initialize the Timeline with the series attribute specified:

<oj-timeline series='[[mySeries]]'></oj-timeline>

Get or set the series property after initialization:

// Get all (The series getter always returns a Promise so there is no "get one" syntax)
var values = myTimeline.series;

// Set all (There is no permissible "set one" syntax.)
myTimeline.series = [
    {
        "id": "s1",
        "emptyText": "No Tournaments Played.",
        "label": "Rafael Nadal: 75-7",
        "items": [
            {
                "id": "e1",
                "title":"ATP VTR Open",
                "start": "2013-02-04",
                "description":"Finalist: 3-1"
            },
            {
                "id": "e2",
                "title":"ATP Brasil Open",
                "start": "2013-02-11",
                "description":"Champion: 4-0"
            }
        ]
    },
    {
        "id": "s2",
        "emptyText": "No Tournaments Played.",
        "label": "Novak Djokovic: 74-9",
        "items": [
            {
                "id": "e101",
                "title":"AUSTRALIAN OPEN",
                "start": "2013-01-14",
                "description":"Champion: 7-0"
            },
            {
                "id": "e102",
                "title":"Davis Cup World Group Round 1n",
                "start": "2013-02-01",
                "description":"Results: 1-0"
            },
            {
                "id": "e103",
                "title":"ATP Dubai Duty Free Tennis Championships",
                "start": "2013-02-25",
                "description":"Champion: 5-0"
            }
        ]
    }
];

start :string

The start time of the timeline. A valid value is required in order for the timeline to properly render. See Date and Time Formats for more details on the required string formats.

Default Value:

• ""

Names

Item	Name
Property	start
Property change event	startChanged
Property change listener attribute (must be of type function)	on-start-changed

Examples

Initialize the Timeline with the start attribute specified:

<oj-timeline start='2017-01-01T05:00:00.000Z'></oj-timeline>

Get or set the start property after initialization:

// getter
var value = myTimeline.start;

// setter
myTimeline.start = "2017-01-01T05:00:00.000Z";

style-defaults :Object

An object with the following properties, used to define default styling for the timeline. Component CSS classes should be used to set component wide styling. This API should be used only for styling a specific instance of the component. Properties specified on this object may be overridden by specifications on the data item. Some property default values come from the CSS and varies based on theme.

Names

Item	Name
Property	styleDefaults
Property change event	styleDefaultsChanged
Property change listener attribute (must be of type function)	on-style-defaults-changed

Examples

Initialize the Timeline with the style-defaults attribute specified:

<!-- Using dot notation -->
<oj-timeline style-defaults.animation-duration='200'></oj-timeline>

<!-- Using JSON notation -->
<oj-timeline style-defaults='{"animationDuration": 200, "item": {"backgroundColor": "red"}'></oj-timeline>

Get or set the styleDefaults property after initialization:

// Get one
var value = myTimeline.styleDefaults.animationDuration;

// Get all
var values = myTimeline.styleDefaults;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myTimeline.setProperty('styleDefaults.borderColor', 'red');

// Set all. Must list every resource key, as those not listed are lost.
myTimeline.styleDefaults = {'borderColor': 'red'};

style-defaults.animation-duration :number

The duration of the animations, in milliseconds. The default value comes from the CSS and varies based on theme. For data change animations with multiple stages, this attribute defines the duration of each stage. For example, if an animation contains two stages, the total duration will be two times this attribute's value.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.animationDuration

style-defaults.border-color :string

The border color of the timeline. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.borderColor

style-defaults.item :Object

An object with the following properties, used to define the default styling for the timeline item.

See the style-defaults attribute for usage examples.

Default Value:

• {}

Names

Item	Name
Property	styleDefaults.item

style-defaults.item.background-color :string

The background color of the timeline items. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.item.backgroundColor

style-defaults.item.border-color :string

The border color of the timeline items. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.item.borderColor

style-defaults.item.description-style :Object

The CSS style defining the style of the timeline item description text. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.item.descriptionStyle

style-defaults.item.hover-background-color :string

The background color of the highlighted timeline items. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.item.hoverBackgroundColor

style-defaults.item.hover-border-color :string

The border color of the highlighted timeline items. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.item.hoverBorderColor

style-defaults.item.selected-background-color :string

The background color of the selected timeline items. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.item.selectedBackgroundColor

style-defaults.item.selected-border-color :string

The border color of the selected timeline items. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.item.selectedBorderColor

style-defaults.item.title-style :Object

The CSS style defining the style of the timeline item title text. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.item.titleStyle

style-defaults.major-axis :Object

An object with the following properties, used to define the default styling for the major time axis.

See the style-defaults attribute for usage examples.

Default Value:

• {}

Names

Item	Name
Property	styleDefaults.majorAxis

style-defaults.major-axis.label-style :Object

The CSS style defining the style of the major time axis label text. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.majorAxis.labelStyle

style-defaults.major-axis.separator-color :string

The color of the major time axis separators. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.majorAxis.separatorColor

style-defaults.minor-axis :Object

An object with the following properties, used to define the default styling for the time axis.

See the style-defaults attribute for usage examples.

Default Value:

• {}

Names

Item	Name
Property	styleDefaults.minorAxis

style-defaults.minor-axis.background-color :string

The background color of the time axis. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.minorAxis.backgroundColor

style-defaults.minor-axis.border-color :string

The border color of the time axis. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.minorAxis.borderColor

style-defaults.minor-axis.label-style :Object

The CSS style defining the style of the time axis label text. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.minorAxis.labelStyle

style-defaults.minor-axis.separator-color :string

The color of the time axis separators. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.minorAxis.separatorColor

style-defaults.overview :Object

An object with the following properties, used to define the default styling for the timeline overview.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.overview

style-defaults.overview.background-color :string

The background color of the timeline overview. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.overview.backgroundColor

style-defaults.overview.label-style :Object

The CSS style defining the style of the timeline overview label text. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.overview.labelStyle

style-defaults.overview.window :Object

An object with the following properties, used to define the default styling for the timeline overview window.

See the style-defaults attribute for usage examples.

Default Value:

• {}

Names

Item	Name
Property	styleDefaults.overview.window

style-defaults.overview.window.background-color :string

The background color of the timeline overview window. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.overview.window.backgroundColor

style-defaults.overview.window.border-color :string

The border color of the timeline overview window. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.overview.window.borderColor

style-defaults.reference-object :Object

An object with the following properties, used to define the default styling for the reference objects.

See the style-defaults attribute for usage examples.

Default Value:

• {}

Names

Item	Name
Property	styleDefaults.referenceObject

style-defaults.reference-object.color :string

The color of the reference objects. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.referenceObject.color

style-defaults.series :Object

An object with the following properties, used to define the default styling for the timeline series.

See the style-defaults attribute for usage examples.

Default Value:

• {}

Names

Item	Name
Property	styleDefaults.series

style-defaults.series.background-color :string

The background color of the series. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.series.backgroundColor

style-defaults.series.colors :Array.<string>

The array defining the default color ramp for the series items.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.series.colors

style-defaults.series.empty-text-style :Object

The CSS style defining the style of the series empty text. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.series.emptyTextStyle

style-defaults.series.label-style :Object

The CSS style defining the style of the series label text. The default value comes from the CSS and varies based on theme.

See the style-defaults attribute for usage examples.

Names

Item	Name
Property	styleDefaults.series.labelStyle

track-resize :string

Defines whether the element will automatically render in response to changes in size. If set to off, then the application is responsible for calling refresh to render the element at the new size.

Supported Values:

Name	Type
"off"	string
"on"	string

Default Value:

• "on"

Names

Item	Name
Property	trackResize
Property change event	trackResizeChanged
Property change listener attribute (must be of type function)	on-track-resize-changed

Examples

Initialize the data visualization element with the track-resize attribute specified:

<oj-some-dvt track-resize='off'></oj-some-dvt>

Get or set the trackResize property after initialization:

// getter
var value = myComponent.trackResize;

// setter
myComponent.trackResize="off";

translations :Object|null

A collection of translated resources from the translation bundle, or null if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.

If the component does not contain any translatable resource, the default value of this attribute will be null. If not, an object containing all resources relevant to the component.

If this component has translations, their documentation immediately follows this doc entry.

Names

Item	Name
Property	translations
Property change event	translationsChanged
Property change listener attribute (must be of type function)	on-translations-changed

Examples

Initialize the component, overriding some translated resources and leaving the others intact:

<!-- Using dot notation -->
<oj-some-element translations.some-key='some value' translations.some-other-key='some other value'></oj-some-element>

<!-- Using JSON notation -->
<oj-some-element translations='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-some-element>

Get or set the translations property after initialization:

// Get one
var value = myComponent.translations.someKey;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myComponent.setProperty('translations.someKey', 'some value');

// Get all
var values = myComponent.translations;

// Set all.  Must list every resource key, as those not listed are lost.
myComponent.translations = {
    someKey: 'some value',
    someOtherKey: 'some other value'
};

(nullable) translations.accessible-item-desc :string

Provides properties to customize the screen reader text describing an item's description text.

Default Value:

• "Description is {0}."

Since:

• 3.0.0

Names

Item	Name
Property	translations.accessibleItemDesc

(nullable) translations.accessible-item-end :string

Provides properties to customize the screen reader text describing an item's end time.

Default Value:

• "End time is {0}."

Since:

• 3.0.0

Names

Item	Name
Property	translations.accessibleItemEnd

(nullable) translations.accessible-item-start :string

Provides properties to customize the screen reader text describing an item's start time.

Default Value:

• "Start time is {0}."

Since:

• 3.0.0

Names

Item	Name
Property	translations.accessibleItemStart

(nullable) translations.accessible-item-title :string

Provides properties to customize the screen reader text describing an item's title text.

Default Value:

• "Title is {0}."

Since:

• 3.0.0

Names

Item	Name
Property	translations.accessibleItemTitle

(nullable) translations.component-name :string

Used to describe the data visualization type for accessibility.

See the translations attribute for usage examples.

Default Value:

• "Timeline"

Names

Item	Name
Property	translations.componentName

(nullable) translations.label-and-value :string

Used to display a label and its value.

See the translations attribute for usage examples.

Default Value:

• "{0}: {1}"

Names

Item	Name
Property	translations.labelAndValue

(nullable) translations.label-clear-selection :string

Text shown for clearing multiple selection on touch devices.

See the translations attribute for usage examples.

Default Value:

• "Clear Selection"

Names

Item	Name
Property	translations.labelClearSelection

(nullable) translations.label-count-with-total :string

Used to display a count out of a total.

See the translations attribute for usage examples.

Default Value:

• "{0} of {1}"

Names

Item	Name
Property	translations.labelCountWithTotal

(nullable) translations.label-data-visualization :string

Label for data visualizations used for accessibility.

See the translations attribute for usage examples.

Default Value:

• "Data Visualization"

Names

Item	Name
Property	translations.labelDataVisualization

(nullable) translations.label-invalid-data :string

Text shown when the component receives invalid data.

See the translations attribute for usage examples.

Default Value:

• "Invalid data"

Names

Item	Name
Property	translations.labelInvalidData

(nullable) translations.label-no-data :string

Text shown when the component receives no data.

See the translations attribute for usage examples.

Default Value:

• "No data to display"

Names

Item	Name
Property	translations.labelNoData

(nullable) translations.label-series :string

Used for accessibility.

See the translations attribute for usage examples.

Default Value:

• "Series"

Names

Item	Name
Property	translations.labelSeries

(nullable) translations.state-collapsed :string

Used to describe the collapsed state for accessibility.

See the translations attribute for usage examples.

Default Value:

• "Collapsed"

Names

Item	Name
Property	translations.stateCollapsed

(nullable) translations.state-drillable :string

Used to describe a drillable object for accessibility.

See the translations attribute for usage examples.

Default Value:

• "Drillable"

Names

Item	Name
Property	translations.stateDrillable

(nullable) translations.state-expanded :string

Used to describe the expanded state for accessibility.

See the translations attribute for usage examples.

Default Value:

• "Expanded"

Names

Item	Name
Property	translations.stateExpanded

(nullable) translations.state-hidden :string

Used to describe the hidden state for accessibility.

See the translations attribute for usage examples.

Default Value:

• "Hidden"

Names

Item	Name
Property	translations.stateHidden

(nullable) translations.state-isolated :string

Used to describe the isolated state for accessibility.

See the translations attribute for usage examples.

Default Value:

• "Isolated"

Names

Item	Name
Property	translations.stateIsolated

(nullable) translations.state-maximized :string

Used to describe the maximized state for accessibility.

See the translations attribute for usage examples.

Default Value:

• "Maximized"

Names

Item	Name
Property	translations.stateMaximized

(nullable) translations.state-minimized :string

Used to describe the minimized state for accessibility.

See the translations attribute for usage examples.

Default Value:

• "Minimized"

Names

Item	Name
Property	translations.stateMinimized

(nullable) translations.state-selected :string

Used to describe the selected state for accessibility.

See the translations attribute for usage examples.

Default Value:

• "Selected"

Names

Item	Name
Property	translations.stateSelected

(nullable) translations.state-unselected :string

Used to describe the unselected state for accessibility.

See the translations attribute for usage examples.

Default Value:

• "Unselected"

Names

Item	Name
Property	translations.stateUnselected

(nullable) translations.state-visible :string

Used to describe the visible state for accessibility.

See the translations attribute for usage examples.

Default Value:

• "Visible"

Names

Item	Name
Property	translations.stateVisible

(nullable) translations.tooltip-zoom-in :string

Used for the zoom in tooltip.

See the translations attribute for usage examples.

Default Value:

• "Zoom In"

Names

Item	Name
Property	translations.tooltipZoomIn

(nullable) translations.tooltip-zoom-out :string

Used for the zoom out tooltip.

See the translations attribute for usage examples.

Default Value:

• "Zoom Out"

Names

Item	Name
Property	translations.tooltipZoomOut

viewport-end :string

The end time of the timeline's viewport. If not specified or invalid, this will default to a value determined by the initial 'scale' of the minor axis and the width of the timeline. See Date and Time Formats for more details on the required string formats.

Default Value:

• ""

Names

Item	Name
Property	viewportEnd
Property change event	viewportEndChanged
Property change listener attribute (must be of type function)	on-viewport-end-changed

Examples

Initialize the Timeline with the viewport-end attribute specified:

<oj-timeline viewport-end='2017-12-31T05:00:00.000Z'></oj-timeline>

Get or set the viewportEnd property after initialization:

// getter
var value = myTimeline.viewportEnd;

// setter
myTimeline.viewportEnd = '2017-12-31T05:00:00.000Z';

viewport-start :string

The start time of the timeline's viewport. If not specified or invalid, this will default to a value determined by the initial 'scale' of the minor axis and the width of the timeline. See Date and Time Formats for more details on the required string formats.

Default Value:

• ""

Names

Item	Name
Property	viewportStart
Property change event	viewportStartChanged
Property change listener attribute (must be of type function)	on-viewport-start-changed

Examples

Initialize the Timeline with the viewport-start attribute specified:

<oj-timeline viewport-start='2017-01-01T05:00:00.000Z'></oj-timeline>

Get or set the viewportStart property after initialization:

// getter
var value = myTimeline.viewportStart;

// setter
myTimeline.viewportStart = '2017-01-01T05:00:00.000Z';

Context Objects

Each context object contains, at minimum, a subId property, whose value is a string that identifies a particular DOM node in this element. It can have additional properties to further specify the desired node. See getContextByNode for more details.

Following are the valid subIds:

oj-timeline-item

Context for timeline series items indexed by series and item indices.

Properties:

Name	Type
seriesIndex	number
itemIndex	number

Events

ojViewportChange

Triggered after the viewport is changed due to a zoom or scroll operation.

Properties:

All of the event payloads listed below can be found under event.detail.

Name	Type	Description
viewportStart	string	the start of the new viewport on a timeline
viewportEnd	string	the end of the new viewport on a timeline
minorAxisScale	string	the time scale of the minor axis

Examples

Specify an ojViewportChange listener via the DOM attribute:

<oj-timeline on-oj-viewport-change='[[listener]]'></oj-timeline>

Specify an ojViewportChange listener via the JavaScript property:

myTimeline.onOjViewportChange = listener;

Add an ojViewportChange listener via the addEventListener API:

myTimeline.addEventListener('ojViewportChange', listener);

Methods

getContextByNode(node) → {(oj.ojTimeline.NodeContext|null)}

Returns an object with context for the given child DOM node. This will always contain the subid for the node, defined as the 'subId' property on the context object. Additional component specific information may also be included. For more details on returned objects, see context objects.

Parameters:

Name	Type	Argument	Description
node	Element	<not nullable>	The child DOM node

Returns:

The context for the DOM node, or null when none is found.

Type

(oj.ojTimeline.NodeContext|null)

Example

// Returns {'subId': 'oj-some-sub-id', 'componentSpecificProperty': someValue, ...}
var context = myComponent.getContextByNode(nodeInsideElement);

getProperty(property) → {any}

Retrieves a value for a property or a single subproperty for complex properties.

Parameters:

Name	Type	Description
property	string	The property name to get. Supports dot notation for subproperty access.

Since:

• 4.0.0

Returns:

Type

any

Example

Get a single subproperty of a complex property:

var subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');

refresh() → {void}

Refreshes the component.

Returns:

Type

void

setProperties(properties) → {void}

Performs a batch set of properties.

Parameters:

Name	Type	Description
properties	Object	An object containing the property and value pairs to set.

Since:

• 4.0.0

Returns:

Type

void

Example

Set a batch of properties:

myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});

setProperty(property, value) → {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a [property]Changed event.

Parameters:

Name	Type	Description
property	string	The property name to set. Supports dot notation for subproperty access.
value	any	The new value to set the property to.

Since:

• 4.0.0

Returns:

Type

void

Example

Set a single subproperty of a complex property:

myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");

Type Definitions

NodeContext

Properties:

Name	Type	Description
subId	string	The subId string to identify the particular DOM node.
seriesIndex	number	The zero based index of the timeline series.
itemIndex	number	The zero based index of the timeline series item.

ReferenceObject

Properties:

Name	Type	Argument	Description
value	string	<optional>	The time value of this reference object. If not specified, no reference object will be shown. See Date and Time Formats for more details on the required string formats.

Series

Properties:

Name	Type	Argument	Default	Description
emptyText	string	<optional>		The text of an empty timeline series.
id	string			The identifier for the timeline series.
itemLayout	"bottomToTop" | "topToBottom" | "auto"	<optional>	"auto"	The direction in which items are laid out when in a horizontal orientation. This attribute is ignored when in a vertical orientation.
label	string	<optional>		The label displayed on the timeline series. In not specified, no label will be shown.
svgStyle	Object	<optional>		The CSS style defining any additional styling of the series. If not specified, no additional styling will be applied.
items	Array.<oj.ojTimeline.SeriesItem>	<optional>		An array of items. If not specified, no data will be shown in this series.

SeriesItem

Properties:

Name	Type	Argument	Description
description	string	<optional>	The description text displayed on the timeline item. If not specified, no description will be shown.
end	string	<optional>	The end time of this timeline item. If not specified, no duration bar will be shown. See Date and Time Formats for more details on the required string formats.
durationFillColor	string	<optional>	The color applied to the duration bar of the timeline item. If not specified, this will be determined by the color ramp of the series.
id	string		The identifier for the timeline item. This must be unique across all items in the timeline, and is required in order for the timeline to properly render.
start	string		The start time of this timeline item. This is required in order for the timeline item to properly render. See Date and Time Formats for more details on the required string formats.
svgStyle	Object	<optional>	The CSS style defining any additional styling of the item. If not specified, no additional styling will be applied.
thumbnail	string	<optional>	An optional URI specifying the location of an image resource to be displayed on the item. The image will be rendered at 32px x 32px in size. If not specified, no thumbnail will be shown.
title	string	<optional>	The title text displayed on the timeline item. If not specified, no title will be shown.