---

Classes

• _global_
• Array
• links.Timeline
• links.Timeline.ClusterGenerator
• links.Timeline.Item
• links.Timeline.ItemBox
• links.Timeline.ItemDot
• links.Timeline.ItemFloatingRange
• links.Timeline.ItemRange
• links.Timeline.StepDate

---

Class links.Timeline

Defined in: timeline.js.

Class Summary

Constructor Attributes	Constructor Name and Description
	links.Timeline(container, options)

Method Summary

Method Attributes	Method Name and Description
<static>	links.Timeline.addClassName(elem, className) Adds one or more className's to the given elements style
<static>	links.Timeline.addEventListener(element, action, listener, useCapture) Add and event listener.
	addItem(itemData, preventRender) Add a new item.
	addItems(itemsData, preventRender) Add new items.
	addItemType(typeName, typeFactory) Add new type of items
	applyRange(start, end, zoomAroundDate) Apply a visible range.
	cancelAdd() Cancel creation of a new item This method can be called insed an event listener which catches the "new" event.
	cancelChange() Cancel a change item This method can be called insed an event listener which catches the "change" event.
	cancelDelete() Cancel deletion of an item This method can be called insed an event listener which catches the "delete" event.
	changeItem(index, itemData, preventRender) Edit an item
	checkResize() Check if the timeline is resized, and if so, redraw the timeline.
	clearItems() This method clears the (internal) array this.items in a safe way: neatly cleaning up the DOM, and accompanying arrays this.renderedItems and the created clusters.
<static>	links.Timeline.clone(object) Shallow clone an object
	clusterItems() Cluster the events
	collision(item1, item2, margin) Test if the two provided items collide The items must have parameters left, right, top, and bottom.
	confirmDeleteItem(index) Delete an item after a confirmation.
	createItem(itemData) Create an item object, containing all needed parameters
	deleteAllItems() Delete all items
	deleteGroups() Delete all groups
	deleteItem(index, preventRender) Delete an item
	draw(data, options) Main drawing logic.
	filterItems() Filter the visible events
	finalItemsPosition(items, groupBase, group)
<static>	links.Timeline.getAbsoluteLeft(elem) Retrieve the absolute left value of a DOM element
<static>	links.Timeline.getAbsoluteTop(elem) Retrieve the absolute top value of a DOM element
	getCluster(index) Retrieve the properties of a cluster.
	getClusterIndex(element) Find the cluster index from a given HTML element If no cluster index is found, undefined is returned
	getCurrentTime() Get current time.
	getCustomTime() Retrieve the current custom time.
	getData() Return the original data table.
	getDataRange(withMargin) Get the date range of the items.
	getGroup(groupName) Get a group by the group name.
	getGroupFromHeight(height) Find the group from a given height in the timeline
	getGroupName(groupObj) Get the group name from a group object.
	getItem(index) Retrieve the properties of an item.
	getItemIndex(element) Find the item index from a given HTML element If no item index is found, undefined is returned
	getItemsByGroup(items)
	getOptions() Get options for the timeline.
<static>	links.Timeline.getPageX(event) Get the absolute, horizontal mouse position from an event.
<static>	links.Timeline.getPageY(event) Get the absolute, vertical mouse position from an event.
	getSelection() Retrieve the currently selected event
<static>	links.Timeline.getTarget(event) Get HTML element which is the target of the event
	getVisibleChartRange() Retrieve the current visible range in the timeline.
	getVisibleItems(start, end) Find all elements within the start and end range If no element is found, returns an empty array
	initialItemsPosition(items, groupBase)
<static>	links.Timeline.isArray(obj) Check if given object is a Javascript Array
	isEditable(item) Check whether a given item is editable
	isSelected(index) Check if an item is currently selected
<static>	links.Timeline.mapColumnIds(dataTable) Retrieve a map with the column indexes of the columns by column name.
	move(moveFactor) Move the timeline the given movefactor to the left or right.
	onDblClick(event) Double click event occurred for an item
	onMouseDown(event) Start a moving operation inside the provided parent element
	onMouseMove(event) Perform moving operating.
	onMouseUp(event) Stop moving operating.
	onMouseWheel(event) Event handler for mouse wheel event, used to zoom the timeline Code from http://adomas.org/javascript-mouse-wheel/
	onTouchEnd(event) Event handler for touchend event on mobile devices
	onTouchMove(event) Event handler for touchmove event on mobile devices
	onTouchStart(event) Event handler for touchstart event on mobile devices
<static>	links.Timeline.parseJSONDate(date) parse a JSON date
<static>	links.Timeline.preventDefault(event) Cancels the event if it is cancelable, without stopping further propagation of the event.
	recalcConversion() Calculate the factor and offset to convert a position on screen to the corresponding date and vice versa.
	recalcItems() Recalculate item properties: - the height of each group.
	redraw() Redraw the timeline Reloads the (linked) data table and redraws the timeline when resized.
	reflowAxis() Reflow the timeline axis.
	reflowFrame() Reflow the timeline frame
	reflowGroups() Reflow the size of the groups
	reflowItems() Reflow all items, retrieve their actual size
<static>	links.Timeline.removeClassName(elem, className) Removes one or more className's from the given elements style
<static>	links.Timeline.removeEventListener(element, action, listener, useCapture) Remove an event listener from an element
	render(options) Re-render (reflow and repaint) all components of the Timeline: frame, axis, items, .
	repaint() Repaint all components of the Timeline
	repaintAxis() Redraw the timeline axis with minor and major labels
	repaintAxisCharacters() Create characters used to determine the size of text on the axis
	repaintAxisEndOverwriting() End of overwriting HTML DOM elements of the axis.
	repaintAxisHorizontal() Repaint the horizontal line and background of the axis
	repaintAxisMajorLine(x) Create a Major line for the axis at position x
	repaintAxisMajorText(x, text) Create a Major label for the axis at position x
	repaintAxisMinorLine(x) Create a minor line for the axis at position x
	repaintAxisMinorText(x, text) Create a minor label for the axis at position x
	repaintAxisStartOverwriting() Initialize redraw of the axis.
	repaintCurrentTime() Redraw the current time bar
	repaintCustomTime() Redraw the custom time bar
	repaintDeleteButton() Redraw the delete button, on the top right of the currently selected item if there is no item selected, the button is hidden.
	repaintDragAreas() Redraw the drag areas.
	repaintFrame() repaint the Timeline frame
	repaintGroups() Redraw the group labels
	repaintItems() Repaint all items
	repaintNavigation() Create the navigation buttons for zooming and moving
	screenToTime(x) Convert a position on screen (pixels) to a datetime Before this method can be used, the method calcConversionFactor must be executed once.
	selectCluster(index) Select an cluster by its index
	selectItem(index) Select an item by its index
	setAutoScale(enable) Enable or disable autoscaling
	setCurrentTime(time) Set current time.
	setCustomTime(time) Set custom time.
	setData(data) Set data for the timeline
	setOptions(options) Set options for the timeline.
	setScale(scale, step) Set a custom scale.
	setSelection(selection) Select an event.
	setSize(width, height) Set a new size for the timeline
	setVisibleChartRange(start, end, redraw) Set a new value for the visible range int the timeline.
	setVisibleChartRangeAuto() Change the visible chart range such that all items become visible
	setVisibleChartRangeNow() Adjust the visible range such that the current time is located in the center of the timeline
	stackCalculateFinal(items) Adjust vertical positions of the events such that they don't overlap each other.
	stackCancelAnimation() Cancel any running animation
	stackItems(animate) Stack the items such that they don't overlap.
	stackItemsCheckOverlap(items, itemIndex, itemStart, itemEnd) Check if the destiny position of given item overlaps with any of the other items from index itemStart to itemEnd.
	stackMoveOneStep(currentItems, finalItems) Move the events one step in the direction of their final positions
	stackMoveToFinal(currentItems, finalItems) Move the events from their current position to the final position
	stackOrder(items) Order the items in the array this.items.
<static>	links.Timeline.stopPropagation(event) Stop event propagation
	timeToScreen(time) Convert a datetime (Date object) into a position on the screen Before this method can be used, the method calcConversionFactor must be executed once.
	trigger(event) fire an event
	unselectItem() Unselect the currently selected event (if any)
	updateData(index, values) Update the original data with changed start, end or group.
	zoom(zoomFactor, zoomAroundDate) Zoom the timeline the given zoomfactor in or out.

Parameters:

{Element} elem

{String} className

---

Parameters:

{Element} element

An html element

{string} action

The action, for example "click", without the prefix "on"

{function} listener

The callback function to be executed

{boolean} useCapture

---

Parameters:

{Object} itemData

Object containing item properties:
{Date} start (required), {Date} end (optional), {String} content (required), {String} group (optional) {String} className (optional) {Boolean} editable (optional) {String} type (optional)

{boolean} preventRender Optional, Default: false

Do not re-render timeline if true

---

Parameters:

{Array} itemsData

An array containing Objects. The objects must have the following parameters: {Date} start, {Date} end, {String} content with text or HTML code, {String} group (optional) {String} className (optional) {String} editable (optional) {String} type (optional)

{boolean} preventRender Optional, Default: false

Do not re-render timeline if true

---

Parameters:

{String} typeName

Name of new type

{links.Timeline.Item} typeFactory

Constructor of items

---

Parameters:

{Date} start

{Date} end

{Date} zoomAroundDate

Optional. Date around which will be zoomed.

---

---

---

---

Parameters:

{Number} index

{Object} itemData

Object containing item properties:
{Date} start (required), {Date} end (optional), {String} content (required), {String} group (optional)

{boolean} preventRender Optional, Default: false

Do not re-render timeline if true

---

---

---

Parameters:

{Object} object

Returns:

{Object} clone

---

---

Parameters:

{Element} item1

The first item

{Element} item2

The second item

{Number} margin

A minimum required margin. Optional. If margin is provided, the two items will be marked colliding when they overlap or when the margin between the two is smaller than the requested margin.

Returns:

{boolean} true if item1 and item2 collide, else false

---

Parameters:

{int} index

Index of the item to be deleted

---

Parameters:

{Object} itemData

Object containing parameters start, end content, group.

Returns:

{Object} item

---

---

---

Parameters:

{int} index

Index of the item to be deleted

{boolean} preventRender Optional, Default: false

Do not re-render timeline if true (optimization for multiple delete)

---

Parameters:

{google.visualization.DataTable} data

The data containing the events for the timeline. Object DataTable is defined in google.visualization.DataTable

{Object} options

A name/value map containing settings for the timeline. Optional. The use of options here is deprecated. Pass timeline options in the constructor or use setOptions()

---

---

Parameters:

items

groupBase

group

---

Parameters:

{Element} elem

A dom element, for example a div

Returns:

{number} left The absolute left position of this element in the browser page.

---

Parameters:

{Element} elem

A dom element, for example a div

Returns:

{number} top The absolute top position of this element in the browser page.

---

Parameters:

{Number} index

Returns:

{Object} clusterdata Object containing cluster properties:
{Date} start (required), {String} type (optional) {Array} array with item data as is in getItem()

---

Parameters:

{Element} element

Returns:

{Number | undefined} index

---

Returns:

{Date} time

---

Returns:

{Date} customTime

---

Returns:

{google.visualization.DataTable | Array} data

---

Parameters:

{boolean} withMargin Optional

If true, 5% of whitespace is added to the left and right of the range. Default is false.

Returns:

{Object} range An object with parameters min and max. - {Date} min is the lowest start date of the items - {Date} max is the highest start or end date of the items If no data is available, the values of min and max will be undefined

---

Parameters:

{String} groupName

the name of the group

Returns:

{Object} groupObject

---

Parameters:

{Number} height

Height in the timeline

Returns:

{Object | undefined} group The group object, or undefined if out of range

---

Parameters:

{Object} groupObj

Returns:

{String} groupName the name of the group, or undefined when group was not provided

---

Parameters:

{Number} index

Returns:

{Object} itemData Object containing item properties:
{Date} start (required), {Date} end (optional), {String} content (required), {String} group (optional), {String} className (optional) {boolean} editable (optional) {String} type (optional)

---

Parameters:

{Element} element

Returns:

{Number | undefined} index

---

Parameters:

items

---

Returns:

the options object

---

Parameters:

{Event} event

Returns:

{Number} pageX

---

Parameters:

{Event} event

Returns:

{Number} pageY

---

Returns:

{Array} sel An array with a column row, containing the row number of the selected event. If there is no selection, an empty array is returned.

---

Parameters:

{Event} event

Returns:

{Element} target element

---

Returns:

{Object} An object with start and end properties

---

Parameters:

start

time

end

time

Returns:

Array itemsInRange

---

Parameters:

items

groupBase

---

Parameters:

{*} obj

Returns:

{Boolean} isArray true if the given object is an array

---

Parameters:

{links.Timeline.Item} item

Returns:

{boolean} editable

---

Parameters:

{Number} index

Returns:

{boolean} true if row is selected, else false

---

Parameters:

{google.visualization.DataTable} dataTable

---

Parameters:

{Number} moveFactor

Moving amount. Positive value will move right, negative value will move left

---

Parameters:

{Event} event

---

Parameters:

{Event} event

The event that occurred (required for retrieving the mouse position)

---

Parameters:

{Event} event

Well, eehh, the event

---

Parameters:

{event} event

The event

---

Parameters:

{Event} event

The event

---

Parameters:

event

---

Parameters:

event

---

Parameters:

event

---

Parameters:

{Date | String | Number} date

Date object to be parsed. Can be: - a Date object like new Date(), - a long like 1356970529389, an ISO String like "2012-12-31T16:16:07.213Z", or a .Net Date string like "\/Date(1356970529389)\/"

Returns:

{Date} parsedDate

---

Parameters:

event

---

---

Returns:

{boolean} resized returns true if any of the items properties is changed

---

---

Returns:

{boolean} resized returns true if the axis is resized

---

Returns:

{boolean} resized Returns true if any of the frame elements have been resized.

---

Returns:

{boolean} resized Returns true if any of the frame elements have been resized.

---

Returns:

{boolean} resized returns true if any of the items is resized

---

Parameters:

{Element} elem

{String} className

---

Parameters:

{Element} element

An html dom element

{string} action

The name of the event, for example "mousedown"

{function} listener

The listener function

{boolean} useCapture

---

Parameters:

{Object} options Optional

Available options: {boolean} renderTimesLeft Number of times the render may be repeated 5 times by default. {boolean} animate takes options.animate as default value

---

Returns:

{boolean} needsReflow Returns true if the DOM is changed such that a reflow is needed.

---

Returns:

{boolean} needsReflow Returns true if the DOM is changed such that a reflow is needed.

---

Returns:

{boolean} needsReflow Returns true if the DOM is changed such that a reflow is needed.

---

---

---

Parameters:

{Number} x

---

Parameters:

{Number} x

{String} text

---

Parameters:

{Number} x

---

Parameters:

{Number} x

{String} text

---

---

---

---

---

---

Returns:

{boolean} needsReflow Returns true if the DOM is changed such that a reflow is needed.

---

---

Returns:

{boolean} needsReflow Returns true if the DOM is changed such that a reflow is needed.

---

---

Parameters:

{int} x

Position on the screen in pixels

Returns:

{Date} time The datetime the corresponds with given position x

---

Parameters:

{Number} index

---

Parameters:

{Number} index

---

Parameters:

{boolean} enable

If true or not defined, autoscaling is enabled. If false, autoscaling is disabled.

---

Parameters:

{Date} time

---

Parameters:

{Date} time

---

Parameters:

{google.visualization.DataTable | Array} data

---

Parameters:

{Object} options

A name/value map containing settings for the timeline. Optional.

---

Parameters:

{links.Timeline.StepDate.SCALE} scale

A scale. Choose from SCALE.MILLISECOND, SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR, SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH, SCALE.YEAR.

{int} step

A step size, by default 1. Choose for example 1, 2, 5, or 10.

---

Parameters:

{Array} selection

An array with a column row, containing the row number (the id) of the event to be selected.

Returns:

{boolean} true if selection is succesfully set, else false.

---

Parameters:

{string} width

Width in pixels or percentage (for example "800px" or "50%")

{string} height

Height in pixels or percentage (for example "400px" or "30%")

---

Parameters:

{Date} start

The start date for the timeline. optional

{Date} end

The end date for the timeline. optional

{boolean} redraw

Optional. If true (default) the Timeline is directly redrawn

---

---

---

Parameters:

{timeline.Item[]} items

Returns:

{Object[]} finalItems

---

---

Parameters:

{boolean | undefined} animate

if animate is true, the items are moved to their new position animated defaults to false.

---

Parameters:

{Array} items

Array with items

{int} itemIndex

Number of the item to be checked for overlap

{int} itemStart

First item to be checked.

{int} itemEnd

Last item to be checked.

Returns:

{Object} colliding item, or undefined when no collisions

---

Parameters:

{Array} currentItems

Array with the real items and their current positions

{Array} finalItems

Array with objects containing the final positions of the items

Returns:

{boolean} arrived True if all items have reached their final location, else false

---

Parameters:

{Array} currentItems

Array with the real items and their current positions

{Array} finalItems

Array with objects containing the final positions of the items

---

Parameters:

{Array} items

Array with items

Returns:

{Array} sortedItems Array with sorted items

---

Parameters:

event

---

Parameters:

{Date} time

A date

Returns:

{int} x The position on the screen in pixels which corresponds with the given date.

---

Parameters:

{String} event

The name of an event, for example "rangechange" or "edit"

---

---

Parameters:

{Number} index

{Object} values

An object containing some of the following parameters: {Date} start, {Date} end, {String} content, {String} group

---

Parameters:

{Number} zoomFactor

Zooming amount. Positive value will zoom in, negative value will zoom out

{Date} zoomAroundDate

Date around which will be zoomed. Optional

---