updates for v4.19.0

dist/vis.css

@@ -900,6 +900,7 @@ div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
   border-width: 1px;
   background-color: #D5DDF6;
   display: inline-block;
+  z-index: 1;
   /*overflow: hidden;*/
 }
 
@@ -997,6 +998,10 @@ div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
   white-space: nowrap;
   padding: 5px;
   border-radius: 1px;
+  transition: 0.4s;
+  -o-transition: 0.4s;
+  -moz-transition: 0.4s;
+  -webkit-transition: 0.4s;
 }
 
 .vis-item .vis-delete, .vis-item .vis-delete-rtl {

docs/data/dataset.html

@@ -53,7 +53,6 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -602,7 +601,7 @@ function (event, properties, senderId) {
         field <code>oldData</code> containing the original data of the items in the
         dataset before the items were updated or removed. The <code>update</code>
         event also contains a field <code>data</code> containing the changes:
-        the properties of the items that are being updated. 
+        the properties of the items that are being updated.
       </td>
     </tr>
     <tr>

docs/data/dataview.html

@@ -53,7 +53,6 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -410,4 +409,4 @@ view.on('*', function (event, properties, senderId) {
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/data/index.html

@@ -53,7 +53,6 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -135,4 +134,4 @@
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/graph2d/index.html

@@ -96,7 +96,6 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -297,7 +296,13 @@ var items = [
             <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>
+            <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>
+         <tr>
+            <td>end</td>
+            <td>Date</td>
+            <td>no</td>
+            <td>A location on the x-axis that when supplied will have the bar stretch to the end point and ignore the barChart.width property.</td>
         </tr>
     </table>
 
@@ -569,7 +574,7 @@ function (value) {
             <pre class="prettyprint lang-js">
 drawPoints: true // or false
             </pre>
-            
+
             2. <code>Object</code> (the 'rendering' options): If an object is provided it may contain following properties which all can be optional: <code>onRender</code>, <code>className</code><code>size</code> and/or <code>style</code>. For more information check the property's documentation.<br />
             <pre class="prettyprint lang-js">
 drawPoints: {
@@ -577,7 +582,7 @@ drawPoints: {
   style: 'square'
 }
             </pre>
-            
+
             3. <code>Function</code>: If a function is provided it will be used as a callback. The function may return values from listing 1 or 2.<br />
             <pre class="prettyprint lang-js">
 drawPoints: function(item, group) {

docs/graph3d/index.html

@@ -12,7 +12,7 @@
   <link href="../css/bootstrap.css" rel="stylesheet">
   <!-- Tipue vendor css -->
   <link href="../css/tipuesearch.css" rel="stylesheet">
-  
+
   <link href="../css/style.css" rel="stylesheet">
 
 
@@ -53,7 +53,6 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -364,7 +363,7 @@ var options = {
       <td>dataColor.fill</td>
       <td>string</td>
       <td>'#7DC1FF'</td>
-      <td>The fill color of the dots or bars. Applicable when using styles <code>dot-size</code>, <code>bar-size</code>, or <code>line</code>.</td>  
+      <td>The fill color of the dots or bars. Applicable when using styles <code>dot-size</code>, <code>bar-size</code>, or <code>line</code>.</td>
     </tr>
     <tr>
       <td>dataColor.stroke</td>
@@ -422,9 +421,27 @@ var options = {
       <td>showGrid</td>
       <td>boolean</td>
       <td>true</td>
-      <td>If true, grid lines are draw in the x-y surface (the bottom of the 3d
+      <td>If true, grid lines are drawn in the x-y surface (the bottom of the 3d
         graph).</td>
     </tr>
+    <tr>
+      <td>showXAxis</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>If true, X axis and X axis labels are drawn.</td>
+    </tr>
+    <tr>
+      <td>showYAxis</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>If true, Y axis and Y axis labels are drawn.</td>
+    </tr>
+    <tr>
+      <td>showZAxis</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>If true, Z axis and Z axis labels are drawn.</td>
+    </tr>
     <tr>
       <td>showPerspective</td>
       <td>boolean</td>
@@ -439,8 +456,8 @@ var options = {
       <td>showLegend</td>
       <td>boolean</td>
       <td>none</td>
-      <td>If true, a legend is drawn for the graph (if the graph type supports it). 
-          By default a legend is drawn for dot and dot-color style graphs. 
+      <td>If true, a legend is drawn for the graph (if the graph type supports it).
+          By default a legend is drawn for dot and dot-color style graphs.
       </td>
     </tr>
     <tr>
@@ -480,6 +497,38 @@ var options = {
       </td>
     </tr>
 
+    <tr>
+      <td>tooltipStyle</td>
+      <td>Object</td>
+      <td>
+<pre class="prettyprint lang-js">
+{
+  content: {
+    padding: '10px',
+    border: '1px solid #4d4d4d',
+    color: '#1a1a1a',
+    background: 'rgba(255,255,255,0.7)',
+    borderRadius: '2px',
+    boxShadow: '5px 5px 10px rgba(128,128,128,0.5)'
+  },
+  line: {
+    height: '40px',
+    width: '0',
+    borderLeft: '1px solid #4d4d4d'
+  },
+  dot: {
+    height: '0',
+    width: '0',
+    border: '5px solid #4d4d4d',
+    borderRadius: '5px'
+  }
+}</pre>
+      </td>
+      <td>Tooltip style properties.
+        Provided properties will be merged with the default object.
+      </td>
+    </tr>
+
     <tr>
       <td>valueMax</td>
       <td>number</td>
@@ -514,8 +563,8 @@ var options = {
       <td>xBarWidth</td>
       <td>number</td>
       <td>none</td>
-      <td>The width of bars in x direction. By default, the width is equal to the distance
-        between the data points, such that bars adjoin each other.
+      <td>The width of bars in x direction. By default, the width is equal to the smallest distance
+        between the data points.
         Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
     </tr>
 
@@ -529,14 +578,18 @@ var options = {
     <tr>
       <td>xMax</td>
       <td>number</td>
-      <td>none</td>
-      <td>The maximum value for the x-axis.</td>
+      <td>from data</td>
+      <td>The maximum value for the x-axis.
+         If not set, the largest value for x in the data set is used.
+      </td>
     </tr>
     <tr>
       <td>xMin</td>
       <td>number</td>
-      <td>none</td>
-      <td>The minimum value for the x-axis.</td>
+      <td>from data</td>
+      <td>The minimum value for the x-axis.
+         If not set, the smallest value for x in the data set is used.
+      </td>
     </tr>
     <tr>
       <td>xStep</td>
@@ -557,8 +610,8 @@ var options = {
       <td>yBarWidth</td>
       <td>number</td>
       <td>none</td>
-      <td>The width of bars in y direction. By default, the width is equal to the distance
-        between the data points, such that bars adjoin each other.
+      <td>The width of bars in y direction. By default, the width is equal to the smallest distance
+        between the data points.
         Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
     </tr>
 
@@ -572,14 +625,18 @@ var options = {
     <tr>
       <td>yMax</td>
       <td>number</td>
-      <td>none</td>
-      <td>The maximum value for the y-axis.</td>
+      <td>from data</td>
+      <td>The maximum value for the y-axis.
+         If not set, the largest value for y in the data set is used.
+      </td>
     </tr>
     <tr>
       <td>yMin</td>
       <td>number</td>
-      <td>none</td>
-      <td>The minimum value for the y-axis.</td>
+      <td>from data</td>
+      <td>The minimum value for the y-axis.
+         If not set, the smallest value for y in the data set is used.
+      </td>
     </tr>
     <tr>
       <td>yStep</td>
@@ -597,16 +654,20 @@ var options = {
     </tr>
 
     <tr>
-      <td>zMin</td>
+      <td>zMax</td>
       <td>number</td>
-      <td>none</td>
-      <td>The minimum value for the z-axis.</td>
+      <td>from data</td>
+      <td>The maximum value for the z-axis.
+         If not set, the largest value for z in the data set is used.
+      </td>
     </tr>
     <tr>
-      <td>zMax</td>
+      <td>zMin</td>
       <td>number</td>
-      <td>none</td>
-      <td>The maximum value for the z-axis.</td>
+      <td>from data</td>
+      <td>The minimum value for the z-axis.
+         If not set, the smallest value for z in the data set is used.
+      </td>
     </tr>
     <tr>
       <td>zStep</td>

docs/network/configure.html

@@ -59,7 +59,6 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>

docs/network/edges.html

@@ -59,7 +59,6 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -935,7 +934,7 @@ var options: {
             <td>String</td>
             <td><code>'dynamic'</code></td>
             <td>Possible options: <code>'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal',
-                'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'</code>. Take a look at our example 26 to see what these look like
+                'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'</code>. Take a look at <a href="http://visjs.org/examples/network/edgeStyles/smooth.html">this example</a> to see what these look like
                 and pick the one that you like best!
                 <br><br>
                 When using dynamic, the edges will have an invisible support node guiding the shape. This node is part of the

docs/network/groups.html

@@ -57,7 +57,6 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -174,4 +173,4 @@ var options = {
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/network/index.html

@@ -88,7 +88,6 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -341,7 +340,7 @@ network.setOptions(options);
                   <code>'it'</code>,
                   <code>'nl'</code>
                   <code>'pt-br'</code>,
-                  <code>'ru'</code> 
+                  <code>'ru'</code>
                   are supported. Take a look at the
                   <a href="#locales" data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }">locales section below</a>
                   for more explaination on how to customize this.

docs/network/interaction.html

@@ -52,7 +52,6 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -169,4 +168,4 @@ network.setOptions(options);
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/network/layout.html

@@ -28,10 +28,10 @@
     <script language="JavaScript">
         smoothScroll.init();
     </script>
-    
+
     <!-- Tipue vendor css -->
     <link href="../css/tipuesearch.css" rel="stylesheet">
-    
+
     <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <body onload="prettyPrint();">
@@ -56,7 +56,6 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -166,4 +165,4 @@ network.setOptions(options);
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/network/manipulation.html

@@ -52,7 +52,6 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -201,4 +200,4 @@ var options = {
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/network/nodes.html

@@ -53,7 +53,6 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -734,14 +733,28 @@ network.setOptions(options);
             <td><code>undefined</code></td>
             <td>The id of the node. The id is mandatory for nodes and they have to be unique. This should obviously be set per node, not globally.</td>
         </tr>
-        <tr>
-            <td>image</td>
-            <td>String</td>
+        <tr class='toggle collapsible' onclick="toggleTable('optionTable','image', this);">
+            <td><span parent="image" class="right-caret"></span> image</td>
+            <td>Object or String</td>
             <td><code>undefined</code></td>
             <td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option should be the URL
                 to an image. If the image cannot be found, the brokenImage option can be used.
             </td>
         </tr>
+        <tr parent="image" class="hidden">
+            <td class="indent">image.unselected</td>
+            <td>String</td>
+            <td><code>undefined</code></td>
+            <td>Unselected (default) image URL.
+            </td>
+        </tr>
+        <tr parent="image" class="hidden">
+            <td class="indent">image.selected</td>
+            <td>String</td>
+            <td><code>undefined</code></td>
+            <td>Selected image URL.
+            </td>
+        </tr>
         <tr>
             <td>label</td>
             <td>String</td>

docs/network/physics.html

@@ -53,7 +53,6 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -221,4 +220,4 @@ network.setOptions(options);
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/timeline/index.html

@@ -60,7 +60,6 @@
         <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
             <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
-            <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
             <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
             <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
             <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -357,7 +356,7 @@ var items = new vis.DataSet([
       <td class="indent">editable.updateTime</td>
       <td>boolean</td>
       <td>no</td>
-      <td>If true, items can be dragged to another moment int time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
+      <td>If true, items can be dragged to another moment in time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
     </tr>
   </table>
 
@@ -1044,7 +1043,7 @@ function (option, path) {
       <td>template</td>
       <td>function</td>
       <td>none</td>
-      <td>A template function used to generate the contents of the items. The function is called by the Timeline with an items' data as the first argument and the item element as the second, and must return HTML code, a string or a template as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
+      <td>A template function used to generate the contents of the items. The function is called by the Timeline with an items' data as the first argument, the item element as the second argument and the edited data as the third argument, and must return HTML code, a string or a template as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
     </tr>
 
     <tr>
@@ -1367,7 +1366,7 @@ document.getElementById('myTimeline').onclick = function (event) {
       <td>setCustomTimeTitle(title [, id])</td>
       <td>none</td>
       <td>Adjust the title attribute of a custom time bar.
-        Parameter <code>title</code> is the string to be set as title. Use empty string to hide the title completely.
+        Parameter <code>title</code> is the string or function to be set as title. Use empty string to hide the title completely.
         Parameter <code>id</code> is the id of the custom time bar, and is <code>undefined</code> by default.
       </td>
     </tr>
@@ -1431,16 +1430,29 @@ document.getElementById('myTimeline').onclick = function (event) {
       </td>
     </tr>
 
+    <tr>
+      <td>toggleRollingMode()</td>
+      <td>none</td>
+      <td>Toggle rollingMode.
+      </td>
+    </tr>
+
      <tr>
-      <td>zoomIn(percentage)</td>
+      <td>zoomIn(percentage [, options])</td>
       <td>none</td>
-      <td>Zoom in the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged.
+      <td>Zoom in the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged. Available options:
+        <ul>
+          <li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
+        </ul>
       </td>
     </tr>
     <tr>
-      <td>zoomOut(percentage)</td>
+      <td>zoomOut(percentage [, options])</td>
       <td>none</td>
-      <td>Zoom out the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged.
+      <td>Zoom out the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged. Available options:
+        <ul>
+          <li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
+        </ul>
       </td>
     </tr>
 
@@ -1691,6 +1703,14 @@ var items = new vis.DataSet([
 ]);
 </pre>
 
+  <p>
+    Individual manipulation actions (<code>updateTime</code>, <code>updateGroup</code> and <code>remove</code>) can also be set on individual items. If any of the item-level
+    actions are specified (and <code>overrideItems</code> is not <code>false</code>) then that takes precedence over the settings at the timeline level. Current behavior is
+    that if any of the item-level actions are not specified, those items get <code>undefined</code> value (rather than inheriting from the timeline level). This may change
+    in future major releases, and code that specifies all item level values will handle major release changes better. That is, instead of using
+    <code>editable: {updateTime : true}</code>, use <code>editable: {updateTime : true, updateGroup: false, remove: false}</code>.
+  </p>
+
   <p>
     One can specify callback functions to validate changes made by the user. There are a number of callback functions for this purpose:
   </p>
@@ -1736,11 +1756,11 @@ var items = new vis.DataSet([
   <h2 id="Templates">Templates</h2>
 
   <p>
-    Timeline supports templates to format item contents. Any template engine (such as <a href="http://handlebarsjs.com/">handlebars</a> or <a href="http://mustache.github.io/">mustache</a>) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as argument, and outputs formatted HTML:
+    Timeline supports templates to format item contents. Any template engine (such as <a href="http://handlebarsjs.com/">handlebars</a> or <a href="http://mustache.github.io/">mustache</a>) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as the first argument, the item element as the second argument and the edited data as the third argument, and outputs formatted HTML:
   </p>
 
 <pre class="prettyprint lang-js">var options = {
-  template: function (item) {
+  template: function (item, element, data) {
     var html = ... // generate HTML markup for this item
     return html;
   }
@@ -1752,8 +1772,11 @@ var items = new vis.DataSet([
   The HTML for an item can be created manually:
 
 <pre class="prettyprint lang-js">var options = {
-  template: function (item) {
-    return '&lt;h1&gt;' + item.header + '&lt;/h1&gt;&lt;p&gt;' + item.description + '&lt;/p&gt;';
+  template: function (item, element, data) {
+    return '&lt;h1&gt;' + item.header + data.moving?' '+ data.start:'' + '&lt;/h1&gt;&lt;p&gt;' + item.description + '&lt;/p&gt;';
+  },
+  onMoving: function (item, callback) {
+    item.moving = true;
   }
 };
 </pre>
@@ -1788,7 +1811,7 @@ var template = Handlebars.compile(source);
 You can use a React component for the templates by rendering them to the templates' element directly:
 
 <pre class="prettyprint lang-js">
-  template: function (item, element) {
+  template: function (item, element, data) {
     return ReactDOM.render(&lt;b&gt;{item.content}&lt;/b&gt;, element);
   },
 </pre>
@@ -1807,7 +1830,7 @@ var templates = {
 };
 
 var options = {
-  template: function (item) {
+  template: function (item, element, data) {
     var template = templates[item.template];  // choose the right template
     return template(item);                    // execute the template
   }

examples/graph2d/21_barsWithEnd.html

@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Bar Graph Example</title>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Bar Graph With End Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows how you can plot a bar chart and supply an end value to have it fill.
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+    var container = document.getElementById('visualization');
+    var items = [
+        {x: '2014-06-11 00:00:00', end: '2014-06-13 00:00:00', y: 10 },
+        {x: '2014-06-13 00:00:00', end: '2014-06-14 00:00:00', y: 15 },
+        {x: '2014-06-15 00:00:00', end: '2014-06-16 00:00:00', y: 14 },
+        {x: '2014-06-16 00:00:00', end: '2014-06-17 00:00:00', y: 17 },
+        {x: '2014-06-17 00:00:00', end: '2014-06-18 00:00:00', y: 20 },
+        {x: '2014-06-18 00:00:00', end: '2014-06-25 00:00:00', y: 25 },
+    ];
+
+    var dataset = new vis.DataSet(items);
+    var options = {
+        style:'bar',
+        drawPoints: false,
+        dataAxis: {
+            icons:true
+        },
+        orientation:'top',
+        start: '2014-06-10',
+        end: '2014-06-18'
+    };
+    var graph2d = new vis.Graph2d(container, items, options);
+
+</script>
+</body>
+</html>

examples/graph2d/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../graph3d_examples.html">
-</head>
-<body>
-  <a href="../../graph3d_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/graph3d/11_tooltips.html

@@ -64,12 +64,26 @@
         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, and data
           // data is the original object passed to the point constructor
           return 'value: <b>' + point.z + '</b><br>' + point.data.extra;
         },
+  
+        // Tooltip default styling can be overridden
+        tooltipStyle: {
+          content: {
+            background    : 'rgba(255, 255, 255, 0.7)',
+            padding       : '10px',
+            borderRadius  : '10px'
+          },
+          line: {
+            borderLeft    : '1px dotted rgba(0, 0, 0, 0.5)'
+          },
+          dot: {
+            border        : '5px solid rgba(0, 0, 0, 0.5)'
+          }
+        },
 
         keepAspectRatio: true,
         verticalRatio: 0.5

examples/graph3d/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../graph3d_examples.html">
-</head>
-<body>
-  <a href="../../graph3d_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/graph3d/playground/index.html

@@ -112,6 +112,19 @@
                 <td>showGrid</td>
                 <td><input type="checkbox" id="showGrid" checked /></td>
             </tr>
+            <tr>
+                <td>showXAxis</td>
+                <td><input type="checkbox" id="showXAxis" checked /></td>
+            </tr>
+            <tr>
+                <td>showYAxis</td>
+                <td><input type="checkbox" id="showYAxis" checked /></td>
+            </tr>
+            <tr>
+                <td>showZAxis</td>
+                <td><input type="checkbox" id="showZAxis" checked /></td>
+            </tr>
+
             <tr>
                 <td>showPerspective</td>
                 <td><input type="checkbox" id="showPerspective" checked /></td>

examples/graph3d/playground/playground.js

@@ -406,6 +406,9 @@ function getOptions() {
     style:              document.getElementById("style").value,
     showAnimationControls: (document.getElementById("showAnimationControls").checked != false),
     showGrid:          (document.getElementById("showGrid").checked != false),
+    showXAxis:         (document.getElementById("showXAxis").checked != false),
+    showYAxis:         (document.getElementById("showYAxis").checked != false),
+    showZAxis:         (document.getElementById("showZAxis").checked != false),
     showPerspective:   (document.getElementById("showPerspective").checked != false),
     showLegend:        (document.getElementById("showLegend").checked != false),
     showShadow:        (document.getElementById("showShadow").checked != false),

examples/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../#modules">
-</head>
-<body>
-  <a href="../#modules">Back to overview...</a></p>
-</body>
-</html>

examples/network/data/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../network_examples.html">
-</head>
-<body>
-  <a href="../../../network_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/network/datasources/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../network_examples.html">
-</head>
-<body>
-  <a href="../../../network_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/network/edgeStyles/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../network_examples.html">
-</head>
-<body>
-  <a href="../../../network_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/network/events/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../network_examples.html">
-</head>
-<body>
-  <a href="../../../network_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/network/exampleApplications/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../network_examples.html">
-</head>
-<body>
-  <a href="../../../network_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/network/imageSelected/imageSelected.html

@@ -0,0 +1,82 @@
+<html>
+<head>
+  <title>Network | Selected/Unselected Image</title>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    body {
+      font: 10pt arial;
+    }
+    #mynetwork {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
+</head>
+
+<body>
+<div id="mynetwork"></div>
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = new vis.DataSet([{
+    id: 1,
+    shape: 'image',
+    size: 20,
+    label: 'No select image',
+    image: './unselected.svg',
+  }, {
+    id: 2,
+    shape: 'image',
+    size: 20,
+    label: 'Select image broken',
+    image: {
+      unselected: './unselected.svg',
+      selected: './BROKEN_LINK/selected.svg',
+    },
+  }, {
+    id: 3,
+    shape: 'image',
+    size: 20,
+    label: 'Select works!',
+    image: {
+      unselected: './unselected.svg',
+      selected: './selected.svg',
+    },
+    shapeProperties: {
+      borderDashes: [15, 5],
+      interpolation: false,
+    }
+  }]);
+
+  // create an array with edges
+  var edges = new vis.DataSet([
+    {from: 1, to: 2},
+    {from: 2, to: 3},
+  ]);
+
+  // create a network
+  var container = document.getElementById('mynetwork');
+
+  // provide the data in the vis format
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+
+  var options = {
+    layout:{
+      randomSeed: 5
+    },
+    nodes: {
+      brokenImage: './broken-image.png',
+    }
+  };
+  // initialize!
+  var network = new vis.Network(container, data, options);
+</script>
+
+</body>
+</html>

examples/network/imageSelected/selected.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1"
+	 id="svg4137" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="504.566px"
+	 height="577.672px" viewBox="0 0 504.566 577.672" enable-background="new 0 0 504.566 577.672" xml:space="preserve">
+<g id="path4697_1_">
+	<polygon fill="#FFCB94" points="16,152.415 252.29,15.998 488.572,152.415 488.572,425.249 252.29,561.667 16.008,425.249 	"/>
+	<g>
+		<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="16,152.425 16,152.415 16.009,152.41 
+					"/>
+		
+			<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2077,0,68.2077,68.2032" x1="75.075" y1="118.309" x2="222.748" y2="33.053"/>
+		<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="252.281,16.002 252.29,15.998 
+			252.299,16.002 		"/>
+		
+			<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2058,0,68.2058,68.2013" x1="311.363" y1="50.104" x2="459.031" y2="135.36"/>
+		<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="488.563,152.41 488.572,152.415 
+			488.572,152.425 		"/>
+		
+			<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2056,0,68.2056,68.2011" x1="488.572" y1="220.626" x2="488.572" y2="391.138"/>
+		<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="488.572,425.239 488.572,425.249 
+			488.563,425.253 		"/>
+		
+			<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2059,0,68.2059,68.2014" x1="429.499" y1="459.354" x2="281.831" y2="544.611"/>
+		<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="252.299,561.662 252.29,561.667 
+			252.281,561.662 		"/>
+		
+			<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2061,0,68.2061,68.2016" x1="193.218" y1="527.561" x2="45.549" y2="442.304"/>
+		<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="16.017,425.253 16.008,425.249 
+			16.008,425.239 		"/>
+		
+			<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2056,0,68.2056,68.2011" x1="16.006" y1="357.038" x2="16.001" y2="186.525"/>
+	</g>
+</g>
+<g id="path4697">
+	<g>
+		<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="16.002,228.415 16,152.415 
+			81.819,114.416 		"/>
+		<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="186.472,53.997 252.29,15.998 
+			318.108,53.998 		"/>
+		<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="422.754,114.415 488.572,152.415 
+			488.572,228.415 		"/>
+		<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="488.572,349.249 488.572,425.249 
+			422.754,463.249 		"/>
+		<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="318.108,523.667 252.29,561.667 
+			186.472,523.667 		"/>
+		<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="81.826,463.249 16.008,425.249 
+			16.006,349.249 		"/>
+	</g>
+</g>
+</svg>

examples/network/imageSelected/unselected.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg id="svg4137" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="203.79mm" width="178mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 630.70347 722.08501">
+ <g id="layer1" transform="translate(61.066 -28.463)">
+  <path id="path4697" stroke-linejoin="round" fill="#f57f17" stroke="#37474e" stroke-linecap="round" stroke-miterlimit="100" stroke-width="40" d="m-41.066 218.98 295.36-170.52l295.35 170.52 0.00001 341.04-295.35 170.52-295.35-170.52z"/>
+ </g>
+</svg>

examples/network/img/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../network_examples.html">
-</head>
-<body>
-  <a href="../../../network_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/network/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../network_examples.html">
-</head>
-<body>
-  <a href="../../network_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/network/labels/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../network_examples.html">
-</head>
-<body>
-  <a href="../../../network_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/network/layout/hierarchicalLayoutBigUserDefined.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Hierarchical layout</title>
+
+    <style type="text/css">
+        body {
+            font: 10pt sans;
+        }
+
+        #mynetwork {
+            width: 600px;
+            height: 600px;
+            border: 1px solid lightgray;
+        }
+    </style>
+
+    <script type="text/javascript" src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
+
+    <script type="text/javascript">
+        var network = null;
+
+        function p(data) {
+            var container = document.getElementById('mynetwork');
+            var options = {
+                layout: {
+                    hierarchical: {},
+                },
+            };
+            console.log("starting layout");
+            network = new vis.Network(container, data, options);
+            console.log("layout complete");
+        }
+    </script>
+</head>
+
+<body>
+<h2>Hierarchical Layout</h2>
+
+<div id="mynetwork"></div>
+
+<script type="text/javascript" src="./demo.jsonp"></script>
+
+</body>
+</html>

examples/network/layout/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../network_examples.html">
-</head>
-<body>
-  <a href="../../../network_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/network/nodeStyles/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../network_examples.html">
-</head>
-<body>
-  <a href="../../../network_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/network/other/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../network_examples.html">
-</head>
-<body>
-  <a href="../../../network_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/network/physics/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../network_examples.html">
-</head>
-<body>
-  <a href="../../../network_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/timeline/dataHandling/dataSerialization.html

@@ -35,12 +35,38 @@
 
 <textarea id="data">
 [
-  {"id": 1, "content": "item 1", "start": "2014-01-01 01:00:00"},
-  {"id": 2, "content": "item 2", "start": "2014-01-01 02:00:00"},
-  {"id": 3, "content": "item 3", "start": "2014-01-01 03:00:00"},
-  {"id": 4, "content": "item 4", "start": "2014-01-01 04:00:00", "end": "2014-01-01 04:30:00"},
-  {"id": 5, "content": "item 5", "start": "2014-01-01 05:00:00", "type": "point"},
-  {"id": 6, "content": "item 6", "start": "2014-01-01 06:00:00"}
+  {
+    "id": 1,
+    "content": "item 1",
+    "start": "2014-01-01T01:00:00"
+  },
+  {
+    "id": 2,
+    "content": "item 2",
+    "start": "2014-01-01T02:00:00"
+  },
+  {
+    "id": 3,
+    "content": "item 3",
+    "start": "2014-01-01T03:00:00"
+  },
+  {
+    "id": 4,
+    "content": "item 4",
+    "start": "2014-01-01T04:00:00",
+    "end": "2014-01-01T04:30:00"
+  },
+  {
+    "id": 5,
+    "content": "item 5",
+    "start": "2014-01-01T05:00:00",
+    "type": "point"
+  },
+  {
+    "id": 6,
+    "content": "item 6",
+    "start": "2014-01-01T06:00:00"
+  }
 ]
 </textarea>
 

examples/timeline/dataHandling/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
-</head>
-<body>
-  <a href="../../../timeline_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/timeline/editing/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
-</head>
-<body>
-  <a href="../../../timeline_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/timeline/editing/individualEditableItems.html

@@ -34,7 +34,7 @@
 <div id="visualization"></div>
 
 <script>
-  // create groups to highligh groupUpdate
+  // create groups to highlight groupUpdate
   var groups = new vis.DataSet([
     {id: 1, content: 'Group 1'},
     {id: 2, content: 'Group 2'}
@@ -45,9 +45,9 @@
     {id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
     {id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
     {id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
-    {id: 5, content: 'Edit Time Only', editable: { updateTime: true }, start: '2010-08-28', group: 1},
-    {id: 6, content: 'Edit Group Only', editable: { updateGroup: true }, start: '2010-08-29', group: 2},
-    {id: 7, content: 'Remove Only', editable: { remove: true }, start: '2010-08-31', end: '2010-09-03', group: 1},
+    {id: 5, content: 'Edit Time Only', editable: { updateTime: true, updateGroup: false, remove: false }, start: '2010-08-28', group: 1},
+    {id: 6, content: 'Edit Group Only', editable: { updateTime: false, updateGroup: true, remove: false }, start: '2010-08-29', group: 2},
+    {id: 7, content: 'Remove Only', editable: { updateTime: false, updateGroup: false, remove: true }, start: '2010-08-31', end: '2010-09-03', group: 1},
     {id: 8, content: 'Default', start: '2010-09-04T12:00:00', group: 2}
   ]);
 
@@ -60,4 +60,4 @@
 
 </script>
 </body>
-</html>
+</html>

examples/timeline/editing/tooltipOnItemChange.html

@@ -2,6 +2,7 @@
 <head>
   <title>Timeline | Tooltip on item onUpdateTime Option</title>
 
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
   <script src="../../../dist/vis.js"></script>
   <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
 
@@ -63,20 +64,20 @@
     editable: true
   };
 
-  var options1 = Object.assign({
+  var options1 = jQuery.extend(options, {
     tooltipOnItemUpdateTime: true
-  }, options)
+  })
   var container1 = document.getElementById('mytimeline1');
   timeline1 = new vis.Timeline(container1, items, null, options1);
 
-  var options2 = Object.assign({
+  var options2 = jQuery.extend(options, {
     orientation: 'top',
     tooltipOnItemUpdateTime: {
       template: function(item) {
         return 'html template for tooltip with <b>item.start</b>: ' + item.start; 
       }
     }
-  }, options)
+  })
   var container2 = document.getElementById('mytimeline2');
   timeline2 = new vis.Timeline(container2, items, null, options2);
 
@@ -117,10 +118,10 @@
   }
 
 
-  var options3 = Object.assign({
+  var options3 = jQuery.extend(options, {
     orientation: 'top',
     tooltipOnItemUpdateTime: true
-  }, options)
+  })
   var container3 = document.getElementById('mytimeline3');
   timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3);
 

examples/timeline/groups/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
-</head>
-<body>
-  <a href="../../../timeline_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/timeline/groups/subgroups.html

@@ -51,7 +51,7 @@
 
         {id: 'SG_1_1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'sg_1', subgroupOrder:0},
         {id: 'SG_1_2', start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'sg_1', subgroupOrder:0},
-        {id: 1, content: 'subgroup0', start: '2014-01-23 12:00:00', end: '2014-01-26 12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
+        {id: 1, content: 'subgroup0', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
         {id: 'SG_2_1', start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1},
         {id: 'SG_2_2', start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1},
         {id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1},
@@ -78,4 +78,4 @@
     }
 </script>
 </body>
-</html>
+</html>

examples/timeline/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../timeline_examples.html">
-</head>
-<body>
-  <a href="../../timeline_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/timeline/interaction/eventListeners.html

@@ -41,9 +41,11 @@
     timeline.on('rangechange', function (properties) {
       logEvent('rangechange', properties);
     });
+
     timeline.on('rangechanged', function (properties) {
       logEvent('rangechanged', properties);
     });
+
     timeline.on('select', function (properties) {
       logEvent('select', properties);
     });
@@ -52,6 +54,7 @@
       logEvent('itemover', properties);
       setHoveredItem(properties.item);
     });
+    
     timeline.on('itemout', function (properties) {
       logEvent('itemout', properties);
       setHoveredItem('none');
@@ -83,11 +86,23 @@
       logEvent(event, properties);
     });
 
+    function stringifyObject (object) {
+      if (!object) return;
+      var replacer = function(key, value) {
+        if (value && value.tagName) {
+          return "DOM Element";
+        } else {
+          return value;
+        }
+      }
+      return JSON.stringify(object, replacer)
+    }
+
     function logEvent(event, properties) {
       var log = document.getElementById('log');
       var msg = document.createElement('div');
       msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
-          'properties=' + JSON.stringify(properties);
+          'properties=' + stringifyObject(properties);
       log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
     }
 

examples/timeline/interaction/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
-</head>
-<body>
-  <a href="../../../timeline_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/timeline/interaction/navigationMenu.html

@@ -38,6 +38,7 @@
         <input type="button" id="zoomOut" value="Zoom out"/>
         <input type="button" id="moveLeft" value="Move left"/>
         <input type="button" id="moveRight" value="Move right"/>
+        <input type="button" id="toggleRollingMode" value="toggleRollingMode"/>
     </div>
 </div>
 
@@ -74,6 +75,8 @@
     document.getElementById('zoomOut').onclick   = function () { timeline.zoomOut( 0.2); };
     document.getElementById('moveLeft').onclick  = function () { move( 0.2); };
     document.getElementById('moveRight').onclick = function () { move(-0.2); };
+    document.getElementById('toggleRollingMode').onclick = function () { timeline.toggleRollingMode() };
+
 
 </script>
 </body>

examples/timeline/items/expectedVsActualTimesItems.html

@@ -61,16 +61,16 @@
             id: 1, 
             content: 'item 1 (expected time)', 
             className: 'expected',
-            start: '2014-01-23 12:00:00', 
-            end: '2014-01-26 12:00:00',
+            start: '2014-01-23T12:00:00',
+            end: '2014-01-26T12:00:00',
             group:'group1', 
             subgroup:'sg_1'
         },
         {
             id: 2, 
             content: 'item 1 (actual time)', 
-            start: '2014-01-24 12:00:00', 
-            end: '2014-01-27 12:00:00',
+            start: '2014-01-24T12:00:00',
+            end: '2014-01-27T12:00:00',
             group:'group1', 
             subgroup:'sg_1'
         },
@@ -80,16 +80,16 @@
             id: 3, 
             content: 'item 2 (expected time)', 
             className: 'expected',
-            start: '2014-01-13 12:00:00', 
-            end: '2014-01-16 12:00:00',
+            start: '2014-01-13T12:00:00',
+            end: '2014-01-16T12:00:00',
             group:'group1', 
             subgroup:'sg_2'
         },
          {
             id: 4, 
             content: 'item 2 (actual time)', 
-            start: '2014-01-14 12:00:00', 
-            end: '2014-01-17 12:00:00',
+            start: '2014-01-14T12:00:00',
+            end: '2014-01-17T12:00:00',
             group:'group1', 
             subgroup:'sg_2'
         }
@@ -108,4 +108,4 @@
 
 </script>
 </body>
-</html>
+</html>

examples/timeline/items/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
-</head>
-<body>
-  <a href="../../../timeline_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/timeline/items/visibleFrameTemplateContent.html

@@ -45,18 +45,18 @@
     {id: 1, value: 0.2, content: 'item 1', start: '2014-04-20', end: '2014-04-26'},
     {id: 2, value: 0.6, content: 'item 2', start: '2014-05-14', end: '2014-05-18'},
     {id: 3, type: 'point', content: 'item 3', start: '2014-04-15', end: '2014-05-18'},
-    {id: 4, content: 'item 4 with visibleFramTemplate in item', start: '2014-04-16', end: '2014-04-26', visibleFramTemplate: '<div class="progress-wrapper"><div class="progress"></div><label class="progress-label">80%<label></div>'
+    {id: 4, content: 'item 4 with visibleFrameTemplate in item', start: '2014-04-16', end: '2014-04-26', visibleFrameTemplate: '<div class="progress-wrapper"><div class="progress" style="width:80%"></div><label class="progress-label">80 per cent<label></div>'
     }
   ]);
 
   // Configuration for the Timeline
   var options = {
     visibleFrameTemplate: function(item) {
-      if (item.visibleFramTemplate) {
-        return item.visibleFramTemplate;
+      if (item.visibleFrameTemplate) {
+        return item.visibleFrameTemplate;
       }
       var percentage = item.value * 100 + '%';
-      return '<div class="progress-wrapper"><div class="progress"></div><label class="progress-label">' + percentage + '<label></div>';
+      return '<div class="progress-wrapper"><div class="progress" style="width:' + percentage + '"></div><label class="progress-label">' + percentage + '<label></div>';
     } 
   };
 

examples/timeline/other/customTimeBarsTooltip.html

@@ -0,0 +1,95 @@
+<!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-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
+</head>
+<body>
+
+<p>
+  The Timeline has functions to add multiple custom time bars which can be dragged by the user.
+</p>
+<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="t1" placeholder="custom bar ID">
+</p>
+<p>
+  <code><strong>timechange</strong></code> event, index: <span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
+</p>
+<p>
+  <code><strong>timechanged</strong></code> event, 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,
+    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, 't1');
+  timeline.setCustomTimeTitle(function(time){
+      return "I'm t1!";
+  }, "t1");
+
+  document.getElementById('add').onclick = function () {
+    try {
+      customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
+      var barId = document.getElementById('barId').value || undefined;
+      timeline.addCustomTime(customDate, barId);
+        timeline.setCustomTimeTitle(function(time){
+            return "I'm "+barId+"!";
+        }, barId);
+      document.getElementById('barId').value = '';
+    }
+    catch (err) {
+      console.log(err);
+      alert(err);
+    }
+  };
+
+  document.getElementById('remove').onclick = function () {
+    try {
+      timeline.removeCustomTime(document.getElementById('barIndex').value);
+      document.getElementById('barIndex').value = '';
+    }
+    catch (err) {
+      console.log(err);
+      alert(err);
+    }
+  };
+
+  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/other/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
-</head>
-<body>
-  <a href="../../../timeline_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/timeline/other/rtl.html

@@ -3,6 +3,7 @@
 <head>
   <title>Timeline | RTL example</title>
 
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
   <script src="../../../dist/vis.js"></script>
   <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
   
@@ -39,10 +40,10 @@
     height: '300px',
   };
 
-  var options1 = Object.assign({}, options)
+  var options1 = jQuery.extend(options, {})
   var timeline1 = new vis.Timeline(container1, items, options1);
 
-  var options2 = Object.assign({rtl: true}, options)
+  var options2 = jQuery.extend(options, {rtl: true})
   var timeline2 = new vis.Timeline(container2, items, options2);
 
 </script>

examples/timeline/other/verticalScroll.html

@@ -2,6 +2,7 @@
 <head>
   <title>Timeline | Vertical Scroll Option</title>
 
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
   <script src="../../../dist/vis.js"></script>
   <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
 
@@ -75,11 +76,11 @@ zoomKey: 'ctrlKey'
 
   // create a Timeline
 
-  options1 = Object.assign({}, options)
+  options1 = jQuery.extend(options, {});
   var container1 = document.getElementById('mytimeline1');
   timeline1 = new vis.Timeline(container1, items, groups, options1);
 
-  options2 = Object.assign({horizontalScroll: true}, options)
+  options2 = jQuery.extend(options, {horizontalScroll: true});
   var container2 = document.getElementById('mytimeline2');
   timeline2 = new vis.Timeline(container2, items, groups, options2);
 

examples/timeline/resources/data/wk2014.json

@@ -7,7 +7,7 @@
     "abbr2": "cl",
     "score2": "1 (2)",
     "description": "round of 16",
-    "start": "2014-06-28 13:00"
+    "start": "2014-06-28T13:00"
   },
   {
     "player1": "Colombia",
@@ -17,7 +17,7 @@
     "abbr2": "uy",
     "score2": 0,
     "description": "round of 16",
-    "start": "2014-06-28 17:00"
+    "start": "2014-06-28T17:00"
   },
   {
     "player1": "Netherlands",
@@ -27,7 +27,7 @@
     "abbr2": "mx",
     "score2": 1,
     "description": "round of 16",
-    "start": "2014-06-29 13:00"
+    "start": "2014-06-29T13:00"
   },
   {
     "player1": "Costa Rica",
@@ -37,7 +37,7 @@
     "abbr2": "gr",
     "score2": "1 (3)",
     "description": "round of 16",
-    "start": "2014-06-29 17:00"
+    "start": "2014-06-29T17:00"
   },
   {
     "player1": "France",
@@ -47,7 +47,7 @@
     "abbr2": "ng",
     "score2": 0,
     "description": "round of 16",
-    "start": "2014-06-30 13:00"
+    "start": "2014-06-30T13:00"
   },
   {
     "player1": "Germany",
@@ -57,7 +57,7 @@
     "abbr2": "dz",
     "score2": 1,
     "description": "round of 16",
-    "start": "2014-06-30 17:00"
+    "start": "2014-06-30T17:00"
   },
   {
     "player1": "Argentina",
@@ -67,7 +67,7 @@
     "abbr2": "ch",
     "score2": 0,
     "description": "round of 16",
-    "start": "2014-07-01 13:00"
+    "start": "2014-07-01T13:00"
   },
   {
     "player1": "Belgium",
@@ -77,7 +77,7 @@
     "abbr2": "us",
     "score2": 1,
     "description": "round of 16",
-    "start": "2014-07-01 17:00"
+    "start": "2014-07-01T17:00"
   },
   {
     "player1": "France",
@@ -87,7 +87,7 @@
     "abbr2": "de",
     "score2": 1,
     "description": "quarter-finals",
-    "start": "2014-07-04 13:00"
+    "start": "2014-07-04T13:00"
   },
   {
     "player1": "Brazil",
@@ -97,7 +97,7 @@
     "abbr2": "co",
     "score2": 1,
     "description": "quarter-finals",
-    "start": "2014-07-04 17:00"
+    "start": "2014-07-04T17:00"
   },
   {
     "player1": "Argentina",
@@ -107,7 +107,7 @@
     "abbr2": "be",
     "score2": 0,
     "description": "quarter-finals",
-    "start": "2014-07-05 13:00"
+    "start": "2014-07-05T13:00"
   },
   {
     "player1": "Netherlands",
@@ -117,7 +117,7 @@
     "abbr2": "cr",
     "score2": "0 (3)",
     "description": "quarter-finals",
-    "start": "2014-07-05 17:00"
+    "start": "2014-07-05T17:00"
   },
   {
     "player1": "Brazil",
@@ -127,7 +127,7 @@
     "abbr2": "de",
     "score2": 7,
     "description": "semi-finals",
-    "start": "2014-07-08 17:00"
+    "start": "2014-07-08T17:00"
   },
   {
     "player1": "Netherlands",
@@ -137,7 +137,7 @@
     "abbr2": "ar",
     "score2": "0 (4)",
     "description": "semi-finals",
-    "start": "2014-07-09 17:00"
+    "start": "2014-07-09T17:00"
   },
   {
     "player1": "Germany",
@@ -147,6 +147,6 @@
     "abbr2": "ar",
     "score2": 0,
     "description": "final",
-    "start": "2014-07-13 16:00"
+    "start": "2014-07-13T16:00"
   }
-]
+]

examples/timeline/resources/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
-</head>
-<body>
-  <a href="../../../timeline_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/timeline/styling/index.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; url=../../../timeline_examples.html">
-</head>
-<body>
-  <a href="../../../timeline_examples.html">Back to overview...</a></p>
-</body>
-</html>

examples/timeline/styling/itemTemplates.html

@@ -88,7 +88,7 @@
       abbr2: 'cl',
       score2: '1 (2)',
       description: 'round of 16',
-      start: '2014-06-28 13:00'
+      start: '2014-06-28T13:00:00'
     },
     {
       player1: 'Colombia',
@@ -98,7 +98,7 @@
       abbr2: 'uy',
       score2: 0,
       description: 'round of 16',
-      start: '2014-06-28 17:00'
+      start: '2014-06-28T17:00:00'
     },
     {
       player1: 'Netherlands',
@@ -108,7 +108,7 @@
       abbr2: 'mx',
       score2: 1,
       description: 'round of 16',
-      start: '2014-06-29 13:00'
+      start: '2014-06-29T13:00:00'
     },
     {
       player1: 'Costa Rica',
@@ -118,7 +118,7 @@
       abbr2: 'gr',
       score2: '1 (3)',
       description: 'round of 16',
-      start: '2014-06-29 17:00'
+      start: '2014-06-29T17:00:00'
     },
     {
       player1: 'France',
@@ -128,7 +128,7 @@
       abbr2: 'ng',
       score2: 0,
       description: 'round of 16',
-      start: '2014-06-30 13:00'
+      start: '2014-06-30T13:00:00'
     },
     {
       player1: 'Germany',
@@ -138,7 +138,7 @@
       abbr2: 'dz',
       score2: 1,
       description: 'round of 16',
-      start: '2014-06-30 17:00'
+      start: '2014-06-30T17:00:00'
     },
     {
       player1: 'Argentina',
@@ -148,7 +148,7 @@
       abbr2: 'ch',
       score2: 0,
       description: 'round of 16',
-      start: '2014-07-01 13:00'
+      start: '2014-07-01T13:00:00'
     },
     {
       player1: 'Belgium',
@@ -158,7 +158,7 @@
       abbr2: 'us',
       score2: 1,
       description: 'round of 16',
-      start: '2014-07-01 17:00'
+      start: '2014-07-01T17:00:00'
     },
 
     // quarter-finals
@@ -170,7 +170,7 @@
       abbr2: 'de',
       score2: 1,
       description: 'quarter-finals',
-      start: '2014-07-04 13:00'
+      start: '2014-07-04T13:00:00'
     },
     {
       player1: 'Brazil',
@@ -180,7 +180,7 @@
       abbr2: 'co',
       score2: 1,
       description: 'quarter-finals',
-      start: '2014-07-04 17:00'
+      start: '2014-07-04T17:00:00'
     },
     {
       player1: 'Argentina',
@@ -190,7 +190,7 @@
       abbr2: 'be',
       score2: 0,
       description: 'quarter-finals',
-      start: '2014-07-05 13:00'
+      start: '2014-07-05T13:00:00'
     },
     {
       player1: 'Netherlands',
@@ -200,7 +200,7 @@
       abbr2: 'cr',
       score2: '0 (3)',
       description: 'quarter-finals',
-      start: '2014-07-05 17:00'
+      start: '2014-07-05T17:00:00'
     },
 
     // semi-finals
@@ -212,7 +212,7 @@
       abbr2: 'de',
       score2: 7,
       description: 'semi-finals',
-      start: '2014-07-08 17:00'
+      start: '2014-07-08T17:00:00'
     },
     {
       player1: 'Netherlands',
@@ -222,7 +222,7 @@
       abbr2: 'ar',
       score2: '0 (4)',
       description: 'semi-finals',
-      start: '2014-07-09 17:00'
+      start: '2014-07-09T17:00:00'
     },
 
     // final
@@ -234,7 +234,7 @@
       abbr2: 'ar',
       score2: 0,
       description: 'final',
-      start: '2014-07-13 16:00'
+      start: '2014-07-13T16:00:00'
     }
   ]);
 
@@ -248,4 +248,4 @@
   var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
-</html>
+</html>

index.html

@@ -29,7 +29,7 @@
 
     <script src="./js/smooth-scroll.min.js"></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.0/vis.min.js"></script>
 
     <script language="JavaScript">
         smoothScroll.init();
@@ -37,7 +37,7 @@
         function evalLinks() {
             if (typeof vis === 'undefined') {
                 console.log(document.getElementById("linkStatus"));
-                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.18.1) 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.19.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)";
             }
@@ -205,13 +205,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.18.1/vis.min.js" target="_blank">vis.min.js</a> <br>
-                        <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.css" target="_blank">vis.min.css</a> <br>
+                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.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.19.0/vis.min.css" target="_blank">vis.min.css</a> <br>
                         <span id="linkStatus"></span>
                     </p>
                     <h3>download</h3>
                     <p>
-                        <a href="https://github.com/almende/vis/archive/v4.18.1.zip">v4.18.1.zip</a>
+                        <a href="https://github.com/almende/vis/archive/v4.19.0.zip">v4.19.0.zip</a>
                     </p>
                 </div>
             </div>