Released version 1.0.0, minor style updates

css/style.css

@@ -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 {

dist/vis.css

@@ -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;
 }
 

docs/dataset.html

@@ -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.

docs/graph.html

@@ -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>

docs/timeline.html

@@ -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>

examples/timeline/01_basic.html

@@ -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

@@ -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
   };
 

examples/timeline/03_a_lot_of_data.html

@@ -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>

examples/timeline/03_much_data.html

@@ -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>

examples/timeline/05_groups.html

@@ -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);

examples/timeline/08_edit_items.html

@@ -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)},

examples/timeline/09_order_groups.html

@@ -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>

examples/timeline/10_limit_move_and_zoom.html

@@ -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>

examples/timeline/11_points.html

@@ -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>

examples/timeline/12_custom_styling.html

@@ -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>

examples/timeline/13_past_and_future.html

@@ -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>

examples/timeline/14_a_lot_of_grouped_data.html

@@ -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>

examples/timeline/15_item_class_names.html

@@ -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>

examples/timeline/index.html

@@ -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>

examples/timeline/test.html

@@ -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>

examples/timeline/test2.html

@@ -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>

index.html

@@ -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>