released version 3.6.0

dist/vis.css

@@ -138,6 +138,7 @@
   position: absolute;
   width: 100%;
   height: 100%;
+  overflow: visible;
 }
 
 .vis.timeline .axis {
@@ -214,8 +215,8 @@
   border: none;
   background-color: rgba(213, 221, 246, 0.4);
   box-sizing: border-box;
-  top: 0;
-  bottom: 0;
+  padding: 0;
+  margin: 0;
 }
 
 .vis.timeline .item.range .content {

docs/dataset.html

@@ -117,8 +117,8 @@ var data = new vis.DataSet([data] [, options])
 </p>
 
 <p>
-  The parameter <code>data</code>code> is optional and can be an Array or
-  Google DataTable with items.
+  The parameter <code>data</code> is optional and can be an Array or
+  <a href="https://developers.google.com/chart/interactive/docs/reference#DataTable" target="_blank">Google DataTable</a> with items.
 </p>
 
 <p>
@@ -183,7 +183,7 @@ var data = new vis.DataSet([data] [, options])
   <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>
+    <td>Add one or multiple items to the DataSet. <code>data</code> can be a single item or an array with items. 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>
@@ -216,7 +216,7 @@ var data = new vis.DataSet([data] [, options])
     <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.
+      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> is provided, items will be appended to this array or table, which is required in case of Google DataTable.
     </td>
   </tr>
 
@@ -290,18 +290,17 @@ var data = new vis.DataSet([data] [, options])
     </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>.
+      Remove one or 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])
+      update(data [, 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>.
+      Update on ore multiple existing items. <code>data</code> can be a single item or an array with 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>
 
@@ -448,8 +447,10 @@ function (event, properties, senderId) {
       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.
+      <code>items</code>, which contains an array with the ids of the affected
+      items. The <code>update</code> event has an extra field <code>data</code>
+      containing the original data of the updated items, i.e. the gives the
+      changed fields of the changed items.
     </td>
   </tr>
   <tr>
@@ -861,4 +862,4 @@ var positiveBalance = dataset.get({
 
 </div>
 </body>
-</html>
+</html>

docs/graph2d.html

@@ -113,7 +113,8 @@
   Groups is a vis <code>DataSet</code> containing groups. The available options and the method of construction
   are described in section <a href="#Group_Options">Data Format</a>.
 </p>
-<pre class="prettyprint lang-js">var graph = new vis.Graph2d(container [, data] [, options] [,groups]);</pre>
+<pre class="prettyprint lang-js">var graph = new vis.Graph2d(container [, data] [, groups] [, options]);</pre>
+For backwards compatibility, groups and options can be interchanged.
 
 <p>
   Data, options and groups can be set or changed later on using the functions

docs/graph3d.html

@@ -419,6 +419,14 @@ var options = {
   <td>none</td>
   <td>Step size for the grid on the x-axis.</td>
 </tr>
+<tr>
+  <td>xValueLabel</td>
+  <td>function</td>
+  <td>none</td>
+  <td>A function for custom formatting of the labels along the x-axis,
+    for example <code>function (x) {return (x * 100) + '%'}</code>.
+  </td>
+</tr>
 
 <tr>
   <td>yBarWidth</td>
@@ -454,6 +462,14 @@ var options = {
   <td>none</td>
   <td>Step size for the grid on the y-axis.</td>
 </tr>
+<tr>
+  <td>yValueLabel</td>
+  <td>function</td>
+  <td>none</td>
+  <td>A function for custom formatting of the labels along the y-axis,
+    for example <code>function (y) {return (y * 100) + '%'}</code>.
+  </td>
+</tr>
 
 <tr>
   <td>zMin</td>
@@ -473,6 +489,14 @@ var options = {
   <td>none</td>
   <td>Step size for the grid on the z-axis.</td>
 </tr>
+<tr>
+  <td>zValueLabel</td>
+  <td>function</td>
+  <td>none</td>
+  <td>A function for custom formatting of the labels along the z-axis,
+    for example <code>function (z) {return (z * 100) + '%'}</code>.
+  </td>
+</tr>
 
 <tr>
   <td>xLabel</td>

docs/network.html

@@ -316,10 +316,11 @@ When using a DataSet, the network is automatically updating to changes in the Da
 
 <tr>
   <td>title</td>
-  <td>string | function</td>
+  <td>string | function | Element</td>
   <td>no</td>
   <td>Title to be displayed when the user hovers over the node.
-    The title can contain HTML code. If using a function, returning <code>undefined</code>
+    The title can be an HTML element or a string containing plain text or HTML.
+    When title is a function, the returned result is displayed as tooltip, and returning <code>undefined</code>
     will prevent the tooltip from being displayed.</td>
 </tr>
 
@@ -428,7 +429,8 @@ When using a DataSet, the network is automatically updating to changes in the Da
     <td>string | function</td>
     <td>no</td>
     <td>Title to be displayed when the user hovers over the edge.
-      The title can contain HTML code. If using a function, returning <code>undefined</code>
+      The title can be an HTML element or a string containing plain text or HTML.
+      When title is a function, the returned result is displayed as tooltip, and returning <code>undefined</code>
       will prevent the tooltip from being displayed.</td>
   </tr>
 
@@ -648,8 +650,8 @@ var options = {
   <td>Boolean</td>
   <td>false</td>
   <td>
-    With the advent of the storePosition() function, the positions of the nodes can be saved after they are stabilized. The smoothCurves require support nodes and those positions are not stored. In order
-    to speed up the initialization of the network by using storePosition() and loading the nodes with the stored positions, the freezeForStabilization option freezes all nodes that have been supplied with
+    With the advent of the storePositions() function, the positions of the nodes can be saved after they are stabilized. The smoothCurves require support nodes and those positions are not stored. In order
+    to speed up the initialization of the network by using storePositions() and loading the nodes with the stored positions, the freezeForStabilization option freezes all nodes that have been supplied with
     an x and y position in place during the stabilization. That way only the support nodes for the smooth curves have to stabilize, greatly speeding up the stabilization process with cached positions.
   </td>
 </tr>
@@ -2139,6 +2141,12 @@ var options: {
             Zooming in is > 1.0, zooming out is < 0. Scale cannot be smaller or equal to 0.
         </td>
     </tr>
+    <tr>
+        <td>getCenterCoordinates()</td>
+        <td>Number</td>
+        <td>Returns the x and y coodinates of the center of the screen (in canvas space).
+        </td>
+    </tr>
     <tr>
     <td>getSelection()</td>
     <td>Array of ids</td>
@@ -2153,7 +2161,7 @@ var options: {
     <td>This function will move the view to center on the specified node. An optional options object can submitted where you can define the animation properties. <br />
         The options that can be defined are:<br />
         <b><code>scale:Number</code></b><br /> - to zoom to that scale,<br />
-        <b><code>offset:{x:Number, y:Number}</code></b><br /> - to offset the position from the center of the canvas (in DOM units),<br />
+        <b><code>offset:{x:Number, y:Number}</code></b><br /> - to offset the position from the center of the canvas (in pixels),<br />
         <b><code>locked: boolean</code></b><br /> - if true, the view remains locked on this node until either another focusOnNode, moveTo, releaseNode or drag is done <br />
         <b><code>animation: Object || Boolean</code></b><br /> - to define the specifics of the animation. True is animated with default settings, false is not animated.<br />
         <br />
@@ -2171,13 +2179,6 @@ var options: {
     <td>When locked on to a node, this function releases it again. If the view is not locked onto a node due to the focusOnNode locked option, nothing happens.
     </td>
   </tr>
-  <tr>
-    <td>storePosition()</td>
-    <td>none</td>
-    <td>This will put the X and Y positions of all nodes in the dataset. It will also include allowedToMoveX and allowedToMoveY with the correct values.
-      You can use this to stablize your network once, then save the positions in a database so the next time you load the nodes, stabilization will be near instantaneous.
-    </td>
-  </tr>
   <tr>
     <td>DOMtoCanvas(pos)</td>
     <td>object</td>
@@ -2267,16 +2268,6 @@ var options: {
       edges with id 3 and 5.
     </td>
   </tr>
-  <tr>
-    <td>setSelection(selection)</td>
-    <td>none</td>
-    <td>Select nodes [deprecated].
-      <code>selection</code> is an array with ids of nodes to be selected.
-      The array <code>selection</code> can contain zero or multiple ids.
-      Example usage: <code>network.setSelection([3, 5]);</code> will select
-      nodes with id 3 and 5.
-    </td>
-  </tr>
 
   <tr>
     <td>setSize(width, height)</td>
@@ -2285,7 +2276,22 @@ var options: {
       containing a new size for the visualization. Size can be provided in pixels
       or in percentages.</td>
   </tr>
-
+    <tr>
+        <td>getPositions([ids])</td>
+        <td>Object</td>
+        <td>This will return an object of all nodes' positions. Data can be accessed with object[nodeId].x and .y. You can optionally supply an id as string or number or an array of ids. If no id or array of ids have been supplied, all positions are returned.
+        </td>
+    </tr>
+    <tr>
+        <td>storePositions()</td>
+        <td>none</td>
+        <td>When using the vis.DataSet to load your nodes into the network, this method will put the X and Y positions of all nodes into that dataset. It will also include allowedToMoveX and allowedToMoveY with the correct values.
+            If you're loading your nodes from a database and have this dynamically coupled with the DataSet, you can use this
+            to stablize your network once, then save the positions in that database through the DataSet so the next time you load the nodes, stabilization will be near instantaneous.
+            If the nodes are still moving and you're using dynamic smooth edges (which is on by default), you can use the option freezeForStabilization to improve initialization time.
+            <br><br><i><code>NOTE:</code>This method does not work with the hierarchical layout because the hierarchical algorithm is assigning X Y positions on load, regardless of the ones you supply it with.</i>
+        </td>
+    </tr>
   <tr>
     <td>zoomExtent([options])</td>
     <td>none</td>
@@ -2416,6 +2422,8 @@ network.off('select', onSelect);
       <ul>
         <li><code>width</code>: the new width of the canvas</li>
         <li><code>height</code>: the new height of the canvas</li>
+        <li><code>oldWidth</code>: the old width of the canvas</li>
+        <li><code>oldHeight</code>: the old height of the canvas</li>
       </ul>
     </td>
   </tr>
@@ -2437,13 +2445,20 @@ network.off('select', onSelect);
             </ul>
         </td>
     </tr>
-  <tr>
-    <td>stabilized</td>
-    <td>Fired every time the network has been stabilized. This event can be used to trigger the .storePosition() function after stabilization. Fired with an object having the following properties:</td>
-    <td>
-      <ul>
-        <li><code>iterations</code>: number of iterations used to stabilize</li>
-      </ul>
+    <tr>
+        <td>startStabilization</td>
+        <td>Fired once when the network starts the physics calculation. This ends with the stabilized event.
+        <td>
+        none
+        </td>
+    </tr>
+    <tr>
+        <td>stabilized</td>
+        <td>Fired every time the network has been stabilized. This event can be used to trigger the .storePositions() function after stabilization. Fired with an object having the following properties:</td>
+        <td>
+        <ul>
+           <li><code>iterations</code>: number of iterations used to stabilize</li>
+        </ul>
     </td>
   </tr>
   <tr>
@@ -2455,7 +2470,7 @@ network.off('select', onSelect);
   </tr>
   <tr>
     <td>zoom</td>
-    <td>Fired when the network has zoomed.  This event can be used to trigger the .storePosition() function after stabilization.</td>
+    <td>Fired when the network has zoomed.  This event can be used to trigger the .storePositions() function after stabilization.</td>
     <td>
       <ul>
         <li><code>direction: </code> "+" or "-" </li>

docs/timeline.html

@@ -111,17 +111,21 @@
 
 The constructor of the Timeline is <code>vis.Timeline</code>
 <pre class="prettyprint lang-js">var timeline = new vis.Timeline(container, items, options);</pre>
+or when using groups:
+<pre class="prettyprint lang-js">var timeline = new vis.Timeline(container, items, groups, options);</pre>
 
-
-The constructor accepts three parameters:
+The constructor accepts four parameters:
 <ul>
   <li>
     <code>container</code> is the DOM element in which to create the timeline.
   </li>
   <li>
     <code>items</code> is an Array containing items. The properties of an
-    item are described in section <a href="#Data_Format">Data Format</a>.
-  </li>
+    item are described in section <a href="#Data_Format">Data Format, items</a>.
+  </li><li>
+        <code>groups</code> is an Array containing groups. The properties of a
+        group are described in section <a href="#groups">Data Format, groups</a>.
+    </li>
   <li>
     <code>options</code> is an optional Object containing a name-value map
     with options. Options can also be set using the method
@@ -145,7 +149,8 @@ The constructor accepts three parameters:
   The Timeline uses regular Arrays and Objects as data format.
   Data items can contain the properties <code>start</code>,
   <code>end</code> (optional), <code>content</code>,
-  <code>group</code> (optional), and <code>className</code> (optional).
+  <code>group</code> (optional), <code>className</code> (optional),
+  and <code>style</code> (optional).
 </p>
 
 <p>
@@ -158,7 +163,7 @@ var items = [
     start: new Date(2010, 7, 15),
     end: new Date(2010, 8, 2),  // end is optional
     content: 'Trajectory A'
-    // Optional: fields 'id', 'type', 'group', 'className'
+    // Optional: fields 'id', 'type', 'group', 'className', 'style'
   }
   // more items...
 ]);
@@ -231,6 +236,15 @@ var items = [
     <td>yes</td>
     <td>The start date of the item, for example <code>new Date(2010,9,23)</code>.</td>
   </tr>
+  <tr>
+    <td>style</td>
+    <td>String</td>
+    <td>no</td>
+    <td>
+      A css text string to apply custom styling for an individual item, for
+      example <code>"color: red; background-color: pink;"</code>.
+    </td>
+  </tr>
   <tr>
     <td>title</td>
     <td>String</td>
@@ -259,7 +273,7 @@ var items = [
   <code>content</code>, and <code>className</code> (optional).
 </p>
 <p>
-  Groups can be applied to a timeline using the method <code>setGroups</code>.
+  Groups can be applied to a timeline using the method <code>setGroups</code> or supplied in the constructor.
   A table with groups can be created like:
 </p>
 
@@ -268,7 +282,7 @@ var groups = [
   {
     id: 1,
     content: 'Group 1'
-    // Optional: a field 'className'
+    // Optional: a field 'className', 'style'
   }
   // more groups...
 ]);
@@ -316,6 +330,15 @@ var groups = [
       property <code>group</code> which matches the <code>id</code>
       of the group.</td>
   </tr>
+  <tr>
+    <td>style</td>
+    <td>String</td>
+    <td>no</td>
+    <td>
+      A css text string to apply custom styling for an individual group label, for
+      example <code>"color: red; background-color: pink;"</code>.
+    </td>
+  </tr>
   <tr>
     <td>title</td>
     <td>String</td>
@@ -381,9 +404,10 @@ var options = {
 
 <tr>
   <td>dataAttributes</td>
-  <td>Array[String]</td>
+  <td>Array[String] | 'all'</td>
   <td>false</td>
-  <td>An array of fields optionally defined on the timeline items that will be appended as <code>data-</code> attributes to the DOM element of the items.</td>
+  <td>An array of fields optionally defined on the timeline items that will be appended as <code>data-</code> attributes to the DOM element of the items.<br>
+    If value is <code>'all'</code> then each field defined on the timeline item will become a <code>data-</code> attribute.</td>
 </tr>
 
 
@@ -455,6 +479,16 @@ var options = {
     </td>
 </tr>
 
+<tr>
+    <td>hiddenDates</td>
+    <td>Object</td>
+    <td>none</td>
+    <td>This option allows you to hide specific timespans from the time axis. The dates can be supplied as an object:
+        <code>{start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00', [repeat:'daily']}</code> or as an Array of these objects. The repeat argument is optional.
+        The possible values are (case-sensitive): <code>daily, weekly, monthly, yearly</code>. To hide a weekend, pick any Saturday as start and the following Monday as end
+        and set repeat to weekly.
+    </td>
+</tr>
 <tr>
     <td>locale</td>
     <td>String</td>

examples/graph2d/03_groups.html

@@ -105,7 +105,7 @@
       start: '2014-06-10',
       end: '2014-07-04'
   };
-  var graph2d = new vis.Graph2d(container, dataset, options, groups);
+  var graph2d = new vis.Graph2d(container, dataset, groups, options);
 
 </script>
 </body>

examples/graph2d/04_rightAxis.html

@@ -119,7 +119,7 @@
         end: '2014-07-04',
         movable: false
     };
-    var graph2d = new vis.Graph2d(container, dataset, options, groups);
+    var graph2d = new vis.Graph2d(container, dataset, groups, options);
 
 </script>
 </body>

examples/graph2d/05_bothAxis.html

@@ -131,7 +131,7 @@
         start: '2014-06-09',
         end: '2014-07-03'
     };
-    var graph2d = new vis.Graph2d(container, items, options, groups);
+    var graph2d = new vis.Graph2d(container, items, groups, options);
 
 </script>
 </body>

examples/graph2d/06_interpolation.html

@@ -94,7 +94,7 @@
         start: '2014-06-11',
         end: '2014-06-22'
     };
-    var graph2d = new vis.Graph2d(container, dataset, options, groups);
+    var graph2d = new vis.Graph2d(container, dataset, groups, options);
 
 </script>
 </body>

examples/graph2d/09_external_legend.html

@@ -287,7 +287,7 @@
         start: '2014-06-09',
         end: '2014-07-03'
     };
-    var graph2d = new vis.Graph2d(container, items, options, groups);
+    var graph2d = new vis.Graph2d(container, items, groups, options);
 
 
     /**

examples/graph2d/11_barsSideBySideGroups.html

@@ -71,7 +71,7 @@
         start: '2014-06-10',
         end: '2014-06-18'
     };
-    var graph2d = new vis.Graph2d(container, items, options,groups);
+    var graph2d = new vis.Graph2d(container, items, groups, options);
 
     var dropdown = document.getElementById("dropdownID");
     dropdown.onchange = update;

examples/graph2d/12_customRange.html

@@ -87,7 +87,7 @@ var options = {
         start: '2014-06-10',
         end: '2014-06-18'
     };
-    var graph2d = new vis.Graph2d(container, items, options,groups);
+    var graph2d = new vis.Graph2d(container, items, groups, options);
 
 </script>
 </body>

examples/graph2d/14_toggleGroups.html

@@ -128,12 +128,12 @@
       showMajorLabels:false,
       showMinorLabels:false
   };
-  var graph2d1 = new vis.Graph2d(document.getElementById('visualization1'), dataset, options, groups);
-  var graph2d2 = new vis.Graph2d(document.getElementById('visualization2'), dataset, options, groups);
-  var graph2d3 = new vis.Graph2d(document.getElementById('visualization3'), dataset, options, groups);
-  var graph2d4 = new vis.Graph2d(document.getElementById('visualization4'), dataset, options, groups);
-  var graph2d5 = new vis.Graph2d(document.getElementById('visualization5'), dataset, options, groups);
-  var graph2d6 = new vis.Graph2d(document.getElementById('visualization6'), dataset, options, groups);
+  var graph2d1 = new vis.Graph2d(document.getElementById('visualization1'), dataset, groups, options);
+  var graph2d2 = new vis.Graph2d(document.getElementById('visualization2'), dataset, groups, options);
+  var graph2d3 = new vis.Graph2d(document.getElementById('visualization3'), dataset, groups, options);
+  var graph2d4 = new vis.Graph2d(document.getElementById('visualization4'), dataset, groups, options);
+  var graph2d5 = new vis.Graph2d(document.getElementById('visualization5'), dataset, groups, options);
+  var graph2d6 = new vis.Graph2d(document.getElementById('visualization6'), dataset, groups, options);
 
   graph2d1.setOptions({groups:{visibility:{0:true, 1:false, 2:false, 3:false, "__ungrouped__":false}}})
   graph2d2.setOptions({groups:{visibility:{0:false, 1:true, 2:false, 3:false, "__ungrouped__":false}}})

examples/graph3d/example12_ticks.html

@@ -0,0 +1,115 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Graph 3D Axis Ticks</title>
+
+  <style>
+    body {font: 10pt arial;}
+  </style>
+
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+
+  <script type="text/javascript">
+    var data = null;
+    var graph = null;
+
+    function custom(x, y) {
+      return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10) * 1000;
+    }
+
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      var style = document.getElementById('style').value;
+      var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
+
+      // Create and populate a data table.
+      data = new vis.DataSet();
+
+      // create some nice looking data with sin/cos
+      var steps = 5;  // number of datapoints will be steps*steps
+      var axisMax = 10;
+      var axisStep = axisMax / steps;
+      for (var x = 0; x <= axisMax; x+=axisStep) {
+        for (var y = 0; y <= axisMax; y+=axisStep) {
+          var z = custom(x,y);
+          if (withValue) {
+            var value = (y - x);
+            data.add({x:x, y:y, z: z, style:value});
+          }
+          else {
+            data.add({x:x, y:y, z: z});
+          }
+        }
+      }
+
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: style,
+        showPerspective: true,
+        showGrid: true,
+        showShadow: false,
+
+        // Option tooltip can be true, false, or a function returning a string with HTML contents
+        //tooltip: true,
+        tooltip: function (point) {
+          // parameter point contains properties x, y, z
+          return 'value: <b>' + point.z + '</b>';
+        },
+        
+        xValueLabel: function(value) {
+            return vis.moment().add(value, 'days').format('DD MMM');
+        },
+        
+        yValueLabel: function(value) {
+            return value * 10 + '%';
+        },
+
+        zValueLabel: function(value) {
+            return value / 1000 + 'K';
+        },
+
+        keepAspectRatio: true,
+        verticalRatio: 0.5
+      };
+
+      var camera = graph ? graph.getCameraPosition() : null;
+
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+
+      if (camera) graph.setCameraPosition(camera); // restore camera position
+
+      document.getElementById('style').onchange = drawVisualization;
+    }
+  </script>
+</head>
+
+<body onload="drawVisualization()">
+
+<p>
+  <label for="style"> Style:
+    <select id="style">
+      <option value="bar">bar</option>
+      <option value="bar-color">bar-color</option>
+      <option value="bar-size">bar-size</option>
+
+      <option value="dot">dot</option>
+      <option value="dot-line">dot-line</option>
+      <option value="dot-color">dot-color</option>
+      <option value="dot-size">dot-size</option>
+
+      <option value="grid">grid</option>
+      <option value="line">line</option>
+      <option value="surface">surface</option>
+    </select>
+  </label>
+</p>
+
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>

examples/graph3d/index.html

@@ -18,6 +18,7 @@
   <p><a href="example09_mobile.html">example09_mobile.html</a></p>
   <p><a href="example10_styles.html">example10_styles.html</a></p>
   <p><a href="example11_tooltips.html">example11_tooltips.html</a></p>
+  <p><a href="example12_ticks.html">example12_ticks.html</a></p>
 
   <h1>Playground</h1>
   <p><a href="playground">Open the playground</a></p>

examples/network/02_random_nodes.html

@@ -83,7 +83,10 @@
         document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
       });
       network.on('stabilized', function (params) {
-          document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
+        document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
+      });
+      network.on('startStabilization', function (params) {
+        document.getElementById('stabilization').innerHTML = 'Stabilizing...';
       });
     }
 

examples/timeline/24_all_data_attributes.html

@@ -0,0 +1,43 @@
+<!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>
+<p>
+  In this example all items get HTML attributes attached: each item gets <code>data-?</code> attributes for each field defined on the JS object.
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('visualization');
+
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+    {id: 1, content: 'item 1', start: '2014-04-20', tooltip: 'This is item 1'},
+    {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', tooltip: 'This is item 6'}
+  ]);
+
+  // Configuration for the Timeline
+  var options = {dataAttributes: 'all'};
+
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+</script>
+</body>
+</html>

examples/timeline/25_background_areas.html

@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Background areas</title>
+
+  <style>
+    body, html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+
+    .vis.timeline .item.background.negative {
+      background-color: rgba(255, 0, 0, 0.2);
+    }
+    .vis.timeline .item.background.marker {
+      border-left: 2px solid green;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+<p>This example demonstrates the item type "background", see "Period A" and "Period B". The background areas can be styled with css.</p>
+
+<div id="visualization"></div>
+
+<script>
+  var items = new vis.DataSet([
+    {id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background'},
+    {id: 'B', content: 'Period B', start: '2014-01-25', end: '2014-01-30', type: 'background', className: 'negative'},
+    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
+    {id: 2, content: 'item 2', start: '2014-01-18'},
+    {id: 3, content: 'item 3', start: '2014-01-21'},
+    {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
+    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
+    {id: 6, content: 'item 6', start: '2014-01-26'}
+  ]);
+
+  var container = document.getElementById('visualization');
+  var options = {
+    start: '2014-01-10',
+    end: '2014-02-10',
+    editable: true
+  };
+
+  var timeline = new vis.Timeline(container, items, options);
+
+</script>
+</body>
+</html>

examples/timeline/27_templates.html

@@ -0,0 +1,250 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Templates</title>
+
+  <!-- load handlebars for templating, and create a template -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
+  <script id="item-template" type="text/x-handlebars-template">
+    <table class="score">
+      <tr>
+        <td colspan="3" class="description">{{description}}</td>
+      </tr>
+      <tr>
+        <td>{{player1}}</td>
+        <th>{{score1}} - {{score2}}</th>
+        <td>{{player2}}</td>
+      </tr>
+      <tr>
+        <td><img src="http://flagpedia.net/data/flags/mini/{{abbr1}}.png" width="31" height="20" alt="{{abbr1}}"></td>
+        <th></th>
+        <td><img src="http://flagpedia.net/data/flags/mini/{{abbr2}}.png" width="31" height="20" alt="{{abbr2}}"></td>
+      </tr>
+    </table>
+  </script>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+      font-size: 10pt;
+    }
+
+    .vis.timeline .item {
+      border-color: #acacac;
+      background-color: #efefef;
+      box-shadow: 5px 5px 10px rgba(128,128,128, 0.3);
+    }
+
+    table .description {
+      font-style: italic;
+    }
+
+    #visualization {
+      position: relative;
+      overflow: hidden;
+    }
+
+    .logo {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+    }
+    .logo img {
+      width: 120px;
+    }
+  </style>
+
+</head>
+<body>
+<h1>WK 2014</h1>
+<p style="max-width: 600px;">
+  This example demonstrates using templates to format item contents. In this case <a href="http://handlebarsjs.com">handlebars</a> is used as template engine, but you can just use your favorite template engine or manually craft HTML from the data of an item.
+</p>
+
+<div id="visualization">
+  <div class="logo"><img src="http://upload.wikimedia.org/wikipedia/en/e/e8/WC-2014-Brasil.svg"></div>
+</div>
+
+<script type="text/javascript">
+  // create a handlebars template
+  var source   = document.getElementById('item-template').innerHTML;
+  var template = Handlebars.compile(document.getElementById('item-template').innerHTML);
+
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('visualization');
+
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+    // round of 16
+    {
+      player1: 'Brazil',
+      abbr1: 'br',
+      score1: '1 (3)',
+      player2: 'Chile',
+      abbr2: 'cl',
+      score2: '1 (2)',
+      description: 'round of 16',
+      start: '2014-06-28 13:00'
+    },
+    {
+      player1: 'Colombia',
+      abbr1: 'co',
+      score1: 2,
+      player2: 'Uruguay',
+      abbr2: 'uy',
+      score2: 0,
+      description: 'round of 16',
+      start: '2014-06-28 17:00'
+    },
+    {
+      player1: 'Netherlands',
+      abbr1: 'nl',
+      score1: 2,
+      player2: 'Mexico',
+      abbr2: 'mx',
+      score2: 1,
+      description: 'round of 16',
+      start: '2014-06-29 13:00'
+    },
+    {
+      player1: 'Costa Rica',
+      abbr1: 'cr',
+      score1: '1 (5)',
+      player2: 'Greece',
+      abbr2: 'gr',
+      score2: '1 (3)',
+      description: 'round of 16',
+      start: '2014-06-29 17:00'
+    },
+    {
+      player1: 'France',
+      abbr1: 'fr',
+      score1: 2,
+      player2: 'Nigeria',
+      abbr2: 'ng',
+      score2: 0,
+      description: 'round of 16',
+      start: '2014-06-30 13:00'
+    },
+    {
+      player1: 'Germany',
+      abbr1: 'de',
+      score1: 2,
+      player2: 'Algeria',
+      abbr2: 'dz',
+      score2: 1,
+      description: 'round of 16',
+      start: '2014-06-30 17:00'
+    },
+    {
+      player1: 'Argentina',
+      abbr1: 'ar',
+      score1: 1,
+      player2: 'Switzerland',
+      abbr2: 'ch',
+      score2: 0,
+      description: 'round of 16',
+      start: '2014-07-01 13:00'
+    },
+    {
+      player1: 'Belgium',
+      abbr1: 'be',
+      score1: 2,
+      player2: 'USA',
+      abbr2: 'us',
+      score2: 1,
+      description: 'round of 16',
+      start: '2014-07-01 17:00'
+    },
+
+    // quarter-finals
+    {
+      player1: 'France',
+      abbr1: 'fr',
+      score1: 0,
+      player2: 'Germany',
+      abbr2: 'de',
+      score2: 1,
+      description: 'quarter-finals',
+      start: '2014-07-04 13:00'
+    },
+    {
+      player1: 'Brazil',
+      abbr1: 'br',
+      score1: 2,
+      player2: 'Colombia',
+      abbr2: 'co',
+      score2: 1,
+      description: 'quarter-finals',
+      start: '2014-07-04 17:00'
+    },
+    {
+      player1: 'Argentina',
+      abbr1: 'ar',
+      score1: 1,
+      player2: 'Belgium',
+      abbr2: 'be',
+      score2: 0,
+      description: 'quarter-finals',
+      start: '2014-07-05 13:00'
+    },
+    {
+      player1: 'Netherlands',
+      abbr1: 'nl',
+      score1: '0 (4)',
+      player2: 'Costa Rica',
+      abbr2: 'cr',
+      score2: '0 (3)',
+      description: 'quarter-finals',
+      start: '2014-07-05 17:00'
+    },
+
+    // semi-finals
+    {
+      player1: 'Brazil',
+      abbr1: 'br',
+      score1: 1,
+      player2: 'Germany',
+      abbr2: 'de',
+      score2: 7,
+      description: 'semi-finals',
+      start: '2014-07-08 17:00'
+    },
+    {
+      player1: 'Netherlands',
+      abbr1: 'nl',
+      score1: '0 (2)',
+      player2: 'Argentina',
+      abbr2: 'ar',
+      score2: '0 (4)',
+      description: 'semi-finals',
+      start: '2014-07-09 17:00'
+    },
+
+    // final
+    {
+      player1: 'Germany',
+      score1: 1,
+      abbr1: 'de',
+      player2: 'Argentina',
+      abbr2: 'ar',
+      score2: 0,
+      description: 'final',
+      start: '2014-07-13 16:00'
+    }
+  ]);
+
+  // Configuration for the Timeline
+  var options = {
+    // specify a template for the items
+    template: template
+  };
+
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+</script>
+</body>
+</html>

examples/timeline/29_hiding_times.html

@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Timeline | Hiding times demo</title>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css"/>
+</head>
+<body>
+<div id="visualization"></div>
+<script type="text/javascript">
+    // DOM element where the Timeline will be attached
+    var container = document.getElementById('visualization');
+
+    // Create a DataSet (allows two way data-binding)
+    var items = new vis.DataSet([
+        {id: 1, content: 'item 1', start: '2014-04-19'},
+        {id: 2, content: 'item 2', start: '2014-04-21'},
+        {id: 3, content: 'item 3', start: '2014-04-18'},
+        {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-24'},
+        {id: 5, content: 'item 5', start: '2014-04-26 12:00:00'},
+        {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
+    ]);
+
+    // Configuration for the Timeline
+    var options = {
+        hiddenDates: [
+            {start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00'},
+            {start: '2013-03-29 00:00:00', end: '2013-03-31 00:00:00', repeat: 'weekly'}, // daily weekly monthly yearly
+            {start: '2013-03-29 20:00:00', end: '2013-03-31 9:00:00', repeat: 'daily'} // daily weekly monthly yearly
+        ],
+        start: '2014-04-17',
+        end: '2014-05-01',
+        height: '200px',
+        editable: true,
+        showCustomTime: true
+    };
+
+    // Create a Timeline
+    var timeline = new vis.Timeline(container, items, options);
+    timeline.setCustomTime("2014-04-18 13:00:00");
+</script>
+</body>
+</html>

examples/timeline/30_subgroups.html

@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Timeline | Background areas</title>
+
+    <style>
+        body, html {
+            font-family: arial, sans-serif;
+            font-size: 11pt;
+        }
+
+        .vis.timeline .item.background.negative {
+            background-color: rgba(255, 0, 0, 0.2);
+        }
+        .vis.timeline .item.background.positive {
+            background-color: rgba(105, 255, 98, 0.20);
+        }
+        .vis.timeline .item.background.marker {
+            border-left: 2px solid green;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+<p>This example demonstrates the item type "background", see "Period A" and "Period B". The background areas can be styled with css.</p>
+
+<div id="visualization"></div>
+
+<script>
+    // create a dataset with items
+    // we specify the type of the fields `start` and `end` here to be strings
+    // containing an ISO date. The fields will be outputted as ISO dates
+    // automatically getting data from the DataSet via items.get().
+    var items = new vis.DataSet({
+        type: { start: 'ISODate', end: 'ISODate' }
+    });
+    var groups = new vis.DataSet([{
+        id: 'bar', content:'bar'
+    },{
+        id: 'foo', content:'foo'
+    }]);
+    // add items to the DataSet
+    items.add([
+        {id: 'A', content:'1',start: '2014-01-20', end: '2014-01-22', type: 'background', group:'foo'},
+        {id: 'B', content:'1',start: '2014-01-22', end: '2014-01-23', type: 'background', group:'foo', className: 'negative'},
+        {id: 0, content: 'item 4', start: '2014-01-20', end: '2014-01-22',group:'foo'},
+
+        {id: 'ab', content:'1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'banana'},
+        {id: 'bb', content:'1',start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'banana'},
+        {id: 1, content: '0', start: '2014-01-25 12:00:00', end: '2014-01-26 12:00:00',group:'bar', subgroup:'banana'},
+        {id: 'aab', content:'1',start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'putty'},
+        {id: 'bab', content:'1',start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'putty'},
+        {id: 'bdab', content:'1',start: '2014-01-29', end: '2014-01-30', type: 'background', className: 'negative',group:'bar'},
+        {id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'putty'},
+    ]);
+
+    var container = document.getElementById('visualization');
+    var options = {
+        start: '2014-01-10',
+        end: '2014-02-10',
+        editable: true,
+        stack: false,
+//        orientation:'top'
+    };
+
+    var timeline = new vis.Timeline(container, items, groups, options);
+
+</script>
+</body>
+</html>

examples/timeline/31_background_areas_with_groups.html

@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Background areas with groups</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>This example demonstrates the item type "background" when using groups.</p>
+<ul>
+  <li>Background items having a group are displayed in that group</li>
+  <li>Background items without a group are spread over the whole timeline</li>
+  <li>Background items with a non-existing group are not displayed</li>
+</ul>
+<div id="visualization"></div>
+
+<script>
+  var items = new vis.DataSet([
+    {id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background', group: 1},
+    {id: 'B', content: 'Period B', start: '2014-01-23', end: '2014-01-26', type: 'background', group: 2},
+    {id: 'C', content: 'Period C', start: '2014-01-27', end: '2014-02-03', type: 'background'}, // no group
+    {id: 'D', content: 'Period D', start: '2014-01-14', end: '2014-01-20', type: 'background', group: 'non-existing'},
+    {id: 1, content: 'item 1<br>start', start: '2014-01-30', group: 1},
+    {id: 2, content: 'item 2', start: '2014-01-18', group: 1},
+    {id: 3, content: 'item 3', start: '2014-01-21', group: 2},
+    {id: 4, content: 'item 4', start: '2014-01-17', end: '2014-01-21', group: 2},
+    {id: 5, content: 'item 5', start: '2014-01-28', type:'point', group: 2},
+    {id: 6, content: 'item 6', start: '2014-01-25', group: 2}
+  ]);
+
+  var groups = new vis.DataSet([
+    {id: 1, content: 'Group 1'},
+    {id: 2, content: 'Group 2'}
+  ]);
+
+  var container = document.getElementById('visualization');
+  var options = {
+    start: '2014-01-10',
+    end: '2014-02-10',
+    editable: true
+  };
+
+  var timeline = new vis.Timeline(container, items, groups, options);
+
+</script>
+</body>
+</html>

examples/timeline/index.html

@@ -35,9 +35,13 @@
   <p><a href="21_set_selection.html">21_set_selection.html</a></p>
   <p><a href="22_window_adjustment.html">22_window_adjustment.html</a></p>
   <p><a href="23_data_attributes.html">23_data_attributes.html</a></p>
-  <p><a href="24_background_areas.html">24_background_areas.html</a></p>
-  <p><a href="25_templates.html">25_templates.html</a></p>
+  <p><a href="24_all_data_attributes.html">24_all_data_attributes.html</a></p>
+  <p><a href="25_background_areas.html">25_background_areas.html</a></p>
   <p><a href="26_external_data.html">26_external_data.html</a></p>
+  <p><a href="27_templates.html">27_templates.html</a></p>
+  <p><a href="29_hiding_times.html">29_hiding_times.html</a></p>
+  <p><a href="30_subgroups.html">30_subgroups.html</a></p>
+  <p><a href="31_background_areas_with_groups.html">31_background_areas_with_groups.html</a></p>
 
   <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>
 

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">3.5.0</span>)
+(version <span class="version">3.6.0</span>)
 
 
 <h2 id="example">Example</h2>