diff --git a/docs/img/graph/graph.png b/docs/img/graph/graph.png new file mode 100644 index 00000000..3acaa131 Binary files /dev/null and b/docs/img/graph/graph.png differ diff --git a/docs/img/graph/graph120x60.png b/docs/img/graph/graph120x60.png new file mode 100644 index 00000000..5a8aa291 Binary files /dev/null and b/docs/img/graph/graph120x60.png differ diff --git a/docs/img/timeline/timeline.png b/docs/img/timeline/timeline.png new file mode 100644 index 00000000..d77c304c Binary files /dev/null and b/docs/img/timeline/timeline.png differ diff --git a/docs/img/timeline/timeline120x60.png b/docs/img/timeline/timeline120x60.png new file mode 100644 index 00000000..f9d0c6a7 Binary files /dev/null and b/docs/img/timeline/timeline120x60.png differ diff --git a/docs/timeline.html b/docs/timeline.html new file mode 100644 index 00000000..4f3cdb21 --- /dev/null +++ b/docs/timeline.html @@ -0,0 +1,487 @@ + + +
+Author | +Jos de Jong, Almende B.V. | +
Webpage | +http://visjs.org | +
License | +Apache License, Version 2.0 | +
+ 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. +
+ ++ 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="../../vis.js"></script> +</head> +<body> +<div id="visualization"></div> + +<script type="text/javascript"> + var container = document.getElementById('visualization'); + var items = [ + {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'} + ]; + var options = {}; + var timeline = new vis.Timeline(container, items, options); +</script> +</body> +</html> ++ + +
+ Install or download the vis.js library. + in a subfolder of your project. Include the library script in the head of your html code: +
+ ++<script type="text/javascript" src="vis/vis.js"></script> ++ +The constructor of the Timeline is
vis.Timeline
+var timeline = new vis.Timeline(container, items, options);+ + +The constructor accepts three parameters: +
container
is the DOM element in which to create the graph.
+ items
is an Array containing items. The properties of an
+ item are described in section Data Format.
+ options
is an optional Object containing a name-value map
+ with options. Options can also be set using the method
+ setOptions
.
+
+ The Timeline uses regular Arrays and Objects as data format.
+ Data items can contain the properties start
,
+ end
(optional), content
,
+ group
(optional), and className
(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: a field 'group' + // Optional: a field 'className' + // Optional: a field 'editable' + } + // more items... +]); ++ +
+ The item properties are defined as: +
+ +Name | +Type | +Required | +Description | +
---|---|---|---|
start | +Date | +yes | +The start date of the item, for example new Date(2010,09,23) . |
+
end | +Date | +no | +The 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. |
+
content | +String | +yes | +The contents of the item. This can be plain text or html code. | +
group | +any type | +no | +This 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. + |
+
className | +String | +no | +This field is optional. A className can be used to give items
+ and individual css style. For example, when an item has className
+ 'red', one can define a css style
+
+ .red {
+ background-color: red;
+ border-color: dark-red;
+ }
+ .
+ More details on how to style items can be found in the section
+ Styles.
+ |
+
+ 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' +}; ++ +
+ The following options are available. +
+ +Name | +Type | +Default | +Description | +
---|---|---|---|
align | +String | +"center" | +Alignment of items with style 'box'. Available values are + 'center' (default), 'left', or 'right'). | +
autoResize | +boolean | +false | +If true, the Timeline will automatically detect when its + container is resized, and redraw itself accordingly. | +
end | +Date | +none | +The 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. | +
height | +String | +none | +The 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.
+ |
+
margin.axis | +Number | +20 | +The minimal margin in pixels between items and the time axis. | +
margin.item | +Number | +10 | +The minimal margin in pixels between items. | +
max | +Date | +none | +Set a maximum Date for the visible range. + It will not be possible to move beyond this maximum. + | +
maxHeight | +Number | +none | +Specifies a maximum height for the Timeline in pixels. + | +
min | +Date | +none | +Set a minimum Date for the visible range. + It will not be possible to move beyond this minimum. + | +
order | +function | +none | +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 parameters, both of type + `vis.components.items.Item`. + | +
orientation | +String | +'bottom' | +Orientation of the timeline: 'top' or 'bottom' (default). + If orientation is 'bottom', the time axis is drawn at the bottom, + and if 'top', the axis is drawn on top. | +
padding | +Number | +5 | +The padding of items, needed to correctly calculate the size + of item ranges. Must correspond with the css of item ranges. | +
showMajorLabels | +boolean | +true | +By 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. |
+
showMinorLabels | +boolean | +true | +By 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. |
+
start | +Date | +none | +The initial start date for the axis of the timeline. + If not provided, the earliest date present in the events is taken as start date. | +
style | +String | +'box' | +Specifies the style for the timeline items. Choose from 'dot' or 'box'. + Note that the content of the items can override this global style, + and can contain additional html formatting. + | +
width | +String | +'100%' | +The width of the timeline in pixels or as a percentage. | +
zoomMax | +Number | +315360000000000 | +Set 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. + | +
zoomMin | +Number | +10 | +Set a minimum zoom interval for the visible range in milliseconds. + It will not be possible to zoom in further than this minimum. + | +
+ The Timeline supports the following methods. +
+ +Method | +Return Type | +Description | +
---|---|---|
setGroups(groups) | +none | +Set a data set with groups for the Timeline.
+ groups can be an Array with Objects,
+ a DataSet, or a DataView.
+ |
+
setItems(items) | +none | +Set a data set with items for the Timeline.
+ items can be an Array with Objects,
+ a DataSet, or a DataView.
+ |
+
setOptions(options) | +none | +Set 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. + | +
+ 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> + .graph .item { + border-color: orange; + background-color: yellow; + } +</style> ++ + +
+ All code and data are processed and rendered in the browser. No data is sent to any server. +
+ +