From f07d21f553feb0eda981553a4b4f4f008d910a80 Mon Sep 17 00:00:00 2001 From: jos Date: Mon, 4 May 2015 17:15:28 +0200 Subject: [PATCH] Halfway refactoring the Timeline docs --- docs/network/physics.html | 2 +- docs/timeline/index.html | 1582 +++++++++++++++++++++++++++++++++++++ 2 files changed, 1583 insertions(+), 1 deletion(-) create mode 100644 docs/timeline/index.html diff --git a/docs/network/physics.html b/docs/network/physics.html index a59d2769..621ec72e 100644 --- a/docs/network/physics.html +++ b/docs/network/physics.html @@ -158,7 +158,7 @@ network.setOptions(options); maxVelocity Number 50 The physics module limits the maximum velocity of the nodes to increase the time to stabilization. This is the maximium value. minVelocity Number 0.1 Once the minimum velocity is reached for all nodes, we assume the network has been stabilized and the simulation stops. - solver String 'barnesHut'You can select your own solver. Possible options: 'barnesHut','repulsion','hierarchicalRepulsion'. When setting the hierarchical layout, the hierarchical repulsion solver is automaticaly selected, regardless of what you fill in here. + solver String 'barnesHut'You can select your own solver. Possible options: 'barnesHut', 'repulsion', 'hierarchicalRepulsion'. When setting the hierarchical layout, the hierarchical repulsion solver is automaticaly selected, regardless of what you fill in here. stabilization Object | BooleanObject When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object. stabilization.enabled Boolean true Toggle the stabilization. This is an optional property. If undefined, it is automatically set to true when any of the properties of this object are defined. stabilization.iterations Number 1000 The physics module tries to stabilize the network on load up til a maximum number of iterations defined here. If the network stabilized with less, you are finished before the maximum number. diff --git a/docs/timeline/index.html b/docs/timeline/index.html new file mode 100644 index 00000000..c97d81ef --- /dev/null +++ b/docs/timeline/index.html @@ -0,0 +1,1582 @@ + + + + + + + + + timeline - vis.js - A dynamic, browser based visualization library. + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ + +
+

Timeline

+ +

Overview

+

+ The Timeline is an interactive visualization chart to visualize data in time. + The data items can take place on a single date, or have a start and end date (a range). + You can freely move and zoom in the timeline by dragging and scrolling in the + Timeline. Items can be created, edited, and deleted in the timeline. + The time scale on the axis is adjusted automatically, and supports scales ranging + from milliseconds to years. +

+

+ Timeline uses regular HTML DOM to render the timeline and items put on the + timeline. This allows for flexible customization using css styling. +

+ +

Contents

+ + +

Example

+

+ The following code shows how to create a Timeline and provide it with data. + More examples can be found in the examples directory. +

+ +
<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Basic demo</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('visualization');
+
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+    {id: 1, content: 'item 1', start: '2013-04-20'},
+    {id: 2, content: 'item 2', start: '2013-04-14'},
+    {id: 3, content: 'item 3', start: '2013-04-18'},
+    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
+    {id: 5, content: 'item 5', start: '2013-04-25'},
+    {id: 6, content: 'item 6', start: '2013-04-27'}
+  ]);
+
+  // Configuration for the Timeline
+  var options = {};
+
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+</script>
+</body>
+</html>
+
+ + +

Loading

+

+ Install or download the vis.js library. + in a subfolder of your project. Include the libraries script and css files in the + head of your html code: +

+ +
+<script src="vis/dist/vis.js"></script>
+<link href="vis/dist/vis.css" rel="stylesheet" type="text/css" />
+
+ + The constructor of the Timeline is vis.Timeline + 
var timeline = new vis.Timeline(container, items, options);
+ or when using groups: + 
var timeline = new vis.Timeline(container, items, groups, options);
+ + The constructor accepts four parameters: + + +

Data Format

+ +

+ The timeline can be provided with two types of data: +

+ + +

Items

+

+ The Timeline uses regular Arrays and Objects as data format. + Data items can contain the properties start, + end (optional), content, + group (optional), className (optional), + and style (optional). +

+ +

+ A table is constructed as: +

+ +
+var items = [
+  {
+    start: new Date(2010, 7, 15),
+    end: new Date(2010, 8, 2),  // end is optional
+    content: 'Trajectory A'
+    // Optional: fields 'id', 'type', 'group', 'className', 'style'
+  }
+  // more items...
+]);
+
+ +

+ The item properties are defined as: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeRequiredDescription
classNameStringnoThis field is optional. A className can be used to give items + an individual css style. For example, when an item has className + 'red', one can define a css style like: + 
+.vis.timeline .red {
+  color: white;
+  background-color: red;
+  border-color: darkred;
+}
+ More details on how to style items can be found in the section + Styles. +
contentStringyesThe contents of the item. This can be plain text or html code.
endDate | number | string | MomentnoThe end date of the item. The end date is optional, and can be left null. + If end date is provided, the item is displayed as a range. + If not, the item is displayed as a box.
groupany typenoThis field is optional. When the group column is provided, + all items with the same group are placed on one line. + A vertical axis is displayed showing the groups. + Grouping items can be useful for example when showing availability of multiple + people, rooms, or other resources next to each other.
+
idString | NumbernoAn id for the item. Using an id is not required but highly + recommended. An id is needed when dynamically adding, updating, + and removing items in a DataSet.
startDate | number | string | MomentyesThe start date of the item, for example new Date(2010,9,23).
styleStringno + A css text string to apply custom styling for an individual item, for + example "color: red; background-color: pink;". +
subgroupString | NumbernoneThe id of a subgroup. + Groups all items within a group per subgroup, and positions them on the + same height instead of staking them on top of each other. can be ordered + by specifying the option subgroupOrder of a group. +
titleStringnoneAdd a title for the item, displayed when holding the mouse on the item. + The title can only contain plain text. +
typeStringnoThe type of the item. Can be 'box' (default), 'point', 'range', or 'background'. + Types 'box' and 'point' need a start date, the types 'range' and 'background' needs both a start and end date. +
+ +

Groups

+

+ Like the items, groups are regular JavaScript Arrays and Objects. + Using groups, items can be grouped together. + Items are filtered per group, and displayed as + + Group items can contain the properties id, + content, and className (optional). +

+

+ Groups can be applied to a timeline using the method setGroups or supplied in the constructor. + A table with groups can be created like: +

+ +
+var groups = [
+  {
+    id: 1,
+    content: 'Group 1'
+    // Optional: a field 'className', 'style'
+  }
+  // more groups...
+]);
+
+ + +

+ Groups can have the following properties: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeRequiredDescription
classNameStringnoThis field is optional. A className can be used to give groups + an individual css style. For example, when a group has className + 'red', one can define a css style + + .red { + color: red; + } + . + More details on how to style groups can be found in the section + Styles. +
contentStringyesThe contents of the group. This can be plain text or html code.
idString | NumberyesAn id for the group. The group will display all items having a + property group which matches the id + of the group.
styleStringno + A css text string to apply custom styling for an individual group label, for + example "color: red; background-color: pink;". +
subgroupOrderString | FunctionnoneOrder the subgroups by a field name or custom sort function. + By default, groups are ordered by first-come, first-show. +
titleStringnoneA title for the group, displayed when holding the mouse on the groups label. + The title can only contain plain text. +
+ + + +

Configuration Options

+ +

+ Options can be used to customize the timeline. + Options are defined as a JSON object. All options are optional. +

+ +
+var options = {
+  width: '100%',
+  height: '30px',
+  margin: {
+    item: 20
+  }
+};
+
+ +

+ The following options are available. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
alignString'center'Alignment of items with type 'box', 'range', and 'background'. Available values are 'auto' (default), 'center', 'left', or 'right'. For 'box' items, the 'auto' alignment is 'center'. For 'range' items, the auto alignment is dynamic: positioned left and shifted such that the contents is always visible on screen.
autoResizebooleantrueIf true, the Timeline will automatically detect when its container is resized, and redraw itself accordingly. If false, the Timeline can be forced to repaint after its container has been resized using the function redraw().
clickToUsebooleanfalseWhen a Timeline is configured to be clickToUse, it will react to mouse and touch events only when active. + When active, a blue shadow border is displayed around the Timeline. The Timeline is set active by clicking on it, and is changed to inactive again by clicking outside the Timeline or by pressing the ESC key.
dataAttributesstring[] | 'all'falseAn array of fields optionally defined on the timeline items that will be appended as data- attributes to the DOM element of the items.
+ If value is 'all' then each field defined on the timeline item will become a data- attribute.
editableboolean | ObjectfalseIf true, the items in the timeline can be manipulated. Only applicable when option selectable is true. See also the callbacks onAdd, onUpdate, onMove, and onRemove. When editable is an object, one can enable or disable individual manipulation actions. + See section Editing Items for a detailed explanation. +
editable.addbooleanfalseIf true, new items can be created by double tapping an empty space in the Timeline. See section Editing Items for a detailed explanation.
editable.removebooleanfalseIf true, items can be deleted by first selecting them, and then clicking the delete button on the top right of the item. See section Editing Items for a detailed explanation.
editable.updateGroupbooleanfalseIf true, items can be dragged from one group to another. Only applicable when the Timeline has groups. See section Editing Items for a detailed explanation.
editable.updateTimebooleanfalseIf true, items can be dragged to another moment in time. See section Editing Items for a detailed explanation.
endDate | Number | String | MomentnoneThe initial end date for the axis of the timeline. + If not provided, the latest date present in the items set is taken as + end date.
formatObjectnone + Apply custom date formatting of the labels on the time axis. The default value of format is: + 
{
+  minorLabels: {
+    millisecond:'SSS',
+    second:     's',
+    minute:     'HH:mm',
+    hour:       'HH:mm',
+    weekday:    'ddd D',
+    day:        'D',
+    month:      'MMM',
+    year:       'YYYY'
+  },
+  majorLabels: {
+    millisecond:'HH:mm:ss',
+    second:     'D MMMM HH:mm',
+    minute:     'ddd D MMMM',
+    hour:       'ddd D MMMM',
+    weekday:    'MMMM YYYY',
+    day:        'MMMM YYYY',
+    month:      'YYYY',
+    year:       ''
+  }
+}
+ For values which not provided in the customized options.format, the default values will be used. + All available formatting syntax is described in the docs of moment.js. +
groupOrderString | FunctionnoneOrder the groups by a field name or custom sort function. + By default, groups are not ordered. +
heightnumber | StringnoneThe height of the timeline in pixels or as a percentage. + When height is undefined or null, the height of the timeline is automatically + adjusted to fit the contents. + It is possible to set a maximum height using option maxHeight + to prevent the timeline from getting too high in case of automatically + calculated height. +
hiddenDatesObjectnoneThis option allows you to hide specific timespans from the time axis. The dates can be supplied as an object: + {start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00', [repeat:'daily']} or as an Array of these objects. The repeat argument is optional. + The possible values are (case-sensitive): daily, weekly, monthly, yearly. To hide a weekend, pick any Saturday as start and the following Monday as end + and set repeat to weekly. +
localeStringnoneSelect a locale for the Timeline. See section Localization for more information.
localesObjectnoneA map with i18n locales. See section Localization for more information.
marginnumber | ObjectObjectWhen a number, applies the margin to margin.axis, margin.item.horizontal, and margin.item.vertical.
margin.axisnumber20The minimal margin in pixels between items and the time axis.
margin.itemnumber10The minimal margin in pixels between items in both horizontal and vertical direction.
margin.item.horizontalnumber10The minimal horizontal margin in pixels between items.
margin.item.verticalnumber10The minimal vertical margin in pixels between items.
maxDate | Number | String | MomentnoneSet a maximum Date for the visible range. + It will not be possible to move beyond this maximum. +
maxHeightnumber | StringnoneSpecifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".
minDate | Number | String | MomentnoneSet a minimum Date for the visible range. + It will not be possible to move beyond this minimum. +
minHeightnumber | StringnoneSpecifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".
moveablebooleantrue + Specifies whether the Timeline can be moved and zoomed by dragging the window. + See also option zoomable. +
onAddfunctionnoneCallback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section Editing Items for more information. Only applicable when both options selectable and editable.add are set true. +
onUpdatefunctionnoneCallback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section Editing Items for more information. Only applicable when both options selectable and editable.updateTime or editable.updateGroup are set true. +
onMovefunctionnoneCallback function triggered when an item has been moved: after the user has dragged the item to an other position. See section Editing Items for more information. Only applicable when both options selectable and editable.updateTime or editable.updateGroup are set true. +
onMovingfunctionnoneCallback function triggered repeatedly when an item is being moved. See section Editing Items for more information. Only applicable when both options selectable and editable.updateTime or editable.updateGroup are set true. +
onRemovefunctionnoneCallback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section Editing Items for more information. Only applicable when both options selectable and editable.remove are set true. +
orderfunctionnone +

Provide a custom sort function to order the items. The order of the + items is determining the way they are stacked. The function + order is called with two arguments containing the data of two items to be + compared. +

+

WARNING: Use with caution. Custom ordering is not suitable for large amounts of items. On load, the Timeline will render all items once to determine their width and height. Keep the number of items in this configuration limited to a maximum of a few hundred items.

+
orientationString | Object'bottom'Orientation of the timelines axis and items. When orientation is a string, the value is applied to both items and axis. Can be 'top', 'bottom' (default), or 'both'.
orientation.axisString'bottom'Orientation of the timeline axis: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.
orientation.itemString'bottom'Orientation of the timeline items: 'top' or 'bottom' (default). Determines whether items are aligned to the top or bottom of the Timeline.
selectablebooleantrueIf true, the items on the timeline can be selected. Multiple items can be selected by long pressing them, or by using ctrl+click or shift+click. The event select is fired each time the selection has changed (see section Events).
showCurrentTimebooleantrueShow a vertical bar at the current time.
showMajorLabelsbooleantrueBy default, the timeline shows both minor and major date labels on the + time axis. + For example the minor labels show minutes and the major labels show hours. + When showMajorLabels is false, no major labels + are shown.
showMinorLabelsbooleantrueBy default, the timeline shows both minor and major date labels on the + time axis. + For example the minor labels show minutes and the major labels show hours. + When showMinorLabels is false, no minor labels + are shown. When both showMajorLabels and + showMinorLabels are false, no horizontal axis will be + visible.
stackbooleantrueIf true (default), items will be stacked on top of each other such that they do not overlap.
snapfunction | nullfunctionWhen moving items on the Timeline, they will be snapped to nice dates like full hours or days, depending on the current scale. The snap function can be replaced with a custom function, or can be set to null to disable snapping. The signature of the snap function is: + 
function snap(date: Date, scale: string, step: number) : Date | number
+ The parameter scale can be can be 'millisecond', 'second', 'minute', 'hour', 'weekday, 'day, 'month, or 'year'. The parameter step is a number like 1, 2, 4, 5. +
startDate | Number | String | MomentnoneThe initial start date for the axis of the timeline. + If not provided, the earliest date present in the events is taken as start date.
templatefunctionnoneA template function used to generate the contents of the items. The function is called by the Timeline with an items data as argument, and must return HTML code as result. When the option template is specified, the items do not need to have a field content. See section Templates for a detailed explanation.
timeAxis.scaleStringnoneSet a fixed scale for the time axis of the Timeline. Choose from 'millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'month', 'year'. Example usage: + 
var options = {
+  timeAxis: {scale: 'minute', step: 5}
+}
+
timeAxis.stepnumber1 + Set a fixed step size for the time axis. Only applicable when used together with timeAxis.scale. + Choose for example 1, 2, 5, or 10.
typeStringnoneSpecifies the default type for the timeline items. Choose from 'box', 'point', 'range', and 'background'. Note that individual items can override this default type. If undefined, the Timeline will auto detect the type from the items data: if a start and end date is available, a 'range' will be created, and else, a 'box' is created. Items of type 'background' are not editable. +
widthString'100%'The width of the timeline in pixels or as a percentage.
zoomablebooleantrue + Specifies whether the Timeline can be zoomed by pinching or scrolling in the window. + Only applicable when option moveable is set true. +
zoomMaxnumber315360000000000Set a maximum zoom interval for the visible range in milliseconds. + It will not be possible to zoom out further than this maximum. + Default value equals about 10000 years. +
zoomMinnumber10Set a minimum zoom interval for the visible range in milliseconds. + It will not be possible to zoom in further than this minimum. +
+ +

Methods

+

+ The Timeline supports the following methods. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturn TypeDescription
addCustomTime([time] [, id])number | String + Add new vertical bar representing a custom time that can be dragged by the user. + Parameter time can be a Date, Number, or String, and is new Date() by default. + Parameter id can be Number or String and is undefined by default.
+ Returns id of the created bar. +
destroy()noneDestroy the Timeline. The timeline is removed from memory. all DOM elements and event listeners are cleaned up. +
fit([options])noneAdjust the visible window such that it fits all items. See also function focus(id). + Available options: +
    +
  • animation: boolean | {duration: number, easingFunction: string}
    If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'. Available easing functions: "linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint". +
    • +
+
focus(id | ids [, options])noneAdjust the visible window such that the selected item (or multiple items) are centered on screen. See also function fit(). Available options: +
    +
  • animation: boolean | {duration: number, easingFunction: string}
    If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'. Available easing functions: "linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint".
    • +
+
getCurrentTime()DateGet the current time. Only applicable when option showCurrentTime is true. +
getCustomTime([id])DateRetrieve the custom time from the custom time bar with given id. Id is undefined by default. +
getEventProperties(event)Object + Returns an Object with relevant properties from an event: +
    +
  • group (Number | null): the id of the clicked group.
    • +
  • item (Number | null): the id of the clicked item.
    • +
  • pageX (Number): absolute horizontal position of the click event.
    • +
  • pageY (Number): absolute vertical position of the click event.
    • +
  • x (Number): relative horizontal position of the click event.
    • +
  • y (Number): relative vertical position of the click event.
    • +
  • time (Date): Date of the clicked event.
    • +
  • snappedTime (Date): Date of the clicked event, snapped to a nice value.
    • +
  • what (String | null): name of the clicked thing: item, background, axis, group-label, custom-time, or current-time.
    • +
  • event (Object): the original click event.
    • +
+
getSelection()number[]Get an array with the ids of the currently selected items.
getVisibleItems()number[]Get an array with the ids of the currently visible items.
getWindow()ObjectGet the current visible window. Returns an object with properties start: Date and end: Date.
moveTo(time [, options])noneMove the window such that given time is centered on screen. Parameter time can be a Date, Number, or String. Available options: +
    +
  • animation: boolean | {duration: number, easingFunction: string}
    If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'. Available easing functions: "linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint".
    • +
+
on(event, callback)noneCreate an event listener. The callback function is invoked every time the event is triggered. Avialable events: rangechange, rangechanged, select. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. See section Events for more information.
off(event, callback)noneRemove an event listener created before via function on(event, callback). See section Events for more information.
redraw()noneForce a redraw of the Timeline. The size of all items will be recalculated. + Can be useful to manually redraw when option autoResize=false and the window + has been resized, or when the items CSS has been changed. +
removeCustomTime(id)none + Remove vertical bars previously added to the timeline via addCustomTime method. Parameter id is the ID of the custom vertical bar returned by addCustomTime method. +
setCurrentTime(time)noneSet a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time. + time can be a Date object, numeric timestamp, or ISO date string. + Only applicable when option showCurrentTime is true.
setCustomTime(time [, id])noneAdjust the time of a custom time bar. + Parameter time can be a Date object, numeric timestamp, or ISO date string. + Parameter id is the idof the custom time bar, and is undefined by default. +
setData({
  groups: groups,
  items: items
})		noneSet both groups and items at once. Both properties are optional. This is a convenience method for individually calling both setItems(items) and setGroups(groups). + Both items and groups can be an Array with Objects, + a DataSet, or a DataView. For each of the groups, the items of the + timeline are filtered on the property group, which + must correspond with the id of the group. +
setGroups(groups)noneSet a data set with groups for the Timeline. + groups can be an Array with Objects, + a DataSet, or a DataView. For each of the groups, the items of the + timeline are filtered on the property group, which + must correspond with the id of the group. +
setItems(items)noneSet a data set with items for the Timeline. + items can be an Array with Objects, + a DataSet, or a DataView. +
setOptions(options)noneSet or update options. It is possible to change any option of the timeline at any time. You can for example switch orientation on the fly. +
setSelection(id | ids [, options])noneSelect one or multiple items by their id. The currently selected items will be unselected. To unselect all selected items, call `setSelection([])`. Available options: +
    +
  • focus: boolean
    If true, focus will be set to the selected item(s)
    • +
  • animation: boolean | {duration: number, easingFunction: string}
    If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'. Only applicable when option focus is true. Available easing functions: "linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint".
    • +
+
setWindow(start, end [, options])noneSet the current visible window. The parameters start and end can be a Date, Number, or String. If the parameter value of start or end is null, the parameter will be left unchanged. Available options: +
    +
  • animation: boolean | {duration: number, easingFunction: string}
    If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'. Available easing functions: "linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint".
    • +
+
+ + + +

Events

+

+ Timeline fires events when changing the visible window by dragging, when + selecting items, and when dragging the custom time bar. +

+ +

+ Here an example on how to listen for a select event. +

+ +
+timeline.on('select', function (properties) {
+  alert('selected items: ' + properties.nodes);
+});
+
+ +

+ A listener can be removed via the function off: +

+ +
+function onSelect (properties) {
+  alert('selected items: ' + properties.nodes);
+}
+
+// add event listener
+timeline.on('select', onSelect);
+
+// do stuff...
+
+// remove event listener
+timeline.off('select', onSelect);
+
+ + +

+ The following events are available. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
nameDescriptionProperties
clickFired when clicked inside the Timeline. + + Passes a properties object as returned by the method Timeline.getEventProperties(event). +
contextmenuFired when right-clicked inside the Timeline. Note that in order to prevent the context menu from showing up, default behavior of the event must be stopped: +
timeline.on('contextmenu', function (props) {
+  alert('Right click!');
+  props.event.preventDefault();
+});
+
+ 		+ Passes a properties object as returned by the method Timeline.getEventProperties(event). +
doubleClickFired when double clicked inside the Timeline. + + Passes a properties object as returned by the method Timeline.getEventProperties(event). +
rangechangeFired repeatedly when the timeline window is being changed. + +
    +
  • start (Number): timestamp of the current start of the window.
    • +
  • end (Number): timestamp of the current end of the window.
    • +
  • byUser (Boolean): change happened because of user drag/zoom.
    • +
+
rangechangedFired once after the timeline window has been changed. + +
    +
  • start (Number): timestamp of the current start of the window.
    • +
  • end (Number): timestamp of the current end of the window.
    • +
  • byUser (Boolean): change happened because of user drag/zoom.
    • +
+
selectFired after the user selects or deselects items by tapping or holding them. + When a use taps an already selected item, the select event is fired again. + Not fired when the method setSelectionis executed. + +
    +
  • items: an array with the ids of the selected items
    • +
+
timechangeFired repeatedly when the user is dragging the custom time bar. + Only available when the custom time bar is enabled. + +
    +
  • id (Number | String): custom time bar id.
    • +
  • time (Date): the custom time.
    • +
+
timechangedFired once after the user has dragged the custom time bar. + Only available when the custom time bar is enabled. + +
    +
  • id (Number | String): custom time bar id.
    • +
  • time (Date): the custom time.
    • +
+
+ +

Editing Items

+

+ When the Timeline is configured to be editable (both options selectable and editable are true), the user can: +

+ + +

Option editable accepts a boolean or an object. When editable is a boolean, all manipulation actions will be either enabled or disabled. When editable is an object, one can enable individual manipulation actions:

+ +
// enable or disable all manipulation actions
+var options = {
+  editable: true       // true or false
+};
+
+// enable or disable individual manipulation actions
+var options = {
+  editable: {
+    add: true,         // add new items by double tapping
+    updateTime: true,  // drag items horizontally
+    updateGroup: true, // drag items from one group to another
+    remove: true       // delete an item by tapping the delete button top right
+  }
+};
+ + +

+ One can specify callback functions to validate changes made by the user. There are a number of callback functions for this purpose: +

+ + + +

+ Each of the callbacks is invoked with two arguments: +

+ + +

+ Example code: +

+ +
var options = {
+  onUpdate: function (item, callback) {
+    item.content = prompt('Edit items text:', item.content);
+    if (item.content != null) {
+      callback(item); // send back adjusted item
+    }
+    else {
+      callback(null); // cancel updating the item
+    }
+  }
+};
+
+ + A full example is available here: 08_manipulation_callbacks.html. + + +

Templates

+ +

+ Timeline supports templates to format item contents. Any template engine (such as handlebars or mustache) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an items data as argument, and outputs formatted HTML: +

+ +
var options = {
+  template: function (item) {
+    var html = ... // generate HTML markup for this item
+    return html;
+  }
+};
+
+ +

Create HTML manually

+ + The HTML for an item can be created manually: + +
var options = {
+  template: function (item) {
+    return '<h1>' + item.header + '</h1><p>' + item.description + '</p>';
+  }
+};
+
+ +

Using a template engine

+ + Using handlebars, one can write the template in HTML: + +
+<script id="item-template" type="text/x-handlebars-template">
+  <h1>{{header}}</h1>
+  <p>{{description}}</p>
+</script>
+
+ + Compile the template: + +
+var source = document.getElementById('item-template').innerHTML;
+var template = Handlebars.compile(source);
+
+ + And then specify the template in the Timeline options + +
var options = {
+  template: template
+};
+
+ +

Multiple templates

+ + In order to support multiple templates, the template handler can be extended to switch between different templates, depending on a specific item property: + +
+var templates = {
+  template1: Handlebars.compile(...),
+  template2: Handlebars.compile(...),
+  template2: Handlebars.compile(...),
+  ...
+};
+
+var options = {
+  template: function (item) {
+    var template = templates[item.template];  // choose the right template
+    return template(item);                    // execute the template
+  }
+};
+
+ + Now the items can be extended with a property template, specifying which template to use for the item. + + +

Localization

+

+ Timeline can be localized. For localization, Timeline depends largely on the localization of moment.js. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales. +

+ +

+ To set a locale for the Timeline, specify the option locale: +

+ +
var options = {
+  locale: 'nl'
+};
+
+ +

Create a new locale

+ + To load a locale into the Timeline not supported by default, one can add a new locale to the option locales: + +
var options = {
+  locales: {
+    // create a new locale (text strings should be replaced with localized strings)
+    mylocale: {
+      current: 'current',
+      time: 'time',
+    }
+  },
+
+  // use the new locale
+  locale: 'mylocale'
+};
+
+ +

Available locales

+ +

+ Timeline comes with support for the following locales: +

+ + + + + + + + + + + +
LanguageCode
English + en
+ en_EN
+ en_US +
Dutch + nl
+ nl_NL
+ nl_BE +
+ + +

Styles

+

+ All parts of the Timeline have a class name and a default css style. + The styles can be overwritten, which enables full customization of the layout + of the Timeline. +

+ +

For example, to change the border and background color of all items, include the + following code inside the head of your html code or in a separate stylesheet.

+
<style>
+  .vis-item {
+    border-color: orange;
+    background-color: yellow;
+  }
+</style>
+
+ +

Grid Backgrounds

+

+ The background grid of the time axis can be styled, for example to highlight + weekends or to create grids with an alternating white/lightgray background. +

+

+ Depending on the zoom level, the grids get certain css classes attached. + The following classes are available: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Descriptionvalues
Alternating columnseven, odd
Current datetoday, tomorrow, yesterday, current-week, current-month, current-year
Hoursh0, h1, ..., h23
Grouped hoursh0-h4 to h20-h24
Weekdaymonday, tuesday, wednesday, thursday, friday, saturday, sunday
Daysdate1, date2, ..., date31
Monthsjanuari, februari, march, april, may, june, july, august, september, october, november, december
Yearsyear2014, year2015, ...
+ +

Examples:

+ + 
<style>
+  /* alternating column backgrounds */
+  .vis-time-axis .grid.odd {
+    background: #f5f5f5;
+  }
+
+  /* gray background in weekends, white text color */
+  .vis-time-axis .vis-grid.saturday,
+  .vis-time-axis .vis-grid.sunday {
+    background: gray;
+  }
+  .vis-time-axis .vis-text.saturday,
+  .vis-time-axis .vis-text.sunday {
+    color: white;
+  }
+</style>
+
+ + +

Data Policy

+

+ All code and data is processed and rendered in the browser. + No data is sent to any server. +

+ + + +
+
+
+
+
+
+
+
+ + + + + + + \ No newline at end of file