Released version 4.10.0

docs/data/dataset.html

@@ -312,7 +312,7 @@ var data = new vis.DataSet([data] [, options])
       <td>Object | Array</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>.
+        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>. When no item is found, <code>null</code> is returned when a single item was requested, and and empty Array is returned in case of multiple id's.
       </td>
     </tr>
 
@@ -598,9 +598,9 @@ function (event, properties, senderId) {
         <code>update</code>, and <code>remove</code>,
         <code>properties</code> is always an object containing a property
         <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.
+        items. The <code>update</code> event has an extra field <code>oldData</code>
+        containing the original data of the updated items, and a field <code>data</code>
+        containing the changes: the properties of the items that are being updated.
       </td>
     </tr>
     <tr>

docs/data/dataview.html

@@ -248,7 +248,7 @@ var data = new vis.DataView(dataset, options)
       <td>Object | Array</td>
       <td>
         Get a single item, multiple items, or all items from the DataView.
-        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>.
+        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>. When no item is found, <code>null</code> is returned when a single item was requested, and and empty Array is returned in case of multiple id's.
       </td>
     </tr>
 

docs/graph2d/index.html

@@ -927,6 +927,16 @@ function (option, path) {
             <td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
         </tr>
 
+        <tr>
+            <td>maxMinorChars</td>
+            <td>number</td>
+            <td>7</td>
+            <td>
+                Specifies the maximum number of characters that should fit in minor grid labels.
+                If larger, less and wider grids will be drawn.
+            </td>
+        </tr>
+
         <tr>
             <td>min</td>
             <td>Date or Number or String</td>
@@ -997,22 +1007,6 @@ function (option, path) {
                 visible.</td>
         </tr>
 
-        <tr>
-            <td>showMajorLines</td>
-            <td>Boolean</td>
-            <td>true</td>
-            <td>By default, the timeline shows both minor and major date lines on the
-                time axis. You can use this option to hide the lines from the major dates.
-        </tr>
-
-        <tr>
-            <td>showMinorLines</td>
-            <td>Boolean</td>
-            <td>true</td>
-            <td>By default, the timeline shows both minor and major date lines on the
-                time axis. You can use this option to hide the lines from the minor dates.
-        </tr>
-
         <tr>
             <td>start</td>
             <td>Date or Number or String</td>

docs/network/index.html

@@ -940,6 +940,28 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
                     before selecting its own objects. <i>Does not fire events</i>.
                 </td>
             </tr>
+            <tr class="collapsible toggle" onclick="toggleTable('methodTable','setSelection', this);">
+                <td colspan="2"><span parent="setSelection" class="right-caret" id="method_setSelection"></span> setSelection(
+                  <code>Object selection</code>, 
+                  <code>[Object options]</code>)</td>
+            </tr>
+            <tr class="hidden" parent="setSelection">
+                <td class="midMethods">Returns: none</td>
+                <td>Sets the selection, wich must be an object like this:
+            <pre class="code">
+{
+  nodes: [Array of nodeIds],
+  edges: [Array of edgeIds]
+}</pre>
+                  You can also pass only <code>nodes</code> or <code>edges</code> in <code>selection</code> object.
+                  Available options are:
+                  <pre class="code">
+{
+  unselectAll: Boolean,
+  highlightEdges: Boolean
+}</pre>
+                </td>
+            </tr>
             <tr class="collapsible toggle" onclick="toggleTable('methodTable','unselectAll', this);">
                 <td colspan="2"><span parent="unselectAll" class="right-caret" id="method_unselectAll"></span> unselectAll()</td>
             </tr>

docs/timeline/index.html

@@ -115,7 +115,7 @@
   <h2 id="Example">Example</h2>
   <p>
     The following code shows how to create a Timeline and provide it with data.
-    More examples can be found in the <a href="../examples">examples</a> directory.
+    More examples can be found in the <a href="../../timeline_examples.html">timeline examples</a> page.
   </p>
 
 <pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
@@ -666,6 +666,14 @@ function (option, path) {
         and set repeat to weekly.
       </td>
     </tr>
+
+    <tr>
+      <td>itemsAlwaysDraggable</td>
+      <td>boolean</td>
+      <td><code>false</code></td>
+      <td>If true, all items in the Timeline are draggable without being selected. If false, only the selected item(s) are draggable.</td>
+    </tr>
+
     <tr>
       <td>locale</td>
       <td>String</td>
@@ -734,6 +742,16 @@ function (option, path) {
       <td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
     </tr>
 
+    <tr>
+      <td>maxMinorChars</td>
+      <td>number</td>
+      <td>7</td>
+      <td>
+        Specifies the maximum number of characters that should fit in minor grid labels.
+        If larger, less and wider grids will be drawn.
+      </td>
+    </tr>
+
     <tr>
       <td>min</td>
       <td>Date or Number or String or Moment</td>
@@ -769,6 +787,16 @@ function (option, path) {
         Only applicable when option <code>selectable</code> is <code>true</code>.
       </td>
     </tr>
+    
+    <tr>
+      <td style="font-size: 0.9em">multiselectPerGroup</td>
+      <td>boolean</td>
+      <td><code>false</code></td>
+      <td>
+        If true, selecting multiple items using shift+click will only select items residing in the same group as the <i>first</i> selected item.
+        Only applicable when option <code>selectable</code> and <code>multiselect</code> are <code>true</code>.
+      </td>
+    </tr>
 
     <tr>
       <td>onAdd</td>

examples/network/other/clusteringByZoom.html

@@ -72,7 +72,7 @@ Stabilize when clustering:
         nodes: nodes,
         edges: edges
     };
-    var options = {layout: {randomSeed: 8}};
+    var options = {layout: {randomSeed: 8}, physics:{adaptiveTimestep:false}};
     var network = new vis.Network(container, data, options);
 
     // set the first initial zoom level
@@ -125,6 +125,8 @@ Stabilize when clustering:
         }
         network.clusterOutliers(clusterOptionsByData);
         if (document.getElementById('stabilizeCheckbox').checked === true) {
+            // since we use the scale as a unique identifier, we do NOT want to fit after the stabilization
+            network.setOptions({physics:{stabilization:{fit: false}}});
             network.stabilize();
         }
     }
@@ -145,6 +147,8 @@ Stabilize when clustering:
         }
         clusters = newClusters;
         if (declustered === true && document.getElementById('stabilizeCheckbox').checked === true) {
+            // since we use the scale as a unique identifier, we do NOT want to fit after the stabilization
+            network.setOptions({physics:{stabilization:{fit: false}}});
             network.stabilize();
         }
     }

index.html

@@ -28,7 +28,7 @@
 
     <script src="./js/smooth-scroll.min.js"></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.10.0/vis.min.js"></script>
 
     <script language="JavaScript">
         smoothScroll.init();
@@ -36,7 +36,7 @@
         function evalLinks() {
             if (typeof vis === 'undefined') {
                 console.log(document.getElementById("linkStatus"));
-                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.9.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
+                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.10.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
                 document.getElementById("cdn_vis").style.color = "rgb(150,150,150)";
                 document.getElementById("cdn_vis_css").style.color = "rgb(150,150,150)";
             }
@@ -210,13 +210,13 @@
                     <pre class="prettyprint">bower install vis</pre>
                     <h3>link from cdnjs.com</h3>
                     <p>
-                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js" target="_blank">vis.min.js</a> <br>
-                        <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css" target="_blank">vis.min.css</a> <br>
+                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.10.0/vis.min.js" target="_blank">vis.min.js</a> <br>
+                        <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.10.0/vis.min.css" target="_blank">vis.min.css</a> <br>
                         <span id="linkStatus"></span>
                     </p>
                     <h3>download</h3>
                     <p>
-                        <a href="download/vis.zip">vis.zip (version <span class="version">4.9.0</span>)</a>
+                        <a href="download/vis.zip">vis.zip (version <span class="version">4.10.0</span>)</a>
                     </p>
                 </div>
             </div>