Browse Source

Released version 1.0.0, minor style updates

gh-pages
jos 10 years ago
parent
commit
9d8b3aa69c
38 changed files with 3937 additions and 3658 deletions
  1. +19
    -8
      css/style.css
  2. +71
    -69
      dist/vis.css
  3. +2666
    -3133
      dist/vis.js
  4. +1
    -1
      dist/vis.min.css
  5. +11
    -11
      dist/vis.min.js
  6. +357
    -220
      docs/dataset.html
  7. +12
    -2
      docs/graph.html
  8. +70
    -8
      docs/timeline.html
  9. BIN
      download/vis.zip
  10. +6
    -6
      examples/timeline/01_basic.html
  11. +18
    -16
      examples/timeline/02_interactive.html
  12. +69
    -0
      examples/timeline/03_a_lot_of_data.html
  13. +0
    -68
      examples/timeline/03_much_data.html
  14. +1
    -1
      examples/timeline/05_groups.html
  15. +1
    -2
      examples/timeline/08_edit_items.html
  16. +66
    -0
      examples/timeline/09_order_groups.html
  17. +51
    -0
      examples/timeline/10_limit_move_and_zoom.html
  18. +58
    -0
      examples/timeline/11_points.html
  19. +88
    -0
      examples/timeline/12_custom_styling.html
  20. +88
    -0
      examples/timeline/13_past_and_future.html
  21. +109
    -0
      examples/timeline/14_a_lot_of_grouped_data.html
  22. +115
    -0
      examples/timeline/15_item_class_names.html
  23. +11
    -2
      examples/timeline/index.html
  24. +0
    -69
      examples/timeline/test.html
  25. +0
    -35
      examples/timeline/test2.html
  26. BIN
      img/external-link-icons/external-link-icon-white.png
  27. BIN
      img/external-link-icons/external-link-icon.png
  28. BIN
      img/gallery/timeline/02_dataset.png
  29. BIN
      img/gallery/timeline/02_interactive.png
  30. +0
    -0
      img/gallery/timeline/03_a_lot_of_data.png
  31. BIN
      img/gallery/timeline/09_order_groups.png
  32. BIN
      img/gallery/timeline/10_limit_move_and_zoom.png
  33. BIN
      img/gallery/timeline/11_points.png
  34. BIN
      img/gallery/timeline/12_custom_styling.png
  35. BIN
      img/gallery/timeline/13_past_and_future.png
  36. BIN
      img/gallery/timeline/14_a_lot_of_grouped_data.png
  37. BIN
      img/gallery/timeline/15_item_class_names.png
  38. +49
    -7
      index.html

+ 19
- 8
css/style.css View File

@ -1,11 +1,21 @@
body {
font-family: 'dejavu sans', verdana, arial, serif;
font-size: 11pt;
}
h1 {
font-size: 48px;
line-height: 0.9em;
}
#menu {
position: absolute;
left: -170px;
left: -200px;
top: 35px;
background-color: #a7c8f9;
padding: 15px;
border-radius: 3px;
padding: 0 20px;
border-radius: 2px;
background-color: #f5f5f5;
box-shadow: 5px 5px 15px rgba(128,128,128,0.5);
}
#forkme {
@ -16,7 +26,8 @@
}
div.nav {
text-align: center;
text-align: left;
padding-left: 24px;
}
div.nav ul {
@ -52,14 +63,14 @@ div.nav ul li ul li {
div.nav a {
color: #2B7CE9;
color: white;
font-weight: bold;
}
.subtitle {
color: gray;
text-transform: uppercase;
font-size: 11pt;
font-weight: normal;
font-style: italic;
margin-left: 40px;
}
.download td {

+ 71
- 69
dist/vis.css View File

@ -7,81 +7,76 @@
overflow: hidden;
border: 1px solid #bfbfbf;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* FIXME: there is an issue with the height of the items when panel height is animated
-webkit-transition: height 4s ease-in-out;
transition: height 4s ease-in-out;
/**/
}
.vis.timeline .vpanel {
position: absolute;
overflow: hidden;
}
.vis.timeline .groupset {
position: absolute;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.vis.timeline .labels {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
.vis.timeline .vpanel.side {
border-right: 1px solid #bfbfbf;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.vis.timeline .labels .label-set {
position: absolute;
top: 0;
left: 0;
.vis.timeline .vpanel.side.hidden {
display: none;
}
.vis.timeline .labelset {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-top: none;
border-bottom: 1px solid #bfbfbf;
box-sizing: border-box;
}
.vis.timeline .labels .label-set .vlabel {
position: absolute;
.vis.timeline .labelset .vlabel {
position: relative;
left: 0;
top: 0;
width: 100%;
color: #4d4d4d;
box-sizing: border-box;
}
.vis.timeline.top .labels .label-set .vlabel,
.vis.timeline.top .groupset .itemset-axis {
.vis.timeline.top .labelset .vlabel {
border-top: 1px solid #bfbfbf;
border-bottom: none;
}
.vis.timeline.bottom .labels .label-set .vlabel,
.vis.timeline.bottom .groupset .itemset-axis {
.vis.timeline.bottom .labelset .vlabel {
border-top: none;
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .labels .label-set .vlabel .inner {
.vis.timeline .labelset .vlabel .inner {
display: inline-block;
padding: 5px;
}
.vis.timeline .itemset {
position: absolute;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
box-sizing: border-box;
/* FIXME: get transition working for rootpanel and itemset
-webkit-transition: height 4s ease-in-out;
transition: height 4s ease-in-out;
/**/
}
.vis.timeline .background {
@ -90,8 +85,23 @@
.vis.timeline .foreground {
}
.vis.timeline .itemset-axis {
position: absolute;
.vis.timeline .axis {
overflow: visible;
}
.vis.timeline .group {
position: relative;
box-sizing: border-box;
}
.vis.timeline.top .group {
border-top: 1px solid #bfbfbf;
border-bottom: none;
}
.vis.timeline.bottom .group {
border-top: none;
border-bottom: 1px solid #bfbfbf;
}
@ -99,9 +109,15 @@
position: absolute;
color: #1A1A1A;
border-color: #97B0F8;
border-width: 1px;
background-color: #D5DDF6;
display: inline-block;
padding: 5px;
/* TODO: enable css transitions
-webkit-transition: top .4s ease-in-out, bottom .4s ease-in-out;
transition: top .4s ease-in-out, bottom .4s ease-in-out;
/**/
}
.vis.timeline .item.selected {
@ -116,49 +132,30 @@
.vis.timeline .item.point.selected {
background-color: #FFF785;
z-index: 999;
}
.vis.timeline .item.point.selected .dot {
border-color: #FFC200;
}
.vis.timeline .item.cluster {
/* TODO: use another color or pattern? */
background: #97B0F8 url('img/cluster_bg.png');
color: white;
}
.vis.timeline .item.cluster.point {
border-color: #D5DDF6;
}
.vis.timeline .item.box {
text-align: center;
border-style: solid;
border-width: 1px;
border-radius: 5px;
-moz-border-radius: 5px; /* For Firefox 3.6 and older */
border-radius: 2px;
}
.vis.timeline .item.point {
background: none;
}
.vis.timeline .dot,
.vis.timeline .item.dot {
padding: 0;
border: 5px solid #97B0F8;
position: absolute;
border-radius: 5px;
-moz-border-radius: 5px; /* For Firefox 3.6 and older */
padding: 0;
border-width: 4px;
border-style: solid;
border-radius: 4px;
}
.vis.timeline .item.range,
.vis.timeline .item.rangeoverflow{
border-style: solid;
border-width: 1px;
border-radius: 2px;
-moz-border-radius: 2px; /* For Firefox 3.6 and older */
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@ -179,6 +176,11 @@
width: 0;
border-left-width: 1px;
border-left-style: solid;
/* TODO: enable css transitions
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
/**/
}
.vis.timeline .item .content {
@ -220,18 +222,18 @@
z-index: 10001; /* a little higher z-index than .drag-left */
}
.vis.timeline .axis {
position: relative;
.vis.timeline .timeaxis {
position: absolute;
}
.vis.timeline .axis .text {
.vis.timeline .timeaxis .text {
position: absolute;
color: #4d4d4d;
padding: 3px;
white-space: nowrap;
}
.vis.timeline .axis .text.measure {
.vis.timeline .timeaxis .text.measure {
position: absolute;
padding-left: 0;
padding-right: 0;
@ -240,13 +242,13 @@
visibility: hidden;
}
.vis.timeline .axis .grid.vertical {
.vis.timeline .timeaxis .grid.vertical {
position: absolute;
width: 0;
border-right: 1px solid;
}
.vis.timeline .axis .grid.horizontal {
.vis.timeline .timeaxis .grid.horizontal {
position: absolute;
left: 0;
width: 100%;
@ -254,11 +256,11 @@
border-bottom: 1px solid;
}
.vis.timeline .axis .grid.minor {
.vis.timeline .timeaxis .grid.minor {
border-color: #e5e5e5;
}
.vis.timeline .axis .grid.major {
.vis.timeline .timeaxis .grid.major {
border-color: #bfbfbf;
}

+ 2666
- 3133
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File


+ 11
- 11
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 357
- 220
docs/dataset.html View File

@ -20,10 +20,10 @@
<li><a href="#Overview">Overview</a></li>
<li><a href="#Example">Example</a></li>
<li><a href="#Construction">Construction</a></li>
<li><a href="#Data_Manipulation">Data Manipulation</a></li>
<li><a href="#Data_Filtering">Data Filtering</a></li>
<li><a href="#Data_Formatting">Data Formatting</a></li>
<li><a href="#Methods">Methods</a></li>
<li><a href="#Subscriptions">Subscriptions</a></li>
<li><a href="#Data_Manipulation">Data Manipulation</a></li>
<li><a href="#Data_Selection">Data Selection</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
@ -107,7 +107,7 @@ console.log('formatted items', items);
</p>
<pre class="prettyprint lang-js">
var data = new vis.DataSet(options)
var data = new vis.DataSet([data] [, options])
</pre>
<p>
@ -116,6 +116,11 @@ var data = new vis.DataSet(options)
<a href="#Data_Manipulation">Data Manipulation</a>.
</p>
<p>
The parameter <code>data</code>code> is optional and can be an Array or
Google DataTable with items.
</p>
<p>
The parameter <code>options</code> is optional and is an object which can
contain the following properties:
@ -160,6 +165,294 @@ var data = new vis.DataSet(options)
</table>
<h2 id="Methods">Methods</h2>
<p>DataSet contains the following methods.</p>
<table>
<colgroup>
<col width="200">
</colgroup>
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</tr>
<tr>
<td>add(data [, senderId])</td>
<td>Number[]</td>
<td>Add data to the DataSet. Adding an item will fail when there already is an item with the same id. The function returns an array with the ids of the added items. See section <a href="#Data_Manipulation">Data Manipulation</a>.</td>
</tr>
<tr>
<td>clear([senderId])</td>
<td>Number[]</td>
<td>Clear all data from the DataSet. The function returns an array with the ids of the removed items.</td>
</tr>
<tr>
<td>distinct(field)</td>
<td>Array</td>
<td>Find all distinct values of a specified field. Returns an unordered array containing all distinct values. If data items do not contain the specified field are ignored.</td>
</tr>
<tr>
<td>forEach(callback [, options])</td>
<td>none</td>
<td>
Execute a callback function for every item in the dataset.
The available options are described in section <a href="#Data_Selection">Data Selection</a>.
</td>
</tr>
<tr>
<td>
get([options] [, data])<br>
get(id [,options] [, data])<br>
get(ids [, options] [, data])
</td>
<td>Object | Array | DataTable</td>
<td>
Get a single item, multiple items, or all items from the DataSet.
Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>. If parameter <code>data</code> isprovided, items will be appended to this array or table, which is required in case of Google DataTable.
</td>
</tr>
<tr>
<td>
getIds([options])
</td>
<td>Number[]</td>
<td>
Get ids of all items or of a filtered set of items.
Available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>convert</code> are not applicable in case of <code>getIds</code>.
</td>
</tr>
<tr>
<td>map(callback [, options])</td>
<td>Array</td>
<td>
Map every item in the DataSet.
The available options are described in section <a href="#Data_Selection">Data Selection</a>.
</td>
</tr>
<tr>
<td>max(field)</td>
<td>Object | null</td>
<td>
Find the item with maximum value of specified field. Returns <code>null</code> if no item is found.
</td>
</tr>
<tr>
<td>min(field)</td>
<td>Object | null</td>
<td>
Find the item with minimum value of specified field. Returns <code>null</code> if no item is found.
</td>
</tr>
<tr>
<td>off(event, callback)</td>
<td>none</td>
<td>
Unsubscribe from an event, remove an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
</td>
</tr>
<tr>
<td>on(event, callback)</td>
<td>none</td>
<td>
Subscribe to an event, add an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
</td>
</tr>
<tr>
<td>
remove(id [, senderId])<br>
remove(ids [, senderId])
</td>
<td>Number[]</td>
<td>
Remove on ore multiple items by id or by the items themselves. Returns an array with the ids of the removed items. See section <a href="#Data_Manipulation">Data Manipulation</a>.
</td>
</tr>
<tr>
<td>
update(id [, senderId])<br>
update(ids [, senderId])
</td>
<td>Number[]</td>
<td>
Update on ore existing items. When an item doesn't exist, it will be created. Returns an array with the ids of the removed items. See section <a href="#Data_Manipulation">Data Manipulation</a>.
</td>
</tr>
</table>
<h2 id="Subscriptions">Subscriptions</h2>
<p>
One can subscribe on changes in a DataSet.
A subscription can be created using the method <code>on</code>,
and removed with <code>off</code>.
</p>
<pre class="prettyprint lang-js">
// create a DataSet
var data = new vis.DataSet();
// subscribe to any change in the DataSet
data.on('*', function (event, properties, senderId) {
console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
});
// add an item
data.add({id: 1, text: 'item 1'}); // triggers an 'add' event
data.update({id: 1, text: 'item 1 (updated)'}); // triggers an 'update' event
data.remove(1); // triggers an 'remove' event
</pre>
<h3 id="On">On</h3>
<p>
Subscribe to an event.
</p>
Syntax:
<pre class="prettyprint lang-js">DataSet.on(event, callback)</pre>
Where:
<ul>
<li>
<code>event</code> is a String containing any of the events listed
in section <a href="#Events">Events</a>.
</li>
<li>
<code>callback</code> is a callback function which will be called
each time the event occurs. The callback function is described in
section <a href="#Callback">Callback</a>.
</li>
</ul>
<h3 id="Off">Off</h3>
<p>
Unsubscribe from an event.
</p>
Syntax:
<pre class="prettyprint lang-js">DataSet.off(event, callback)</pre>
Where <code>event</code> and <code>callback</code> correspond with the
parameters used to <a href="#On">subscribe</a> to the event.
<h3 id="Events">Events</h3>
<p>
The following events are available for subscription:
</p>
<table>
<tr>
<th>Event</th>
<th>Description</th>
</tr>
<tr>
<td>add</td>
<td>
The <code>add</code> event is triggered when an item
or a set of items is added, or when an item is updated while
not yet existing.
</td>
</tr>
<tr>
<td>update</td>
<td>
The <code>update</code> event is triggered when an existing item
or a set of existing items is updated.
</td>
</tr>
<tr>
<td>remove</td>
<td>
The <code>remove</code> event is triggered when an item
or a set of items is removed.
</td>
</tr>
<tr>
<td>*</td>
<td>
The <code>*</code> event is triggered when any of the events
<code>add</code>, <code>update</code>, and <code>remove</code>
occurs.
</td>
</tr>
</table>
<h3 id="Callback">Callback</h3>
<p>
The callback functions of subscribers are called with the following
parameters:
</p>
<pre class="prettyprint lang-js">
function (event, properties, senderId) {
// handle the event
});
</pre>
<p>
where the parameters are defined as
</p>
<table>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>event</td>
<td>String</td>
<td>
Any of the available events: <code>add</code>,
<code>update</code>, or <code>remove</code>.
</td>
</tr>
<tr>
<td>properties</td>
<td>Object&nbsp;|&nbsp;null</td>
<td>
Optional properties providing more information on the event.
In case of the events <code>add</code>,
<code>update</code>, and <code>remove</code>,
<code>properties</code> is always an object containing a property
items, which contains an array with the ids of the affected
items.
</td>
</tr>
<tr>
<td>senderId</td>
<td>String&nbsp;|&nbsp;Number</td>
<td>
An senderId, optionally provided by the application code
which triggered the event. If senderId is not provided, the
argument will be <code>null</code>.
</td>
</tr>
</table>
<h2 id="Data_Manipulation">Data Manipulation</h2>
<p>
@ -317,70 +610,18 @@ Syntax:
</p>
<h2 id="Data_Filtering">Data Filtering</h2>
<h2 id="Data_Selection">Data Selection</h2>
<p>
Data can be retrieved from the DataSet using the method <code>get</code>.
This method can return a single item or a list with items.
The DataSet contains functionality to format, filter, and sort data retrieved via the
methods <code>get</code>, <code>getIds</code>, <code>forEach</code>, and <code>map</code>. These methods have the following syntax:
</p>
<p>A single item can be retrieved by its id:</p>
<pre class="prettyprint lang-js">
var item1 = dataset.get(1);
</pre>
<p>A selection of items can be retrieved by providing an array with ids:</p>
<pre class="prettyprint lang-js">
var items = dataset.get([1, 3, 4]); // retrieve items 1, 3, and 4
</pre>
<p>All items can be retrieved by simply calling <code>get</code> without
specifying an id:</p>
<pre class="prettyprint lang-js">
var items = dataset.get(); // retrieve all items
</pre>
<p>
Items can be filtered on specific properties by providing a filter
function. A filter function is executed for each of the items in the
DataSet, and is called with the item as parameter. The function must
return a boolean. All items for which the filter function returns
true will be emitted.
</p>
<pre class="prettyprint lang-js">
// retrieve all items having a property group with value 2
var group2 = dataset.get({
filter: function (item) {
return (item.group == 2);
}
});
// retrieve all items having a property balance with a value above zero
var positiveBalance = dataset.get({
filter: function (item) {
return (item.balance > 0);
}
});
</pre>
<h2 id="Data_Formatting">Data Formatting</h2>
<p>
The DataSet contains functionality to format data retrieved via the
method <code>get</code>. The method <code>get</code> has the following
syntax:
</p>
<pre class="prettyprint lang-js">
var item = DataSet.get(id, options); // retrieve a single item
var items = DataSet.get(ids, options); // retrieve a selection of items
var items = DataSet.get(options); // retrieve all items or a filtered set
DataSet.get([id] [, options] [, data]);
DataSet.getIds([options]);
DataSet.forEach(callback [, options]);
DataSet.map(callback [, options]);
</pre>
<p>
@ -466,6 +707,59 @@ var items = data.get({
});
</pre>
<h3 id="Getting_Data">Getting Data</h3>
<p>
Data can be retrieved from the DataSet using the method <code>get</code>.
This method can return a single item or a list with items.
</p>
<p>A single item can be retrieved by its id:</p>
<pre class="prettyprint lang-js">
var item1 = dataset.get(1);
</pre>
<p>A selection of items can be retrieved by providing an array with ids:</p>
<pre class="prettyprint lang-js">
var items = dataset.get([1, 3, 4]); // retrieve items 1, 3, and 4
</pre>
<p>All items can be retrieved by simply calling <code>get</code> without
specifying an id:</p>
<pre class="prettyprint lang-js">
var items = dataset.get(); // retrieve all items
</pre>
<h3 id="Data_Filtering">Data Filtering</h3>
<p>
Items can be filtered on specific properties by providing a filter
function. A filter function is executed for each of the items in the
DataSet, and is called with the item as parameter. The function must
return a boolean. All items for which the filter function returns
true will be emitted.
</p>
<pre class="prettyprint lang-js">
// retrieve all items having a property group with value 2
var group2 = dataset.get({
filter: function (item) {
return (item.group == 2);
}
});
// retrieve all items having a property balance with a value above zero
var positiveBalance = dataset.get({
filter: function (item) {
return (item.balance > 0);
}
});
</pre>
<h3 id="Data_Types">Data Types</h3>
@ -541,163 +835,6 @@ var items = data.get({
</table>
<h2 id="Subscriptions">Subscriptions</h2>
<p>
One can subscribe on changes in a DataSet.
A subscription can be created using the method <code>on</code>,
and removed with <code>off</code>.
</p>
<pre class="prettyprint lang-js">
// create a DataSet
var data = new vis.DataSet();
// subscribe to any change in the DataSet
data.on('*', function (event, properties, senderId) {
console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
});
// add an item
data.add({id: 1, text: 'item 1'}); // triggers an 'add' event
data.update({id: 1, text: 'item 1 (updated)'}); // triggers an 'update' event
data.remove(1); // triggers an 'remove' event
</pre>
<h3 id="On">On</h3>
<p>
Subscribe to an event.
</p>
Syntax:
<pre class="prettyprint lang-js">DataSet.on(event, callback)</pre>
Where:
<ul>
<li>
<code>event</code> is a String containing any of the events listed
in section <a href="#Events">Events</a>.
</li>
<li>
<code>callback</code> is a callback function which will be called
each time the event occurs. The callback function is described in
section <a href="#Callback">Callback</a>.
</li>
</ul>
<h3 id="Off">Off</h3>
<p>
Unsubscribe from an event.
</p>
Syntax:
<pre class="prettyprint lang-js">DataSet.off(event, callback)</pre>
Where <code>event</code> and <code>callback</code> correspond with the
parameters used to <a href="#On">subscribe</a> to the event.
<h3 id="Events">Events</h3>
<p>
The following events are available for subscription:
</p>
<table>
<tr>
<th>Event</th>
<th>Description</th>
</tr>
<tr>
<td>add</td>
<td>
The <code>add</code> event is triggered when an item
or a set of items is added, or when an item is updated while
not yet existing.
</td>
</tr>
<tr>
<td>update</td>
<td>
The <code>update</code> event is triggered when an existing item
or a set of existing items is updated.
</td>
</tr>
<tr>
<td>remove</td>
<td>
The <code>remove</code> event is triggered when an item
or a set of items is removed.
</td>
</tr>
<tr>
<td>*</td>
<td>
The <code>*</code> event is triggered when any of the events
<code>add</code>, <code>update</code>, and <code>remove</code>
occurs.
</td>
</tr>
</table>
<h3 id="Callback">Callback</h3>
<p>
The callback functions of subscribers are called with the following
parameters:
</p>
<pre class="prettyprint lang-js">
function (event, properties, senderId) {
// handle the event
});
</pre>
<p>
where the parameters are defined as
</p>
<table>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>event</td>
<td>String</td>
<td>
Any of the available events: <code>add</code>,
<code>update</code>, or <code>remove</code>.
</td>
</tr>
<tr>
<td>properties</td>
<td>Object&nbsp;|&nbsp;null</td>
<td>
Optional properties providing more information on the event.
In case of the events <code>add</code>,
<code>update</code>, and <code>remove</code>,
<code>properties</code> is always an object containing a property
items, which contains an array with the ids of the affected
items.
</td>
</tr>
<tr>
<td>senderId</td>
<td>String&nbsp;|&nbsp;Number</td>
<td>
An senderId, optionally provided by the application code
which triggered the event. If senderId is not provided, the
argument will be <code>null</code>.
</td>
</tr>
</table>
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data is processed and rendered in the browser.

+ 12
- 2
docs/graph.html View File

@ -490,7 +490,12 @@ var edges = [
<th>Required</th>
<th>Description</th>
</tr>
<tr>
<td>arrowScaleFactor</td>
<td>Number</td>
<td>no</td>
<td>If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1.</td>
</tr>
<tr>
<td>color</td>
<td>String | Object</td>
@ -1062,7 +1067,12 @@ var options = {
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>arrowScaleFactor</td>
<td>Number</td>
<td>1</td>
<td>If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1.</td>
</tr>
<tr>
<td>color</td>
<td>String | Object</td>

+ 70
- 8
docs/timeline.html View File

@ -347,12 +347,41 @@ var options = {
<tr>
<td>editable</td>
<td>Boolean</td>
<td>Boolean | Object</td>
<td>false</td>
<td>If true, the items on the timeline can be dragged. Only applicable when option <code>selectable</code> is <code>true</code>. See also the callbacks <code>onAdd</code>, <code>onUpdate</code>, <code>onMove</code>, and <code>onRemove</code>, described in detail in section <a href="#Editing_Items">Editing Items</a>.
<td>If true, the items in the timeline can be manipulated. Only applicable when option <code>selectable</code> is <code>true</code>. See also the callbacks <code>onAdd</code>, <code>onUpdate</code>, <code>onMove</code>, and <code>onRemove</code>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions.
See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.
</td>
</tr>
<tr>
<td>editable.add</td>
<td>Boolean</td>
<td>false</td>
<td>If true, new items can be created by double tapping an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr>
<tr>
<td>editable.remove</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be deleted by first selecting them, and then clicking the delete button on the top right of the item. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr>
<tr>
<td>editable.updateGroup</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be dragged from one group to another. Only applicable when the Timeline has groups. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr>
<tr>
<td>editable.updateTime</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be dragged to another moment in time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr>
<tr>
<td>end</td>
<td>Date | Number | String</td>
@ -428,7 +457,7 @@ var options = {
<td>onAdd</td>
<td>Function</td>
<td>none</td>
<td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable</code> are set <code>true</code>.
<td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code>true</code>.
</td>
</tr>
@ -436,7 +465,7 @@ var options = {
<td>onUpdate</td>
<td>Function</td>
<td>none</td>
<td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable</code> are set <code>true</code>.
<td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
</tr>
@ -444,7 +473,7 @@ var options = {
<td>onMove</td>
<td>Function</td>
<td>none</td>
<td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable</code> are set <code>true</code>.
<td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
</tr>
@ -452,10 +481,11 @@ var options = {
<td>onRemove</td>
<td>Function</td>
<td>none</td>
<td>Callback 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 <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable</code> are set <code>true</code>.
<td>Callback 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 <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code>true</code>.
</td>
</tr>
<!-- TODO: cleanup option order
<tr>
<td>order</td>
<td>Function</td>
@ -466,6 +496,7 @@ var options = {
`vis.components.items.Item`.
</td>
</tr>
-->
<tr>
<td>orientation</td>
@ -483,8 +514,7 @@ var options = {
<pre class="prettyprint lang-css">
.vis.timeline .item {
padding: 10px;
}
</pre>
}</pre>
</td>
</tr>
@ -534,6 +564,13 @@ var options = {
visible.</td>
</tr>
<tr>
<td>stack</td>
<td>Boolean</td>
<td>true</td>
<td>If true (default), items will be stacked on top of each other such that they do not overlap.</td>
</tr>
<tr>
<td>start</td>
<td>Date | Number | String</td>
@ -591,6 +628,13 @@ var options = {
<th>Description</th>
</tr>
<tr>
<td>fit()</td>
<td>none</td>
<td>Adjust the visible window such that it fits all items.
</td>
</tr>
<tr>
<td>getCustomTime()</td>
<td>Date</td>
@ -791,6 +835,24 @@ timeline.off('select', onSelect);
When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code>true</code>), the user can move items by dragging them, can create a new item by double tapping on an empty space, can update an item by double tapping it, and can delete a selected item by clicking the delete button on the top right.
</p>
<p>Option <code>editable</code> accepts a boolean or an object. When <code>editable</code> is a boolean, all manipulation actions will be either enabled or disabled. When <code>editable</code> is an object, one can enable individual manipulation actions:</p>
<pre class="prettyprint lang-js">// 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
}
};</pre>
<p>
One can specify callback functions to validate changes made by the user. There are a number of callback functions for this purpose:
</p>

BIN
download/vis.zip View File


+ 6
- 6
examples/timeline/01_basic.html View File

@ -18,12 +18,12 @@
<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'}
{id: 1, content: 'item 1', start: '2014-04-20'},
{id: 2, content: 'item 2', start: '2014-04-14'},
{id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
{id: 5, content: 'item 5', start: '2014-04-25'},
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
];
var options = {};
var timeline = new vis.Timeline(container, items, options);

examples/timeline/02_dataset.html → examples/timeline/02_interactive.html View File

@ -1,36 +1,25 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Dataset example</title>
<title>Timeline | Interactive example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
height: 100%;
margin: 0;
padding: 0;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 100%;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Drag items around, create new items, and remove items.</p>
<div id="visualization"></div>
<script>
var now = moment().minutes(0).seconds(0).milliseconds(0);
// create a dataset with items
var items = new vis.DataSet({
convert: {
@ -52,7 +41,20 @@
start: '2014-01-10',
end: '2014-02-10',
orientation: 'top',
height: '100%',
height: '300px',
editable: true,
/* alternatively, enable/disable individual actions:
editable: {
add: true,
updateTime: true,
updateGroup: true,
remove: true
},
*/
showCurrentTime: true
};

+ 69
- 0
examples/timeline/03_a_lot_of_data.html View File

@ -0,0 +1,69 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | a lot of data</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>
Test with a lot of data
</h1>
<p>
<label for="count">Number of items</label>
<input id="count" value="10000">
<input id="draw" type="button" value="draw">
</p>
<div id="visualization"></div>
<script>
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var items = new vis.DataSet({
convert: {
start: 'Date',
end: 'Date'
}
});
// create data
function createData() {
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
for (var i = 0; i < count; i++) {
newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i)});
}
items.clear();
items.add(newData);
}
createData();
document.getElementById('draw').onclick = createData;
var container = document.getElementById('visualization');
var options = {
editable: true,
start: now.clone().add('days', -3),
end: now.clone().add('days', 11),
zoomMin: 1000 * 60 * 60 * 24, // a day
zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months
//maxHeight: 300,
//height: '300px',
//orientation: 'top'
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 0
- 68
examples/timeline/03_much_data.html View File

@ -1,68 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | a lot of data</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>
Test with a lot of data
</h1>
<p>
<label for="count">Number of items</label>
<input id="count" value="100">
<input id="draw" type="button" value="draw">
</p>
<div id="visualization"></div>
<script>
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var items = new vis.DataSet({
convert: {
start: 'Date',
end: 'Date'
}
});
// create data
function createData() {
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
for (var i = 0; i < count; i++) {
newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i)});
}
items.clear();
items.add(newData);
}
createData();
document.getElementById('draw').onclick = createData;
var container = document.getElementById('visualization');
var options = {
start: now.clone().add('days', -3),
end: now.clone().add('days', 11),
zoomMin: 1000 * 60 * 60 * 24, // a day
zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months
//maxHeight: 300,
//height: '300px',
//orientation: 'top'
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 1
- 1
examples/timeline/05_groups.html View File

@ -60,7 +60,7 @@
// create visualization
var container = document.getElementById('visualization');
var options = {
groupOrder: 'content'
groupOrder: 'content' // groupOrder can be a property name or a sorting function
};
var timeline = new vis.Timeline(container);

+ 1
- 2
examples/timeline/08_edit_items.html View File

@ -18,8 +18,7 @@
<div id="log"></div>
<script type="text/javascript">
var items = new vis.DataSet();
items.add([
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: new Date(2013, 3, 20)},
{id: 2, content: 'item 2', start: new Date(2013, 3, 14)},
{id: 3, content: 'item 3', start: new Date(2013, 3, 18)},

+ 66
- 0
examples/timeline/09_order_groups.html View File

@ -0,0 +1,66 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Order groups</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
This example demonstrate custom ordering of groups.
</p>
<div id="visualization"></div>
<script>
var groups = new vis.DataSet([
{id: 0, content: 'First', value: 1},
{id: 1, content: 'Third', value: 3},
{id: 2, content: 'Second', value: 2}
]);
// create a dataset with items
var items = new vis.DataSet([
{id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
{id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
{id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
{id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
{id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
{id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
]);
// create visualization
var container = document.getElementById('visualization');
var options = {
// option groupOrder can be a property name or a sort function
// the sort function must compare two groups and return a value
// > 0 when a > b
// < 0 when a < b
// 0 when a == b
groupOrder: function (a, b) {
return a.value - b.value;
},
editable: true
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</body>
</html>

+ 51
- 0
examples/timeline/10_limit_move_and_zoom.html View File

@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Limit move and zoom</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
The visible range is limited in this demo:
</p>
<ul>
<li>minimum visible date is limited to 2012-01-01 using option <code>min</code></li>
<li>maximum visible date is limited to 2013-01-01 (excluded) using option <code>max</code></li>
<li>visible zoom interval is limited to a minimum of 24 hours using option <code>zoomMin</code></li>
<li>visible zoom interval is limited to a maximum of about 3 months using option <code>zoomMax</code></li>
</ul>
<div id="visualization"></div>
<script>
// create some items
var items = [
{'start': new Date(2012, 4, 25), 'content': 'First'},
{'start': new Date(2012, 4, 26), 'content': 'Last'}
];
// create visualization
var container = document.getElementById('visualization');
var options = {
height: '300px',
min: new Date(2012, 0, 1), // lower limit of visible range
max: new Date(2013, 0, 1), // upper limit of visible range
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 3 // about three months in milliseconds
};
// create the timeline
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setItems(items);
</script>
</body>
</html>

+ 58
- 0
examples/timeline/11_points.html View File

@ -0,0 +1,58 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Points</title>
<style type="text/css">
body {
font: 10pt arial;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>World War II timeline</h1>
<p>Source: <a href="http://www.onwar.com/chrono/index.htm" target="_blank">http://www.onwar.com/chrono/index.htm</a></p>
<div id="mytimeline" style="background-color: #FAFAFA;"></div>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{start: new Date(1939,8,1), content: 'German Invasion of Poland'},
{start: new Date(1940,4,10), content: 'Battle of France and the Low Countries'},
{start: new Date(1940,7,13), content: 'Battle of Britain - RAF vs. Luftwaffe'},
{start: new Date(1941,1,14), content: 'German Afrika Korps arrives in North Africa'},
{start: new Date(1941,5,22), content: 'Third Reich Invades the USSR'},
{start: new Date(1941,11,7), content: 'Japanese Attack Pearl Harbor'},
{start: new Date(1942,5,4), content: 'Battle of Midway in the Pacific'},
{start: new Date(1942,10,8), content: 'Americans open Second Front in North Africa'},
{start: new Date(1942,10,19),content: 'Battle of Stalingrad in Russia'},
{start: new Date(1943,6,5), content: 'Battle of Kursk - Last German Offensive on Eastern Front'},
{start: new Date(1943,6,10), content: 'Anglo-American Landings in Sicily'},
{start: new Date(1944,2,8), content: 'Japanese Attack British India'},
{start: new Date(1944,5,6), content: 'D-Day - Allied Invasion of Normandy'},
{start: new Date(1944,5,22), content: 'Destruction of Army Group Center in Byelorussia'},
{start: new Date(1944,7,1), content: 'The Warsaw Uprising in Occupied Poland'},
{start: new Date(1944,9,20), content: 'American Liberation of the Philippines'},
{start: new Date(1944,11,16),content: 'Battle of the Bulge in the Ardennes'},
{start: new Date(1944,1,19), content: 'American Landings on Iwo Jima'},
{start: new Date(1945,3,1), content: 'US Invasion of Okinawa'},
{start: new Date(1945,3,16), content: 'Battle of Berlin - End of the Third Reich'}
];
var options = {
// Set global item type. Type can also be specified for items individually
// Available types: 'box' (default), 'point', 'range', 'rangeoverflow'
type: 'point',
showMajorLabels: false
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 88
- 0
examples/timeline/12_custom_styling.html View File

@ -0,0 +1,88 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Custom styling</title>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.vis.timeline.rootpanel {
border: 2px solid purple;
font-family: purisa, 'comic sans', cursive;
font-size: 12pt;
background: #ffecea;
}
.vis.timeline .item {
border-color: #F991A3;
background-color: pink;
font-size: 15pt;
color: purple;
box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
}
.vis.timeline .item,
.vis.timeline .item.line {
border-width: 3px;
}
.vis.timeline .item.dot {
border-width: 10px;
border-radius: 10px;
}
.vis.timeline .item.selected {
border-color: green;
background-color: lightgreen;
}
.vis.timeline .timeaxis .text {
color: purple;
padding-top: 10px;
padding-left: 10px;
}
.vis.timeline .timeaxis .text.major {
font-weight: bold;
}
.vis.timeline .timeaxis .grid.minor {
border-width: 2px;
border-color: pink;
}
.vis.timeline .timeaxis .grid.major {
border-width: 2px;
border-color: #F991A3;
}
</style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{start: new Date(2010,7,23), content: '<div>Conversation</div><img src="img/community-users-icon.png" style="width:32px; height:32px;">'},
{start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="img/mail-icon.png" style="width:32px; height:32px;">'},
{start: new Date(2010,7,24,16,0,0), content: 'Report'},
{start: new Date(2010,7,26), end: new Date(2010,8,2), content: 'Traject A'},
{start: new Date(2010,7,28), content: '<div>Memo</div><img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'},
{start: new Date(2010,7,29), content: '<div>Phone call</div><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'},
{start: new Date(2010,7,31), end: new Date(2010,8,3), content: 'Traject B'},
{start: new Date(2010,8,4,12,0,0), content: '<div>Report</div><img src="img/attachment-icon.png" style="width:32px; height:32px;">'}
];
var options = {
editable: true,
margin: {
item: 20,
axis: 40
}
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 88
- 0
examples/timeline/13_past_and_future.html View File

@ -0,0 +1,88 @@
<html>
<head>
<title>Timeline | Past and future</title>
<style type="text/css">
body {
font: 11pt verdana;
}
.vis.timeline .item.past {
filter: alpha(opacity=50);
opacity: 0.5;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p style="width: 600px;">
When the custom time bar is shown, the user can drag this bar to a specific
time. The Timeline sends an event that the custom time is changed, after
which the contents of the timeline can be changed according to the specified
time in past or future.
</p>
<div id="customTime">&nbsp;</div>
<p></p>
<div id="mytimeline"></div>
<script>
// create a data set
var data = new vis.DataSet([
{
id: 1,
start: new Date((new Date()).getTime() - 60 * 1000),
end: new Date(),
content: 'Dynamic event'
}
]);
// specify options
var options = {
showCurrentTime: true,
showCustomTime: true
};
// create a timeline
var container = document.getElementById('mytimeline');
timeline = new vis.Timeline(container, data, options);
// add event listener
timeline.on('timechange', function (event) {
document.getElementById("customTime").innerHTML = "Custom Time: " + event.time;
var item = data.get(1);
if (event.time > item.start) {
item.end = new Date(event.time);
var now = new Date();
if (event.time < now) {
item.content = "Dynamic event (past)";
item.className = 'past';
}
else if (event.time > now) {
item.content = "Dynamic event (future)";
item.className = 'future';
}
else {
item.content = "Dynamic event (now)";
item.className = 'now';
}
data.update(item);
}
});
// set a custom range from -2 minute to +3 minutes current time
var start = new Date((new Date()).getTime() - 2 * 60 * 1000);
var end = new Date((new Date()).getTime() + 3 * 60 * 1000);
timeline.setWindow(start, end);
</script>
</body>
</html>

+ 109
- 0
examples/timeline/14_a_lot_of_grouped_data.html View File

@ -0,0 +1,109 @@
<html>
<head>
<title>Timeline | A lot of grouped data</title>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
color: #4D4D4D;
font: 10pt arial;
}
</style>
</head>
<body onresize="/*timeline.checkResize();*/">
<h1>Timeline grouping performance</h1>
<p>
Choose a number of items:
<a href="?count=100">100</a>,
<a href="?count=1000">1000</a>,
<a href="?count=10000">10000</a>,
<a href="?count=10000">100000</a>
<p>
<p>
Current number of items: <span id='count'>100</span>
</p>
<div id="mytimeline"></div>
<script>
/**
* Get URL parameter
* http://www.netlobo.com/url_query_string_javascript.html
*/
function gup( name ) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
// get selected item count from url parameter
var count = (Number(gup('count')) || 1000);
// create groups
var groups = new vis.DataSet([
{id: 1, content: 'Truck&nbsp;1'},
{id: 2, content: 'Truck&nbsp;2'},
{id: 3, content: 'Truck&nbsp;3'},
{id: 4, content: 'Truck&nbsp;4'}
]);
// create items
var items = new vis.DataSet();
var order = 1;
var truck = 1;
for (var j = 0; j < 4; j++) {
var date = new Date();
for (var i = 0; i < count/4; i++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date);
items.add({
id: order,
group: truck,
start: start,
end: end,
content: 'Order ' + order
});
order++;
}
truck++;
}
// specify options
var options = {
stack: false,
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
editable: true,
margin: {
item: 10, // minimal margin between items
axis: 5 // minimal margin between items and the axis
},
orientation: 'top'
};
// create a Timeline
var container = document.getElementById('mytimeline');
timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
document.getElementById('count').innerHTML = count;
</script>
</body>
</html>

+ 115
- 0
examples/timeline/15_item_class_names.html View File

@ -0,0 +1,115 @@
<html>
<head>
<title>Timeline | Item class names</title>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, input {
font: 12pt verdana;
}
/* custom styles for individual items, load this after vis.css */
.vis.timeline .item.green {
background-color: greenyellow;
border-color: green;
}
/* create a custom sized dot at the bottom of the red item */
.vis.timeline .item.red {
background-color: red;
border-color: darkred;
color: white;
font-family: monospace;
box-shadow: 0 0 10px gray;
}
.vis.timeline .item.dot.red {
border-radius: 10px;
border-width: 10px;
}
.vis.timeline .item.line.red {
border-width: 5px;
}
.vis.timeline .item.box.red {
border-radius: 0;
border-width: 2px;
font-size: 24pt;
font-weight: bold;
}
.vis.timeline .item.orange {
background-color: gold;
border-color: orange;
}
.vis.timeline .item.orange.selected {
/* custom colors for selected orange items */
background-color: orange;
border-color: orangered;
}
.vis.timeline .item.magenta {
background-color: magenta;
border-color: purple;
color: white;
}
/* our custom classes overrule the styles for selected events,
so lets define a new style for the selected events */
.vis.timeline .item.selected {
background-color: white;
border-color: black;
color: black;
box-shadow: 0 0 10px gray;
}
</style>
</head>
<body>
<p>This page demonstrates the Timeline with custom css classes for individual items.</p>
<div id="mytimeline"></div>
<script type="text/javascript">
// create data
var data = [
{
'start': new Date(2012,7,19),
'content': 'default'
},
{
'start': new Date(2012,7,23),
'content': 'green',
'className': 'green'
},
{
'start': new Date(2012,7,29),
'content': 'red',
'className': 'red'
},
{
'start': new Date(2012,7,27),
'end': new Date(2012,8,1),
'content': 'orange',
'className': 'orange'
},
{
'start': new Date(2012,8,2),
'content': 'magenta',
'className': 'magenta'
}
];
// specify options
var options = {
editable: true
};
// create the timeline
var container = document.getElementById('mytimeline');
timeline = new vis.Timeline(container, data, options);
</script>
</body>
</html>

+ 11
- 2
examples/timeline/index.html View File

@ -13,13 +13,22 @@
<h1>vis.js timeline examples</h1>
<p><a href="01_basic.html">01_basic.html</a></p>
<p><a href="02_dataset.html">02_dataset.html</a></p>
<p><a href="03_much_data.html">03_much_data.html</a></p>
<p><a href="02_interactive.html">02_dataset.html</a></p>
<p><a href="03_a_lot_of_data.html">03_a_lot_of_data.html</a></p>
<p><a href="04_html_data.html">04_html_data.html</a></p>
<p><a href="05_groups.html">05_groups.html</a></p>
<p><a href="06_event_listeners.html">06_event_listeners.html</a></p>
<p><a href="07_custom_time_bar.html">07_custom_time_bar.html</a></p>
<p><a href="08_edit_items.html">08_edit_items.html</a></p>
<p><a href="09_order_groups.html">09_order_groups.html</a></p>
<p><a href="10_limit_move_and_zoom.html">10_limit_range_and_zoom.html</a></p>
<p><a href="11_points.html">11_points.html</a></p>
<p><a href="12_custom_styling.html">12_custom_styling.html</a></p>
<p><a href="13_past_and_future.html">13_past_and_future.html</a></p>
<p><a href="14_a_lot_of_grouped_data.html">14_a_lot_of_grouped_data.html</a></p>
<p><a href="15_item_class_names.html">15_item_class_names.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>
</div>
</body>

+ 0
- 69
examples/timeline/test.html View File

@ -1,69 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | a lot of data</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="../../node_modules/moment/moment.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>
Test with a lot of data
</h1>
<p>
<label for="count">Number of items</label>
<input id="count" value="1000">
<input id="draw" type="button" value="draw">
</p>
<div id="visualization"></div>
<script>
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var items = new vis.DataSet({
convert: {
start: 'Date',
end: 'Date'
}
});
// create data
function createData() {
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
for (var i = 0; i < count; i++) {
newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i)});
}
items.clear();
items.add(newData);
}
createData();
document.getElementById('draw').onclick = createData;
var container = document.getElementById('visualization');
var options = {
editable: true,
start: now.clone().add('days', -3),
end: now.clone().add('days', 11),
zoomMin: 1000 * 60 * 60 * 24, // a day
zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months
//maxHeight: 300,
//height: '300px',
//orientation: 'top'
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 0
- 35
examples/timeline/test2.html View File

@ -1,35 +0,0 @@
<!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">
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', start: '2013-04-22'},
{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: 4.1, content: 'item 4.1 bla bla bla bla bla bla bla bla bla ', start: '2013-04-17', end: '2013-04-24', type: 'rangeoverflow'},
{id: 5, content: 'item 5', start: '2013-04-25', type: 'point'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {
editable: true
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

BIN
img/external-link-icons/external-link-icon-white.png View File

Before After
Width: 9  |  Height: 9  |  Size: 194 B

BIN
img/external-link-icons/external-link-icon.png View File

Before After
Width: 9  |  Height: 9  |  Size: 194 B Width: 9  |  Height: 9  |  Size: 205 B

BIN
img/gallery/timeline/02_dataset.png View File

Before After
Width: 544  |  Height: 195  |  Size: 9.0 KiB

BIN
img/gallery/timeline/02_interactive.png View File

Before After
Width: 740  |  Height: 227  |  Size: 10 KiB

img/gallery/timeline/03_much_data.png → img/gallery/timeline/03_a_lot_of_data.png View File


BIN
img/gallery/timeline/09_order_groups.png View File

Before After
Width: 944  |  Height: 406  |  Size: 15 KiB

BIN
img/gallery/timeline/10_limit_move_and_zoom.png View File

Before After
Width: 676  |  Height: 428  |  Size: 22 KiB

BIN
img/gallery/timeline/11_points.png View File

Before After
Width: 1109  |  Height: 386  |  Size: 31 KiB

BIN
img/gallery/timeline/12_custom_styling.png View File

Before After
Width: 1080  |  Height: 445  |  Size: 56 KiB

BIN
img/gallery/timeline/13_past_and_future.png View File

Before After
Width: 715  |  Height: 237  |  Size: 21 KiB

BIN
img/gallery/timeline/14_a_lot_of_grouped_data.png View File

Before After
Width: 715  |  Height: 323  |  Size: 21 KiB

BIN
img/gallery/timeline/15_item_class_names.png View File

Before After
Width: 713  |  Height: 215  |  Size: 16 KiB

+ 49
- 7
index.html View File

@ -74,7 +74,7 @@ bower install vis
<h3>download</h3>
<a href="download/vis.zip">Click here to download vis.js</a>
(version <span class="version">0.7.4</span>)
(version <span class="version">1.0.0</span>)
<h2 id="example">Example</h2>
@ -135,15 +135,15 @@ The source code of the examples can be found in the
</a>
</div>
<div class="thumb">
<a href="examples/timeline/02_dataset.html">
<img src="img/gallery/timeline/02_dataset.png">
<div>dataset</div>
<a href="examples/timeline/02_interactive.html">
<img src="img/gallery/timeline/02_interactive.png">
<div>interactive</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/03_much_data.html">
<img src="img/gallery/timeline/03_much_data.png">
<div>much data</div>
<a href="examples/timeline/03_a_lot_of_data.html">
<img src="img/gallery/timeline/03_a_lot_of_data.png">
<div>a lot of data</div>
</a>
</div>
<div class="thumb">
@ -176,6 +176,48 @@ The source code of the examples can be found in the
<div>edit items</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/09_order_groups.html">
<img src="img/gallery/timeline/09_order_groups.png">
<div>order groups</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/10_limit_move_and_zoom.html">
<img src="img/gallery/timeline/10_limit_move_and_zoom.png">
<div>limit move and zoom</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/11_points.html">
<img src="img/gallery/timeline/11_points.png">
<div>points</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/12_custom_styling.html">
<img src="img/gallery/timeline/12_custom_styling.png">
<div>custom styling</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/13_past_and_future.html">
<img src="img/gallery/timeline/13_past_and_future.png">
<div>past and future</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/14_a_lot_of_grouped_data.html">
<img src="img/gallery/timeline/14_a_lot_of_grouped_data.png">
<div>a lot of grouped data</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/15_item_class_names.html">
<img src="img/gallery/timeline/15_item_class_names.png">
<div>item class names</div>
</a>
</div>
</div>
<h3 id="graph">Graph</h3>

Loading…
Cancel
Save