Released vis.js v3.11.0

dist/vis.css

@@ -266,6 +266,7 @@
 .vis.timeline .item.range .drag-left {
   position: absolute;
   width: 24px;
+  max-width: 20%;
   height: 100%;
   top: 0;
   left: -4px;
@@ -276,6 +277,7 @@
 .vis.timeline .item.range .drag-right {
   position: absolute;
   width: 24px;
+  max-width: 20%;
   height: 100%;
   top: 0;
   right: -4px;
@@ -613,9 +615,8 @@ div.network-manipulationDiv {
 div.network-manipulation-editMode {
   position:absolute;
   left: 0;
-  top: 0;
+  top: 15px;
   height: 30px;
-  margin-top:20px;
 }
 
 div.network-manipulation-closeDiv {
@@ -641,7 +642,9 @@ div.network-manipulation-closeDiv:hover {
   opacity: 0.6;
 }
 
-span.network-manipulationUI {
+div.network-manipulationUI {
+    position:relative;
+    top:-7px;
   font-family: verdana;
   font-size: 12px;
   -moz-border-radius: 15px;
@@ -650,7 +653,7 @@ span.network-manipulationUI {
   background-position: 0px 0px;
   background-repeat:no-repeat;
   height:24px;
-  margin: -14px 0px 0px 10px;
+  margin: 0px 0px 0px 10px;
   vertical-align:middle;
   cursor: pointer;
   padding: 0px 8px 0px 8px;
@@ -662,57 +665,57 @@ span.network-manipulationUI {
   user-select: none;
 }
 
-span.network-manipulationUI:hover {
+div.network-manipulationUI:hover {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
 }
 
-span.network-manipulationUI:active {
+div.network-manipulationUI:active {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
 }
 
-span.network-manipulationUI.back {
+div.network-manipulationUI.back {
   background-image: url("img/network/backIcon.png");
 }
 
-span.network-manipulationUI.none:hover {
+div.network-manipulationUI.none:hover {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
   cursor: default;
 }
-span.network-manipulationUI.none:active {
+div.network-manipulationUI.none:active {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
 }
-span.network-manipulationUI.none {
+div.network-manipulationUI.none {
   padding: 0;
 }
-span.network-manipulationUI.notification{
+div.network-manipulationUI.notification{
   margin: 2px;
   font-weight: bold;
 }
 
-span.network-manipulationUI.add {
+div.network-manipulationUI.add {
   background-image: url("img/network/addNodeIcon.png");
 }
 
-span.network-manipulationUI.edit {
+div.network-manipulationUI.edit {
   background-image: url("img/network/editIcon.png");
 }
 
-span.network-manipulationUI.edit.editmode {
+div.network-manipulationUI.edit.editmode {
   background-color: #fcfcfc;
   border-style:solid;
   border-width:1px;
   border-color: #cccccc;
 }
 
-span.network-manipulationUI.connect {
+div.network-manipulationUI.connect {
   background-image: url("img/network/connectIcon.png");
 }
 
-span.network-manipulationUI.delete {
+div.network-manipulationUI.delete {
   background-image: url("img/network/deleteIcon.png");
 }
 /* top right bottom left */
-span.network-manipulationLabel {
+div.network-manipulationLabel {
   margin: 0px 0px 0px 23px;
   line-height: 25px;
 }

docs/dataset.html

@@ -740,9 +740,10 @@ DataSet.map(callback [, options]);
 
   <tr>
     <td>fields</td>
-    <td>String[&nbsp;]</td>
+    <td>String[&nbsp;] | Object.&lt;String,&nbsp;String&gt;</td>
     <td>
-      An array with field names.
+      An array with field names, or an object with current field name and 
+      new field name that the field is returned as.
       By default, all properties of the items are emitted.
       When <code>fields</code> is defined, only the properties
       whose name is specified in <code>fields</code> will be included

docs/dataview.html

@@ -129,9 +129,10 @@ var data = new vis.DataView(dataset, options)
 
       <tr>
         <td>fields</td>
-        <td>String[&nbsp;]</td>
+        <td>String[&nbsp;] | Object.&lt;String,&nbsp;String&gt;</td>
         <td>
-          An array with field names.
+          An array with field names, or an object with current field name and 
+          new field name that the field is returned as. 
           By default, all properties of the items are emitted.
           When <code>fields</code> is defined, only the properties
           whose name is specified in <code>fields</code> will be included

docs/graph2d.html

@@ -175,6 +175,12 @@ var items = [
     <td>no</td>
     <td>The ID of the group this point belongs to.</td>
   </tr>
+  <tr>
+    <td>label</td>
+    <td>object</td>
+    <td>no</td>
+    <td>A label object which will be displayed near to the item. A label object has one requirement - a <b> content </b> property. In addition you can set the <b> xOffset, yOffset and className </b> for further appearance customisations </td>
+  </tr>
 </table>
 
 <h3 id="groups">Groups</h3>
@@ -672,7 +678,7 @@ The options colored in green can also be used as options for the groups. All opt
     <td>orientation</td>
     <td>String</td>
     <td>'bottom'</td>
-    <td>Orientation of the timeline: 'top' or 'bottom' (default). If orientation is 'bottom', the time axis is drawn at the bottom, and if 'top', the axis is drawn on top.</td>
+    <td>Orientation of the timeline: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.</td>
   </tr>
 
   <tr>
@@ -807,6 +813,29 @@ Graph2d.clear({options: true}); // clear options only
     </td>
   </tr>
 
+  <tr>
+    <td>click</td>
+    <td>Fired when clicked inside the Graph2d.
+    </td>
+    <td>
+      Passes a properties object as returned by the method <a href="#getEventProperties"><code>Graph2d.getEventProperties(event)</code></a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>contextmenu</td>
+    <td>Fired when right-clicked inside the Graph2d. Note that in order to prevent the context menu from showing up, default behavior of the event must be stopped:
+<pre class="prettyprint lang-js">graph2d.on('contextmenu', function (props) {
+  alert('Right click!');
+  props.event.preventDefault();
+});
+</pre>
+    </td>
+    <td>
+      Passes a properties object as returned by the method <a href="#getEventProperties"><code>Graph2d.getEventProperties(event)</code></a>.
+    </td>
+  </tr>
+
   <tr>
     <td>destroy()</td>
     <td>none</td>
@@ -814,6 +843,15 @@ Graph2d.clear({options: true}); // clear options only
     </td>
   </tr>
 
+  <tr>
+    <td>doubleClick</td>
+    <td>Fired when double clicked inside the Graph2d.
+    </td>
+    <td>
+      Passes a properties object as returned by the method <a href="#getEventProperties"><code>Graph2d.getEventProperties(event)</code></a>.
+    </td>
+  </tr>
+
   <tr>
     <td>getCurrentTime()</td>
     <td>Date</td>
@@ -828,6 +866,24 @@ Graph2d.clear({options: true}); // clear options only
     </td>
   </tr>
 
+  <tr id="getEventProperties">
+    <td>getEventProperties(event)</td>
+    <td>Object</td>
+    <td>
+      Returns an Object with relevant properties from an event:
+      <ul>
+        <li><code>pageX</code> (Number): absolute horizontal position of the click event.</li>
+        <li><code>pageY</code> (Number): absolute vertical position of the click event.</li>
+        <li><code>x</code> (Number): relative horizontal position of the click event.</li>
+        <li><code>y</code> (Number): relative vertical position of the click event.</li>
+        <li><code>time</code> (Date): Date of the clicked event.</li>
+        <li><code>value</code> (Number[]): The data value of the click event. The array contains one value when there is one data axis visible, and two values when there are two visible data axes.</li>
+        <li><code>what</code> (String | null): name of the clicked thing: <code>background</code>, <code>axis</code>, <code>dat-axis</code>, <code>custom-time</code>, or <code>current-time</code>, <code>legend</code>.</li>
+        <li><code>event</code> (Object): the original click event.</li>
+      </ul>
+    </td>
+  </tr>
+
   <tr>
     <td>getLegend(groupId, iconWidth, iconHeight)</td>
     <td>SVGelement, String, String</td>

docs/network.html

@@ -165,14 +165,14 @@ The constructor accepts three parameters:
     <code>edges</code>, which both contain an array with objects.
     Optionally, data may contain an <code>options</code> object.
     The parameter <code>data</code> is optional, data can also be set using
-    the method <code>setData</code>. Section <a href="#Data_Format">Data Format</a>
+    the method <code>setData</code>. Section <a href="#Data_format">Data Format</a>
     describes the data object.
   </li>
   <li>
     <code>options</code> is an optional Object containing a name-value map
     with options. Options can also be set using the method
     <code>setOptions</code>.
-    Section <a href="#Configuration_Options">Configuration Options</a>
+    Section <a href="#Configuration_options">Configuration Options</a>
     describes the available options.
   </li>
 </ul>
@@ -214,7 +214,7 @@ var data = {
     <span style="font-weight: bold;">A property <code>options</code></span>,
     containing an object with global options.
     Options can be provided as third parameter in the network constructor
-    as well. Section <a href="#Configuration_Options">Configuration Options</a>
+    as well. Section <a href="#Configuration_options">Configuration Options</a>
     describes the available options.
 
   </li>
@@ -280,13 +280,13 @@ When using a DataSet, the network is automatically updating to changes in the Da
   <td>allowedToMoveX</td>
   <td>Boolean</td>
   <td>no</td>
-  <td>If allowedToMoveX is false, then the node will not move in the X direction from its position.</td>
+  <td>If allowedToMoveX is false, then the node will not move in the X direction from its position. This does not do anything in hierarchical views.</td>
 </tr>
 <tr>
   <td>allowedToMoveY</td>
   <td>Boolean</td>
   <td>no</td>
-  <td>If allowedToMoveY is false, then the node will not move in the Y direction from its position.</td>
+  <td>If allowedToMoveY is false, then the node will not move in the Y direction from its position. This does not do anything in hierarchical views.</td>
 </tr>
 
 <tr>
@@ -599,7 +599,14 @@ var options = {
   <td>When a Network is configured to be <code>clickToUse</code>, it will react to mouse, touch, and keyboard events only when active.
     When active, a blue shadow border is displayed around the Network. The Network is set active by clicking on it, and is changed to inactive again by clicking outside the Network or by pressing the ESC key.</td>
 </tr>
-
+    <tr>
+        <td>useDefaultGroups</td>
+        <td>boolean</td>
+        <td>true</td>
+        <td>If true, the default groups are used when groups are used. If you have defined your own groups those will be used. If you have an item with a group that is NOT in your own group list,
+            setting useDefaultGroups true will iterate over the default groups for unknown groups. If it is set to false, it will iterate over your own groups for unknown groups.
+        </td>
+    </tr>
 <tr>
   <td><a href="#Physics">physics</a></td>
   <td>Object</td>
@@ -647,7 +654,7 @@ var options = {
 </tr>
 
 <tr>
-  <td>freezeForStabilization</a></td>
+  <td>freezeForStabilization</td>
   <td>Boolean</td>
   <td>false</td>
   <td>
@@ -758,7 +765,7 @@ var options = {
   <td>smoothCurves.type</td>
   <td>String</td>
   <td>"continuous"</td>
-  <td>This option only affects NONdynamic smooth curves. The supported types are: <code>continuous, discrete, diagonalCross, straightCross, horizontal, vertical</code>. The effects of these types
+  <td>This option only affects NONdynamic smooth curves. The supported types are: <code>continuous, discrete, diagonalCross, straightCross, horizontal, vertical, curvedCW, curvedCCW</code>. The effects of these types
     are shown in examples <a href="../examples/network/26_staticSmoothCurves.html">26</a> and <a href="../examples/network/27_world_cup_network.html">27</a></td>
 </tr>
 <tr>
@@ -972,7 +979,7 @@ mySize = minSize + diff * scale;
         <td>When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. This is the minimum value of the fontSize.</td>
     </tr>
     <tr>
-        <td></td>fontSizeMax</td>
+        <td>fontSizeMax</td>
         <td>Number</td>
         <td>30</td>
         <td>When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. This is the maximum value of the fontSize.</td>
@@ -1009,7 +1016,6 @@ mySize = minSize + diff * scale;
         <td>'white'</td>
         <td>The color of the label stroke.</td>
     </tr>
-
 <tr>
     <td  class="greenField">shape</td>
     <td>string</td>
@@ -1018,7 +1024,7 @@ mySize = minSize + diff * scale;
     Choose from
     <code>ellipse</code> (default), <code>circle</code>, <code>box</code>,
     <code>database</code>, <code>image</code>, <code>circularImage</code>, <code>label</code>, <code>dot</code>,
-    <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.
+    <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and <code>icon</code>.
     <br><br>
 
     In case of <code>image</code> and <code>circularImage</code>, a property with name <code>image</code> must
@@ -1095,6 +1101,30 @@ mySize = minSize + diff * scale;
     <td>The maximum radius for a scaled node. Only applicable to shapes <code>dot</code>,
       <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>. This only does something if you supply a value.</td>
   </tr>
+  <tr>
+        <td class="greenField">iconFontFace</td>
+        <td>String</td>
+        <td>undefined</td>
+        <td>Font face for icons, for example <code>FontAwesome</code> or <code>Ionicon</code>.<br /><em>You have to link to the css defining the font by yourself (see Examples)</em></td>
+    </tr>
+    <tr>
+        <td class="greenField">icon</td>
+        <td>String</td>
+        <td>undefined</td>
+        <td>Unicode of the icon f.e. <code>\uf0c0</code> (user-icon in FontAwesome)</td>
+    </tr>
+    <tr>
+        <td class="greenField">iconSize</td>
+        <td>Number</td>
+        <td>50</td>
+        <td>Size of the icon</td>
+    </tr>
+    <tr>
+        <td class="greenField">color</td>
+        <td>String</td>
+        <td>black</td>
+        <td>Color of the icon</td>
+    </tr>
 </table>
 
 
@@ -1460,7 +1490,7 @@ To unify the physics system, the damping, repulsion distance and edge length hav
 If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters. If you want to customize the physics system easily, you can use the configurePhysics option. <br/>
 When using the hierarchical display option, hierarchicalRepulsion is automatically used as the physics solver. Similarly, if you use the hierarchicalRepulsion physics option, hierarchical display is automatically turned on with default settings.
 
-<p class="important_note">Note: if the behaviour of your network is not the way you want it, use configurePhysics as described <u><a href="#PhysicsConfiguration">below</a></u> or by <u><a href="../examples/network/25_physics_configuration.html">example 25</a></u>.</p>
+<p class="important_note">Note: if the behaviour of your network is not the way you want it, use configurePhysics as described <u><a href="#PhysicsConfiguration">below</a></u> or by <u><a href="../examples/network/25_physics_configuration.html">example 25</a></u>.
 </p>
 <pre class="prettyprint">
 // These variables must be defined in an options object named physics.
@@ -2625,6 +2655,13 @@ network.off('select', onSelect);
         none
         </td>
     </tr>
+    <tr>
+        <td>stabilizationIterationsDone</td>
+        <td>Fired once when the network finished the initial stabilization run. This is fired REGARDLESS if the network has stabilized. It only means that the amount of configured stabilizationIterations have been completed.
+        <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>

docs/timeline.html

@@ -205,7 +205,7 @@ var items = [
   </tr>
   <tr>
     <td>end</td>
-    <td>Date</td>
+    <td>Date | number | string | Moment</td>
     <td>no</td>
     <td>The end date of the item. The end date is optional, and can be left <code>null</code>.
       If end date is provided, the item is displayed as a range.
@@ -232,7 +232,7 @@ var items = [
   </tr>
   <tr>
     <td>start</td>
-    <td>Date</td>
+    <td>Date | number | string | Moment</td>
     <td>yes</td>
     <td>The start date of the item, for example <code>new Date(2010,9,23)</code>.</td>
   </tr>
@@ -468,7 +468,7 @@ var options = {
 
 <tr>
     <td>end</td>
-    <td>Date | Number | String</td>
+    <td>Date | Number | String | Moment</td>
     <td>none</td>
     <td>The initial end date for the axis of the timeline.
         If not provided, the latest date present in the items set is taken as
@@ -584,7 +584,7 @@ var options = {
 
 <tr>
     <td>max</td>
-    <td>Date | Number | String</td>
+    <td>Date | Number | String | Moment</td>
     <td>none</td>
     <td>Set a maximum Date for the visible range.
         It will not be possible to move beyond this maximum.
@@ -600,7 +600,7 @@ var options = {
 
 <tr>
     <td>min</td>
-    <td>Date | Number | String</td>
+    <td>Date | Number | String | Moment</td>
     <td>none</td>
     <td>Set a minimum Date for the visible range.
         It will not be possible to move beyond this minimum.
@@ -664,24 +664,25 @@ var options = {
     </td>
 </tr>
 
-<!-- TODO: cleanup option order
 <tr>
   <td>order</td>
   <td>Function</td>
   <td>none</td>
-  <td>Provide a custom sort function to order the items. The order of the
+  <td>
+    <p>Provide a custom sort function to order the items. The order of the
     items is determining the way they are stacked. The function
-    order is called with two parameters, both of type
-    `vis.components.items.Item`.
+    order is called with two arguments containing the data of two items to be
+    compared.
+    </p>
+    <p style="font-style: italic">WARNING: Use with caution. Custom ordering is not suitable for large amounts of items. On load, the Timeline will render all items once to determine their width and height. Keep the number of items in this configuration limited to a maximum of a few hundred items.</p>
   </td>
 </tr>
--->
 
 <tr>
     <td>orientation</td>
     <td>String</td>
     <td>'bottom'</td>
-    <td>Orientation of the timeline: 'top' or 'bottom' (default). If orientation is 'bottom', the time axis is drawn at the bottom, and if 'top', the axis is drawn on top.</td>
+    <td>Orientation of the timeline: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.</td>
 </tr>
 
 <tr>
@@ -762,7 +763,7 @@ var options = {
 
 <tr>
     <td>start</td>
-    <td>Date | Number | String</td>
+    <td>Date | Number | String | Moment</td>
     <td>none</td>
     <td>The initial start date for the axis of the timeline.
         If not provided, the earliest date present in the events is taken as start date.</td>
@@ -854,6 +855,15 @@ var options = {
     <th>Description</th>
   </tr>
 
+  <tr>
+    <td>addCustomTime(time[, id])</td>
+    <td>Number | String</td>
+    <td>
+      Only applicable when the option showCustomTime is true.<br>
+      Add new vertical bar representing custom time that can be dragged by the user. Parameter <code>time</code> can be a Date, Number, or String. Parameter <code>id</code> can be Number or String. If <code>id</code> is provided, it will be used as ID for the new vertical bar, otherwise the ID will be auto generated.<br>
+      Returns ID of the newly created bar.
+    </td>
+  </tr>
   <tr>
     <td>clear([what])</td>
     <td>none</td>
@@ -903,9 +913,29 @@ timeline.clear({options: true}); // clear options only
   </tr>
 
   <tr>
-    <td>getCustomTime()</td>
+    <td>getCustomTime([id])</td>
     <td>Date</td>
-    <td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true.
+    <td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true. If parameter <code>id</code> is provided, time of the custom time bar under that ID is returned.
+    </td>
+  </tr>
+
+  <tr id="getEventProperties">
+    <td>getEventProperties(event)</td>
+    <td>Object</td>
+    <td>
+      Returns an Object with relevant properties from an event:
+      <ul>
+        <li><code>group</code> (Number | null): the id of the clicked group.</li>
+        <li><code>item</code> (Number | null): the id of the clicked item.</li>
+        <li><code>pageX</code> (Number): absolute horizontal position of the click event.</li>
+        <li><code>pageY</code> (Number): absolute vertical position of the click event.</li>
+        <li><code>x</code> (Number): relative horizontal position of the click event.</li>
+        <li><code>y</code> (Number): relative vertical position of the click event.</li>
+        <li><code>time</code> (Date): Date of the clicked event.</li>
+        <li><code>snappedTime</code> (Date): Date of the clicked event, snapped to a nice value.</li>
+        <li><code>what</code> (String | null): name of the clicked thing: <code>item</code>, <code>background</code>, <code>axis</code>, <code>group-label</code>, <code>custom-time</code>, or <code>current-time</code>.</li>
+        <li><code>event</code> (Object): the original click event.</li>
+      </ul>
     </td>
   </tr>
 
@@ -958,6 +988,14 @@ timeline.clear({options: true}); // clear options only
     </td>
   </tr>
 
+  <tr>
+    <td>removeCustomTime(id)</td>
+    <td>none</td>
+    <td>
+      Remove vertical bars previously added to the timeline via <code>addCustomTime</code> method. Parameter <code>id</code> is the ID of the custom vertical bar returned by <code>addCustomTime</code> method.
+    </td>
+  </tr>
+
   <tr>
     <td>setCurrentTime(time)</td>
     <td>none</td>
@@ -967,9 +1005,9 @@ timeline.clear({options: true}); // clear options only
   </tr>
 
   <tr>
-    <td>setCustomTime(time)</td>
+    <td>setCustomTime(time [, id])</td>
     <td>none</td>
-    <td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
+    <td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. Parameter <code>time</code> can be a Date object, numeric timestamp, or ISO date string. Parameter <code>id</code> represents ID of the custom time bar, provided by <code>addCustomTime</code> method and can be a Number or String.
     </td>
   </tr>
 
@@ -1075,16 +1113,49 @@ timeline.off('select', onSelect);
     <th>Description</th>
     <th>Properties</th>
   </tr>
-    <tr>
-        <td>finishedRedraw</td>
-        <td>Fired after a redraw is complete. When moving the timeline around, this could be fired frequently.
-        </td>
-        <td>
-            none.
-        </td>
-    </tr>
-
-    <tr>
+
+  <tr>
+    <td>click</td>
+    <td>Fired when clicked inside the Timeline.
+    </td>
+    <td>
+      Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>contextmenu</td>
+    <td>Fired when right-clicked inside the Timeline. Note that in order to prevent the context menu from showing up, default behavior of the event must be stopped:
+<pre class="prettyprint lang-js">timeline.on('contextmenu', function (props) {
+  alert('Right click!');
+  props.event.preventDefault();
+});
+</pre>
+    </td>
+    <td>
+      Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>doubleClick</td>
+    <td>Fired when double clicked inside the Timeline.
+    </td>
+    <td>
+      Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>finishedRedraw</td>
+    <td>Fired after a redraw is complete. When moving the timeline around, this could be fired frequently.
+    </td>
+    <td>
+      none.
+    </td>
+  </tr>
+
+  <tr>
     <td>rangechange</td>
     <td>Fired repeatedly when the timeline window is being changed.
     </td>
@@ -1130,6 +1201,7 @@ timeline.off('select', onSelect);
     </td>
     <td>
       <ul>
+        <li><code>id</code> (Number | String): Vertical bar ID.</li>
         <li><code>time</code> (Date): the current time.</li>
       </ul>
     </td>
@@ -1142,6 +1214,7 @@ timeline.off('select', onSelect);
     </td>
     <td>
       <ul>
+        <li><code>id</code> (Number | String): Vertical bar ID.</li>
         <li><code>time</code> (Date): the current time.</li>
       </ul>
     </td>
@@ -1151,8 +1224,16 @@ timeline.off('select', onSelect);
 
 <h2 id="Editing_Items">Editing Items</h2>
 <p>
-  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.
+  When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code>true</code>), the user can:
 </p>
+<ul>
+  <li>Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items</li>
+  <li>Move selected items by dragging them.</li>
+  <li>Create a new item by double tapping on an empty space.</li>
+  <li>Create a new range item by dragging on an empty space with the ctrl key down.</li>
+  <li>Update an item by double tapping it.</li>
+  <li>Delete a selected item by clicking the delete button on the top right.</li>
+</ul>
 
 <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>
 

examples/graph2d/19_labels.html

@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
+  <title>Graph2d | Basic Example</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+
+    .red {
+      fill:red;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Label Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+  This example shows the how to add a label to each point in Graph2d. Each item can have a label object which contains the content and CSS class.In addition, xOffset and yOffset will adjust the location of the label relative to the point being labelled. 
+
+  
+  <br /><br />
+  
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+  var container = document.getElementById('visualization');
+  var label1 = {
+    content: "offset label",
+    xOffset: 20,
+    yOffset: 20
+  }
+
+  var label2 = {
+    content: "Label2",
+    className: "red"
+  }
+  var items = [
+    {x: '2014-06-11', y: 10,label:label1},
+    {x: '2014-06-12', y: 25,label:label2},
+    {x: '2014-06-13', y: 30},
+    {x: '2014-06-14', y: 10},
+    {x: '2014-06-15', y: 15},
+    {x: '2014-06-16', y: 30}
+  ];
+
+  var dataset = new vis.DataSet(items);
+  var options = {
+    start: '2014-06-10',
+    end: '2014-06-18',
+  };
+  var graph2d = new vis.Graph2d(container, dataset, options);
+</script>
+</body>
+</html>

examples/network/06_groups.html

@@ -8,9 +8,10 @@
       font: 10pt arial;
     }
     #mynetwork {
-      width: 600px;
-      height: 600px;
+      width: 1900px;
+      height: 900px;
       border: 1px solid lightgray;
+      background-color:#222222;
     }
   </style>
 
@@ -139,11 +140,14 @@
         edges: edges
       };
       var options = {
-        stabilize: false,
+        stabilize: true,
         nodes: {
-          shape: 'dot'
+          shape: 'dot',
+            radius:30,
+            fontColor:'#ffffff',
+            borderWidth:2
         },
-        physics: {barnesHut:{springLength: 200}}
+        physics: {barnesHut:{springLength: 100}}
       };
       network = new vis.Network(container, data, options);
     }
@@ -154,9 +158,9 @@
 <body onload="draw()">
 <form onsubmit= "javascript: draw(); return false;">
   Number of groups:
-  <input type="text" value="6" id="groupCount" style="width: 50px;">
+  <input type="text" value="20" id="groupCount" style="width: 50px;">
   Number of nodes per group:
-  <input type="text" value="7" id="nodeCount" style="width: 50px;">
+  <input type="text" value="1" id="nodeCount" style="width: 50px;">
   <input type="submit" value="Go">
 </form>
 <br>

examples/network/25_physics_configuration.html

@@ -78,7 +78,6 @@
       };
 
     var options = {
-        edges:{opacity:0.2},
         stabilize: false,
         configurePhysics:true
     };

examples/network/26_staticSmoothCurves.html

@@ -32,19 +32,26 @@
 
 Smooth curve type:
 <select id="dropdownID">
-    <option value="continuous">continuous</option>
+    <option value="continuous" selected="selected">continuous</option>
     <option value="discrete">discrete</option>
     <option value="diagonalCross">diagonalCross</option>
     <option value="straightCross">straightCross</option>
     <option value="horizontal">horizontal</option>
     <option value="vertical">vertical</option>
-</select>
+    <option value="curvedCW">curvedCW</option>
+    <option value="curvedCCW">curvedCCW</option>
+</select><br/>
+Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider"> <input id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0 for the others)
 <div id="mynetwork"></div>
 
 <script type="text/javascript">
 
 var dropdown = document.getElementById("dropdownID");
 dropdown.onchange = update;
+var roundnessSlider = document.getElementById("roundnessSlider");
+roundnessSlider.onchange = update;
+
+var roundnessScreen = document.getElementById("roundnessScreen");
   // create an array with nodes
   var nodes = [
     {id: 1, label: 'Node 1'},
@@ -53,7 +60,7 @@ dropdown.onchange = update;
 
   // create an array with edges
   var edges = [
-    {from: 1, to: 2}
+    {from: 1, to: 2, style:"arrow"}
   ];
 
   // create a network
@@ -68,8 +75,14 @@ dropdown.onchange = update;
 
     function update() {
         var type = dropdown.value;
-        network.setOptions({smoothCurves:{type:type}});
+        var roundness = roundnessSlider.value;
+        roundnessScreen.value = roundness;
+        var options = {smoothCurves:{type:type, roundness:roundness}}
+
+        network.setOptions(options);
     }
+
+    update();
 </script>
 
 </body>

examples/network/27_world_cup_network.html

@@ -39,6 +39,8 @@ Smooth curve type:
     <option value="straightCross">straightCross</option>
     <option value="horizontal">horizontal</option>
     <option value="vertical">vertical</option>
+    <option value="curvedCW">curvedCW</option>
+    <option value="curvedCCW">curvedCCW</option>
 </select><br/>
 inheritColor option:
 <select id="inheritColor">

examples/network/38_node_as_icon.html

@@ -0,0 +1,166 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Network | node as icon</title>
+
+    <script type="text/javascript" src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+
+    <script language="JavaScript">
+        function draw() {
+            /*
+             * Example for FontAwesome
+             */
+            var optionsFA = {
+                height: '300px',
+                groups: {
+                    usergroups: {
+                        shape: 'icon',
+                        iconFontFace: 'FontAwesome',
+                        icon: '\uf0c0',
+                        iconSize: 50,
+                        iconColor: '#57169a'
+                    },
+                    users: {
+                        shape: 'icon',
+                        iconFontFace: 'FontAwesome',
+                        icon: '\uf007',
+                        iconSize: 50,
+                        iconColor: '#aa00ff'
+                    }
+                }
+            };
+
+            // create an array with nodes
+            var nodesFA = [{
+                id: 1,
+                label: 'User 1',
+                group: 'users'
+            }, {
+                id: 2,
+                label: 'User 2',
+                group: 'users'
+            }, {
+                id: 3,
+                label: 'Usergroup 1',
+                group: 'usergroups'
+            }, {
+                id: 4,
+                label: 'Usergroup 2',
+                group: 'usergroups'
+            }, {
+                id: 5,
+                label: 'Organisation 1',
+                shape: 'icon',
+                iconFontFace: 'FontAwesome',
+                icon: '\uf1ad',
+                iconSize: 50,
+                iconColor: '#f0a30a'
+            }];
+
+            // create an array with edges
+            var edges = [{
+                from: 1,
+                to: 3
+            }, {
+                from: 1,
+                to: 4
+            }, {
+                from: 2,
+                to: 4
+            }, {
+                from: 3,
+                to: 5
+            }, {
+                from: 4,
+                to: 5
+            }];
+
+            // create a network
+            var containerFA = document.getElementById('mynetworkFA');
+            var dataFA = {
+                nodes: nodesFA,
+                edges: edges
+            };
+
+            var networkFA = new vis.Network(containerFA, dataFA, optionsFA);
+
+            /*
+             * Example for Ionicons
+             */
+            var optionsIO = {
+                height: '300px',
+                groups: {
+                    usergroups: {
+                        shape: 'icon',
+                        iconFontFace: 'Ionicons',
+                        icon: '\uf47c',
+                        iconSize: 50,
+                        iconColor: '#57169a'
+                    },
+                    users: {
+                        shape: 'icon',
+                        iconFontFace: 'Ionicons',
+                        icon: '\uf47e',
+                        iconSize: 50,
+                        iconColor: '#aa00ff'
+                    }
+                }
+            };
+
+            // create an array with nodes
+            var nodesIO = [{
+                id: 1,
+                label: 'User 1',
+                group: 'users'
+            }, {
+                id: 2,
+                label: 'User 2',
+                group: 'users'
+            }, {
+                id: 3,
+                label: 'Usergroup 1',
+                group: 'usergroups'
+            }, {
+                id: 4,
+                label: 'Usergroup 2',
+                group: 'usergroups'
+            }, {
+                id: 5,
+                label: 'Organisation 1',
+                shape: 'icon',
+                iconFontFace: 'Ionicons',
+                icon: '\uf276',
+                iconSize: 50,
+                iconColor: '#f0a30a'
+            }];
+
+
+            // create a network
+            var containerIO = document.getElementById('mynetworkIO');
+            var dataIO = {
+                nodes: nodesIO,
+                edges: edges
+            };
+
+            var networkIO = new vis.Network(containerIO, dataIO, optionsIO);
+        }
+    </script>
+</head>
+
+<body onload="draw()">
+    <h2>
+        <i class="fa fa-flag"></i> Use FontAwesome-icons for node</h2>
+    <div id="mynetworkFA"></div>
+    <h2>
+            <i class="ion ion-ionic"></i> Use Ionicons-icons for node</h2>
+    <div id="mynetworkIO"></div>
+
+</body>
+
+</html>

examples/network/index.html

@@ -49,6 +49,7 @@
   <p><a href="35_label_stroke.html">35_label_stroke.html</a></p>
   <p><a href="36_HTML_in_Nodes.html">36_HTML_in_Nodes.html</a></p>
   <p><a href="37_label_alignment.html">37_label_alignment.html</a></p>
+  <p><a href="38_node_as_icon.html">38_node_as_icon.html</a></p>
   <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
 
 </div>

examples/timeline/08_edit_items.html

@@ -64,6 +64,7 @@
     onMoving: function (item, callback) {
       if (item.start < min) item.start = min;
       if (item.start > max) item.start = max;
+      if (item.end   > max) item.end   = max;
 
       callback(item); // send back the (possibly) changed item
     },

examples/timeline/34_add_custom_timebar.html

@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Show current and custom time bars</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: 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>
+  <input type="button" id="add" value="Add custom vertical bar">
+  <input type="text" id="barId" placeholder="custom bar ID">
+</p>
+<p>
+  <input type="button" id="remove" value="Remove custom vertical bar">
+  <input type="text" id="barIndex" value="1" placeholder="custom bar ID">
+</p>
+<p>
+  <code><strong>timechange</strong></code> bar index: <span id="timechangeBar"></span>. Time: <span id="timechangeEvent"></span>
+</p>
+<p>
+  <code><strong>timechanged</strong></code> bar index: <span id="timechangedBar"></span>. Time: <span id="timechangedEvent"></span>
+</p><br>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  var container = document.getElementById('visualization');
+  var items = new vis.DataSet();
+  var customDate = new Date();
+  var options = {
+    showCurrentTime: true,
+    showCustomTime: true,
+    start: new Date(Date.now() - 1000 * 60 * 60 * 24),
+    end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
+  };
+  var timeline = new vis.Timeline(container, items, options);
+
+  // Set first time bar
+  customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
+  timeline.addCustomTime(customDate, 1);
+
+  document.getElementById('add').onclick = function () {
+    customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
+    var barId = document.getElementById('barId').value || undefined;
+    timeline.addCustomTime(customDate, barId);
+    document.getElementById('barId').value = '';
+  };
+
+  document.getElementById('remove').onclick = function () {
+    timeline.removeCustomTime(document.getElementById('barIndex').value);
+    document.getElementById('barIndex').value = '';
+  };
+
+  timeline.on('timechange', function (properties) {
+    document.getElementById('timechangeBar').innerHTML = properties.id;
+    document.getElementById('timechangeEvent').innerHTML = properties.time;
+  });
+  timeline.on('timechanged', function (properties) {
+    document.getElementById('timechangedBar').innerHTML = properties.id;
+    document.getElementById('timechangedEvent').innerHTML = properties.time;
+  });
+
+</script>
+</body>
+</html>

examples/timeline/35_item_ordering.html

@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Item ordering</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+    p {
+      max-width: 800px;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h1>Item ordering</h1>
+<p>
+  By default, the items displayed on the Timeline are unordered. They are
+  stacked in the order that they where loaded. This means that way items are
+  stacked can change while moving and zooming the Timeline.
+</p>
+<p>
+  To display and stack the items in a controlled order, you can provide a
+  custom sorting function via the configuration option <code>order</code>.
+</p>
+<p>
+  WARNING: Custom ordering is only suitable for small amounts of items (up to a few
+  hundred), as the Timeline has to render <i>all</i> items once on load to
+  determine their width and height.
+</p>
+<p>
+  <label for="ordering"><input type="checkbox" id="ordering" checked/> Apply custom ordering. Order items by their id.</label>
+</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();
+  var date = vis.moment('2015-03-02');
+  for (var i = 0; i < 100; i++) {
+    date.add(Math.round(Math.random() * 2), 'hour');
+    items.add({
+      id:      i,
+      content: 'Item ' + i,
+      start:   date.clone(),
+      end:     date.clone().add(4, 'hour')
+    });
+  }
+
+  function customOrder (a, b) {
+    // order by id
+    return a.id - b.id;
+  }
+
+  // Configuration for the Timeline
+  var options = {
+    order: customOrder,
+    editable: true,
+    margin: {item: 0}
+  };
+
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+
+  var ordering = document.getElementById('ordering');
+  ordering.onchange = function () {
+    timeline.setOptions({
+      order: ordering.checked ? customOrder: null
+    });
+  };
+</script>
+</body>
+</html>

examples/timeline/index.html

@@ -44,7 +44,8 @@
   <p><a href="31_background_areas_with_groups.html">31_background_areas_with_groups.html</a></p>
   <p><a href="32_grid_styling.html">32_grid_styling.html</a></p>
   <p><a href="33_custom_snapping.html">33_custom_snapping.html</a></p>
-
+  <p><a href="34_add_custom_timebar.html">34_add_custom_timebar.html</a></p>
+  <p><a href="35_item_ordering.html">35_item_ordering.html</a></p>
   <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>
 
 </div>

graph2d_examples.html

@@ -216,6 +216,18 @@
             <div class="exampleTitle">dynamic styling</div>
         </a>
     </div>
+    <div class="col-lg-2 col-md-3 col-sm-6">
+        <a href="examples/graph2d/18_scatterplot.html">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/18.png">
+            <div class="exampleTitle">scatter plot</div>
+        </a>
+    </div>
+    <div class="col-lg-2 col-md-3 col-sm-6">
+        <a href="examples/graph2d/19_labels.html">
+            <img class="example img-responsive" src="./images/exampleScreenshots/graph2d/19.png">
+            <div class="exampleTitle">labels</div>
+        </a>
+    </div>
 </div>
 <br />
 <br />

index.html

@@ -216,12 +216,12 @@
                     <pre class="prettyprint">bower install vis</pre>
                     <h3>link from cdnjs.com</h3>
                     <p>
-                        <a href="https://cdnjs.cloudflare.com/ajax/libs/vis/3.10.0/vis.min.js" target="_blank">vis.min.js</a><br>
-                        <a href="https://cdnjs.cloudflare.com/ajax/libs/vis/3.10.0/vis.min.css" target="_blank">vis.min.css</a>
+                        <a href="https://cdnjs.cloudflare.com/ajax/libs/vis/3.11.0/vis.min.js" target="_blank">vis.min.js</a><br>
+                        <a href="https://cdnjs.cloudflare.com/ajax/libs/vis/3.11.0/vis.min.css" target="_blank">vis.min.css</a>
                     </p>
                     <h3>download</h3>
                     <p>
-                        <a href="download/vis.zip">vis.zip (version <span class="version">3.10.0</span>)</a>
+                        <a href="download/vis.zip">vis.zip (version <span class="version">3.11.0</span>)</a>
                     </p>
                 </div>
             </div>

network_examples.html

@@ -346,6 +346,12 @@
             <div class="exampleTitle">labelAlignment for edges</div>
         </a>
     </div>
+    <div class="col-lg-2 col-md-3 col-sm-6">
+        <a href="examples/network/38_node_as_icon.html">
+            <img class="example img-responsive"  src="./images/exampleScreenshots/network/38.png">
+            <div class="exampleTitle">node as icon</div>
+        </a>
+    </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/network/graphviz/graphviz_gallery.html">
             <img class="example img-responsive"  src="./images/exampleScreenshots/network/graphviz.png">

timeline_examples.html

@@ -316,6 +316,18 @@
             <div class="exampleTitle">custom snapping</div>
         </a>
     </div>
+    <div class="col-lg-2 col-md-3 col-sm-6">
+        <a href="examples/timeline/34_add_custom_timebar.html">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/34.png">
+            <div class="exampleTitle">add custom timebar</div>
+        </a>
+    </div>
+    <div class="col-lg-2 col-md-3 col-sm-6">
+        <a href="examples/timeline/35_item_ordering.html">
+            <img class="example img-responsive" src="./images/exampleScreenshots/timeline/35.png">
+            <div class="exampleTitle">item ordering</div>
+        </a>
+    </div>
     <div class="col-lg-2 col-md-3 col-sm-6">
         <a href="examples/timeline/requirejs/requirejs_example.html">
             <img class="example img-responsive" src="./images/exampleScreenshots/timeline/requirejs.png">