jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Added documentation for the Timeline

css_transitions
josdejong 11 years ago
parent
54696f86ce
commit
c92f5dd8b6
5 changed files with 487 additions and 0 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      docs/img/graph/graph.png
  2. BIN
      docs/img/graph/graph120x60.png
  3. BIN
      docs/img/timeline/timeline.png
  4. BIN
      docs/img/timeline/timeline120x60.png
  5. +487
    -0
      docs/timeline.html

BIN
docs/img/graph/graph.png View File

Before After
Width: 564  |  Height: 328  |  Size: 23 KiB

BIN
docs/img/graph/graph120x60.png View File

Before After
Width: 120  |  Height: 60  |  Size: 4.6 KiB

BIN
docs/img/timeline/timeline.png View File

Before After
Width: 642  |  Height: 314  |  Size: 23 KiB

BIN
docs/img/timeline/timeline120x60.png View File

Before After
Width: 120  |  Height: 60  |  Size: 6.5 KiB

+ 487
- 0
docs/timeline.html View File

@ -0,0 +1,487 @@
<html>
<head>
<title>vis.js | timeline documentation</title>
<link href='css/prettify.css' type='text/css' rel='stylesheet'>
<link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>Timeline documentation</h1>
<table>
<tr>
<td>Author</td>
<td>Jos de Jong, <a href="http://www.almende.com" target="_blank">Almende B.V.</a></td>
</tr>
<tr>
<td>Webpage</td>
<td><a href="http://visjs.org" target="_blank">http://visjs.org</a></td>
</tr>
<tr>
<td>License</td>
<td> <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a></td>
</tr>
</table>
<h2 id="Contents">Contents</h2>
<ul>
<li><a href="#Overview">Overview</a></li>
<li><a href="#Example">Example</a></li>
<li><a href="#Loading">Loading</a></li>
<li><a href="#Data_Format">Data Format</a></li>
<li><a href="#Configuration_Options">Configuration Options</a></li>
<li><a href="#Methods">Methods</a></li>
<li><a href="#Styles">Styles</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
<h2 id="Overview">Overview</h2>
<p>
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.
</p>
<h2 id="Example">Example</h2>
<p>
The following code shows how to create a Timeline and provide it with data.
More examples can be found in the <a href="../examples">examples</a> directory.
</p>
<pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Timeline | Basic demo&lt;/title&gt;
&lt;style type="text/css"&gt;
body, html {
font-family: sans-serif;
}
&lt;/style&gt;
&lt;script src="../../vis.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="visualization"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
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);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 id="Loading">Loading</h2>
<p>
Install or download the <a href="http://visjs.org" target="_blank">vis.js</a> library.
in a subfolder of your project. Include the library script in the head of your html code:
</p>
<pre class="prettyprint lang-html">
&lt;script type="text/javascript" src="vis/vis.js"&gt;&lt;/script&gt;
</pre>
The constructor of the Timeline is <code>vis.Timeline</code>
<pre class="prettyprint lang-js">var timeline = new vis.Timeline(container, items, options);</pre>
The constructor accepts three parameters:
<ul>
<li>
<code>container</code> is the DOM element in which to create the graph.
</li>
<li>
<code>items</code> is an Array containing items. The properties of an
item are described in section <a href="#Data_Format">Data Format</a>.
</li>
<li>
<code>options</code> is an optional Object containing a name-value map
with options. Options can also be set using the method
<code>setOptions</code>.
</li>
</ul>
<h2 id="Data_Format">Data Format</h2>
<p>
The Timeline uses regular Arrays and Objects as data format.
Data items can contain the properties <code>start</code>,
<code>end</code> (optional), <code>content</code>,
<code>group</code> (optional), and <code>className</code> (optional).
</p>
<p>
A table is constructed as:
</p>
<pre class="prettyprint lang-js">
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...
]);
</pre>
<h3>Properties</h3>
<p>
The item properties are defined as:
</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
<tr>
<td>start</td>
<td>Date</td>
<td>yes</td>
<td>The start date of the item, for example <code>new Date(2010,09,23)</code>.</td>
</tr>
<tr>
<td>end</td>
<td>Date</td>
<td>no</td>
<td>The end date of the item. The end date is optional, and can be left <code>null</code>.
If end date is provided, the item is displayed as a range.
If not, the item is displayed as a box.</td>
</tr>
<tr>
<td>content</td>
<td>String</td>
<td>yes</td>
<td>The contents of the item. This can be plain text or html code.</td>
</tr>
<tr>
<td>group</td>
<td>any type</td>
<td>no</td>
<td>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.<br>
</td>
</tr>
<tr>
<td>className</td>
<td>String</td>
<td>no</td>
<td>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
<code>
.red {
background-color: red;
border-color: dark-red;
}
</code>.
More details on how to style items can be found in the section
<a href="#Styles">Styles</a>.
</td>
</tr>
</table>
<h2 id="Configuration_Options">Configuration Options</h2>
<p>
Options can be used to customize the timeline.
Options are defined as a JSON object. All options are optional.
</p>
<pre class="prettyprint lang-js">
var options = {
width: '100%',
height: '30px'
};
</pre>
<p>
The following options are available.
</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>align</td>
<td>String</td>
<td>"center"</td>
<td>Alignment of items with style 'box'. Available values are
'center' (default), 'left', or 'right').</td>
</tr>
<tr>
<td>autoResize</td>
<td>boolean</td>
<td>false</td>
<td>If true, the Timeline will automatically detect when its
container is resized, and redraw itself accordingly.</td>
</tr>
<tr>
<td>end</td>
<td>Date</td>
<td>none</td>
<td>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.</td>
</tr>
<tr>
<td>height</td>
<td>String</td>
<td>none</td>
<td>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 <code>maxHeight</code>
to prevent the timeline from getting too high in case of automatically
calculated height.
</td>
</tr>
<tr>
<td>margin.axis</td>
<td>Number</td>
<td>20</td>
<td>The minimal margin in pixels between items and the time axis.</td>
</tr>
<tr>
<td>margin.item</td>
<td>Number</td>
<td>10</td>
<td>The minimal margin in pixels between items.</td>
</tr>
<tr>
<td>max</td>
<td>Date</td>
<td>none</td>
<td>Set a maximum Date for the visible range.
It will not be possible to move beyond this maximum.
</td>
</tr>
<tr>
<td>maxHeight</td>
<td>Number</td>
<td>none</td>
<td>Specifies a maximum height for the Timeline in pixels.
</td>
</tr>
<tr>
<td>min</td>
<td>Date</td>
<td>none</td>
<td>Set a minimum Date for the visible range.
It will not be possible to move beyond this minimum.
</td>
</tr>
<tr>
<td>order</td>
<td>function</td>
<td>none</td>
<td>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`.
</td>
</tr>
<tr>
<td>orientation</td>
<td>String</td>
<td>'bottom'</td>
<td>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.</td>
</tr>
<tr>
<td>padding</td>
<td>Number</td>
<td>5</td>
<td>The padding of items, needed to correctly calculate the size
of item ranges. Must correspond with the css of item ranges.</td>
</tr>
<tr>
<td>showMajorLabels</td>
<td>boolean</td>
<td>true</td>
<td>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 <code>showMajorLabels</code> is <code>false</code>, no major labels
are shown.</td>
</tr>
<tr>
<td>showMinorLabels</td>
<td>boolean</td>
<td>true</td>
<td>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 <code>showMinorLabels</code> is <code>false</code>, no minor labels
are shown. When both <code>showMajorLabels</code> and
<code>showMinorLabels</code> are false, no horizontal axis will be
visible.</td>
</tr>
<tr>
<td>start</td>
<td>Date</td>
<td>none</td>
<td>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.</td>
</tr>
<tr>
<td>style</td>
<td>String</td>
<td>'box'</td>
<td>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.
</td>
</tr>
<tr>
<td>width</td>
<td>String</td>
<td>'100%'</td>
<td>The width of the timeline in pixels or as a percentage.</td>
</tr>
<tr>
<td>zoomMax</td>
<td>Number</td>
<td>315360000000000</td>
<td>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.
</td>
</tr>
<tr>
<td>zoomMin</td>
<td>Number</td>
<td>10</td>
<td>Set a minimum zoom interval for the visible range in milliseconds.
It will not be possible to zoom in further than this minimum.
</td>
</tr>
</table>
<h2 id="Methods">Methods</h2>
<p>
The Timeline supports the following methods.
</p>
<table>
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</tr>
<tr>
<td>setGroups(groups)</td>
<td>none</td>
<td>Set a data set with groups for the Timeline.
<code>groups</code> can be an Array with Objects,
a DataSet, or a DataView.
</td>
</tr>
<tr>
<td>setItems(items)</td>
<td>none</td>
<td>Set a data set with items for the Timeline.
<code>items</code> can be an Array with Objects,
a DataSet, or a DataView.
</td>
</tr>
<tr>
<td>setOptions(options)</td>
<td>none</td>
<td>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.
</td>
</tr>
</table>
<h2 id="Styles">Styles</h2>
<p>
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.
</p>
<p>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.</p>
<pre class="prettyprint lang-html">&lt;style&gt;
.graph .item {
border-color: orange;
background-color: yellow;
}
&lt;/style&gt;
</pre>
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data are processed and rendered in the browser. No data is sent to any server.
</p>
</div>
</body>
</html>

Write Preview
Loading…
Cancel
Save