Released version 3.3.0

dist/vis.css

@@ -1,3 +1,18 @@
+.vis .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  /* Must be displayed above for example selected Timeline items */
+  z-index: 10;
+}
+
+.vis-active {
+  box-shadow: 0 0 10px #86d5f8;
+}
+
 .vis.timeline {
 }
 
@@ -129,8 +144,7 @@
   position: absolute;
   width: 100%;
   height: 0;
-  left: 1px;
-  z-index: 1;
+  left: 0;
 }
 
 .vis.timeline  .foreground .group {
@@ -157,7 +171,9 @@
 .vis.timeline .item.selected {
   border-color: #FFC200;
   background-color: #FFF785;
-  z-index: 999;
+
+  /* z-index must be higher than the z-index of custom time bar and current time bar */
+  z-index: 2;
 }
 
 .vis.timeline .editable .item.selected {
@@ -233,7 +249,6 @@
   left: -4px;
 
   cursor: w-resize;
-  z-index: 10000;
 }
 
 .vis.timeline .item.range .drag-right {
@@ -244,7 +259,6 @@
   right: -4px;
 
   cursor: e-resize;
-  z-index: 10001; /* a little higher z-index than .drag-left */
 }
 
 .vis.timeline .timeaxis {
@@ -511,137 +525,148 @@
 
 
 div.network-manipulationDiv {
-    border-width:0px;
-    border-bottom: 1px;
-    border-style:solid;
-    border-color: #d6d9d8;
-    background: #ffffff; /* Old browsers */
-    background: -moz-linear-gradient(top,  #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
-    background: linear-gradient(to bottom,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
-
-    width: 600px;
-    height:30px;
-    z-index:10;
-    position:absolute;
+  border-width: 0;
+  border-bottom: 1px;
+  border-style:solid;
+  border-color: #d6d9d8;
+  background: #ffffff; /* Old browsers */
+  background: -moz-linear-gradient(top,  #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
+  background: linear-gradient(to bottom,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 30px;
 }
 
 div.network-manipulation-editMode {
-    height:30px;
-    z-index:10;
-    position:absolute;
-    margin-top:20px;
+  position:absolute;
+  left: 0;
+  top: 0;
+  height: 30px;
+  margin-top:20px;
 }
 
 div.network-manipulation-closeDiv {
-    height:30px;
-    width:30px;
-    z-index:11;
-    position:absolute;
-    margin-top:3px;
-    margin-left:590px;
-    background-position: 0px 0px;
-    background-repeat:no-repeat;
-    background-image: url("img/network/cross.png");
-    cursor: pointer;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+  position:absolute;
+  left: 0;
+  top: 0;
+  width: 30px;
+  height: 30px;
+
+  margin-top: 3px;
+  margin-left: 590px;
+  background-position: 0px 0px;
+  background-repeat: no-repeat;
+  background-image: url("img/network/cross.png");
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 span.network-manipulationUI {
-    font-family: verdana;
-    font-size: 12px;
-    -moz-border-radius: 15px;
-    border-radius: 15px;
-    display:inline-block;
-    background-position: 0px 0px;
-    background-repeat:no-repeat;
-    height:24px;
-    margin: -14px 0px 0px 10px;
-    vertical-align:middle;
-    cursor: pointer;
-    padding: 0px 8px 0px 8px;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+  font-family: verdana;
+  font-size: 12px;
+  -moz-border-radius: 15px;
+  border-radius: 15px;
+  display:inline-block;
+  background-position: 0px 0px;
+  background-repeat:no-repeat;
+  height:24px;
+  margin: -14px 0px 0px 10px;
+  vertical-align:middle;
+  cursor: pointer;
+  padding: 0px 8px 0px 8px;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 span.network-manipulationUI:hover {
-    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
 }
 
 span.network-manipulationUI:active {
-    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
 }
 
 span.network-manipulationUI.back {
-    background-image: url("img/network/backIcon.png");
+  background-image: url("img/network/backIcon.png");
 }
 
 span.network-manipulationUI.none:hover {
-    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
-    cursor: default;
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
+  cursor: default;
 }
 span.network-manipulationUI.none:active {
-    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
 }
 span.network-manipulationUI.none {
-    padding: 0px 0px 0px 0px;
+  padding: 0px 0px 0px 0px;
 }
 span.network-manipulationUI.notification{
-    margin: 2px;
-    font-weight: bold;
+  margin: 2px;
+  font-weight: bold;
 }
 
 span.network-manipulationUI.add {
-    background-image: url("img/network/addNodeIcon.png");
+  background-image: url("img/network/addNodeIcon.png");
 }
 
 span.network-manipulationUI.edit {
-    background-image: url("img/network/editIcon.png");
+  background-image: url("img/network/editIcon.png");
 }
 
 span.network-manipulationUI.edit.editmode {
-    background-color: #fcfcfc;
-    border-style:solid;
-    border-width:1px;
-    border-color: #cccccc;
+  background-color: #fcfcfc;
+  border-style:solid;
+  border-width:1px;
+  border-color: #cccccc;
 }
 
 span.network-manipulationUI.connect {
-    background-image: url("img/network/connectIcon.png");
+  background-image: url("img/network/connectIcon.png");
 }
 
 span.network-manipulationUI.delete {
-    background-image: url("img/network/deleteIcon.png");
+  background-image: url("img/network/deleteIcon.png");
 }
 /* top right bottom left */
 span.network-manipulationLabel {
-    margin: 0px 0px 0px 23px;
-    line-height: 25px;
+  margin: 0px 0px 0px 23px;
+  line-height: 25px;
 }
 div.network-seperatorLine {
-    display:inline-block;
-    width:1px;
-    height:20px;
-    background-color: #bdbdbd;
-    margin: 5px 7px 0px 15px;
+  display:inline-block;
+  width:1px;
+  height:20px;
+  background-color: #bdbdbd;
+  margin: 5px 7px 0px 15px;
+}
+
+div.network-navigation_wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
 }
 div.network-navigation {
     width:34px;
     height:34px;
-    z-index:10;
     -moz-border-radius: 17px;
     border-radius: 17px;
     position:absolute;

docs/timeline.html

@@ -43,6 +43,7 @@
   <li><a href="#Methods">Methods</a></li>
   <li><a href="#Events">Events</a></li>
   <li><a href="#Editing_Items">Editing Items</a></li>
+  <li><a href="#Localization">Localization</a></li>
   <li><a href="#Styles">Styles</a></li>
   <li><a href="#Data_Policy">Data Policy</a></li>
 </ul>
@@ -359,8 +360,7 @@ var options = {
     <td>align</td>
     <td>String</td>
     <td>"center"</td>
-    <td>Alignment of items with type 'box'. Available values are
-        'center' (default), 'left', or 'right').</td>
+    <td>Alignment of items with type 'box' and 'range'. Available values are 'auto' (default), 'center', 'left', or 'right'. For 'box' items, the 'auto' alignment is 'center'. For 'range' items, the auto alignment is dynamic: positioned left and shifted such that the contents is always visible on screen.</td>
 </tr>
 
 <tr>
@@ -370,6 +370,14 @@ var options = {
     <td>If true, the Timeline will automatically detect when its container is resized, and redraw itself accordingly. If false, the Timeline can be forced to repaint after its container has been resized using the function <code>redraw()</code>.</td>
 </tr>
 
+<tr>
+  <td>clickToUse</td>
+  <td>boolean</td>
+  <td>false</td>
+  <td>When a Timeline is configured to be <code>clickToUse</code>, it will react to mouse and touch events only when active.
+    When active, a blue shadow border is displayed around the Timeline. The Timeline is set active by clicking on it, and is changed to inactive again by clicking outside the Timeline or by pressing the ESC key.</td>
+</tr>
+
 <tr>
     <td>editable</td>
     <td>Boolean | Object</td>
@@ -438,6 +446,20 @@ var options = {
     </td>
 </tr>
 
+<tr>
+    <td>locale</td>
+    <td>String</td>
+    <td>none</td>
+    <td>Select a locale for the Timeline. See section <a href="#Localization">Localization</a> for more information.</td>
+</tr>
+
+<tr>
+    <td>locales</td>
+    <td>Object</td>
+    <td>none</td>
+    <td>A map with i18n locales. See section <a href="#Localization">Localization</a> for more information.</td>
+</tr>
+
 <tr>
     <td>margin.axis</td>
     <td>Number</td>
@@ -714,23 +736,37 @@ timeline.clear({options: true}); // clear options only
   </tr>
 
   <tr>
-    <td>fit()</td>
+    <td>fit([options])</td>
     <td>none</td>
-    <td>Adjust the visible window such that it fits all items.
+    <td>Adjust the visible window such that it fits all items. See also function <code>focus(id)</code>.
+      Available options:
+      <ul>
+        <li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
+      </ul>
     </td>
   </tr>
 
   <tr>
-    <td>getCustomTime()</td>
+    <td>focus(id | ids [, options])</td>
+    <td>none</td>
+    <td>Adjust the visible window such that the selected item (or multiple items) are centered on screen. See also function <code>fit()</code>. Available options:
+      <ul>
+        <li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
+      </ul>
+    </td>
+  </tr>
+
+  <tr>
+    <td>getCurrentTime()</td>
     <td>Date</td>
-    <td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true.
+    <td>Get the current time. Only applicable when option <code>showCurrentTime</code> is true.
     </td>
   </tr>
 
   <tr>
-    <td>setCustomTime(time)</td>
-    <td>none</td>
-    <td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> is a Date object.
+    <td>getCustomTime()</td>
+    <td>Date</td>
+    <td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true.
     </td>
   </tr>
 
@@ -752,6 +788,16 @@ timeline.clear({options: true}); // clear options only
     <td>Get the current visible window. Returns an object with properties <code>start: Date</code> and <code>end: Date</code>.</td>
   </tr>
 
+  <tr>
+    <td>moveTo(time [, options])</td>
+    <td>none</td>
+    <td>Move the window such that given time is centered on screen. Parameter <code>time</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. Available options:
+      <ul>
+        <li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
+      </ul>
+    </td>
+  </tr>
+
   <tr>
     <td>on(event, callback)</td>
     <td>none</td>
@@ -771,6 +817,21 @@ timeline.clear({options: true}); // clear options only
     </td>
   </tr>
 
+  <tr>
+    <td>setCurrentTime(time)</td>
+    <td>none</td>
+    <td>Set a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time.
+      <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
+      Only applicable when option <code>showCurrentTime</code> is true.</td>
+  </tr>
+
+  <tr>
+    <td>setCustomTime(time)</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>
+  </tr>
+
   <tr>
     <td>setGroups(groups)</td>
     <td>none</td>
@@ -799,16 +860,24 @@ timeline.clear({options: true}); // clear options only
   </tr>
 
   <tr>
-    <td>setSelection([ids])</td>
+    <td>setSelection(id | ids [, options])</td>
     <td>none</td>
-    <td>Select or deselect items. Currently selected items will be unselected.
+    <td>Select one or multiple items by their id. The currently selected items will be unselected. To unselect all selected items, call `setSelection([])`. Available options:
+      <ul>
+        <li><code>focus: boolean</code><br>If true, focus will be set to the selected item(s)</li>
+        <li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms. Only applicable when option focus is true.</li>
+      </ul>
     </td>
   </tr>
 
   <tr>
-    <td>setWindow(start, end)</td>
+    <td>setWindow(start, end [, options])</td>
     <td>none</td>
-    <td>Set the current visible window. The parameters <code>start</code> and <code>end</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. If the parameter value of <code>start</code> or <code>end</code> is null, the parameter will be left unchanged.</td>
+    <td>Set the current visible window. The parameters <code>start</code> and <code>end</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. If the parameter value of <code>start</code> or <code>end</code> is null, the parameter will be left unchanged. Available options:
+      <ul>
+        <li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
+      </ul>
+    </td>
   </tr>
 
 </table>
@@ -960,6 +1029,7 @@ var options = {
   <li><code>onAdd(item, callback)</code> Fired when a new item is about to be added. If not implemented, the item will be added with default text contents.</li>
   <li><code>onUpdate(item, callback)</code> Fired when an item is about to be updated. This function typically has to show a dialog where the user change the item. If not implemented, nothing happens.</li>
   <li><code>onMove(item, callback)</code> Fired when an item has been moved. If not implemented, the move action will be accepted.</li>
+  <li><code>onMoving(item, callback)</code> Fired repeatedly while an item is being moved (dragged). Can be used to adjust the items start, end, and/or group to allowed regions.</li>
   <li><code>onRemove(item, callback)</code> Fired when an item is about to be deleted. If not implemented, the item will be always removed.</li>
 </ul>
 
@@ -985,11 +1055,69 @@ var options = {
       callback(null); // cancel updating the item
     }
   }
-}
+};
 </pre>
 
 A full example is available here: <a href="../examples/timeline/08_edit_items.html">08_edit_items.html</a>.
 
+<h2 id="Localization">Localization</h2>
+<p>
+  Timeline can be localized. For localization, Timeline depends largely on the localization of <a href="http://momentjs.com">moment.js</a>. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales.
+</p>
+
+<p>
+  To set a locale for the Timeline, specify the option <code>locale</code>:
+</p>
+
+<pre class="prettyprint lang-js">var options = {
+  locale: 'nl'
+};
+</pre>
+
+<h3>Create a new locale</h3>
+
+To load a locale into the Timeline not supported by default, one can add a new locale to the option <code>locales</code>:
+
+<pre class="prettyprint lang-js">var options = {
+  locales: {
+    // create a new locale (text strings should be replaced with localized strings)
+    mylocale: {
+      current: 'current',
+      time: 'time',
+    }
+  },
+
+  // use the new locale
+  locale: 'mylocale'
+};
+</pre>
+
+<h3 id="available-locales">Available locales</h3>
+
+<p>
+  Timeline comes with support for the following locales:
+</p>
+
+<table>
+  <tr><th>Language</th><th>Code</th></tr>
+  <tr>
+    <td>English</td>
+    <td>
+      <code>en</code><br>
+      <code>en_EN</code><br>
+      <code>en_US</code>
+    </td>
+  </tr>
+  <tr>
+    <td>Dutch</td>
+    <td>
+      <code>nl</code><br>
+      <code>nl_NL</code><br>
+      <code>nl_BE</code>
+    </td>
+  </tr>
+</table>
+
 
 <h2 id="Styles">Styles</h2>
 <p>
@@ -1008,7 +1136,6 @@ A full example is available here:
 </pre>
 
-
 <h2 id="Data_Policy">Data Policy</h2>
 <p>
   All code and data is processed and rendered in the browser.

examples/graph2d/01_basic.html

@@ -2,8 +2,8 @@
 <html>
 
 <head>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-    <meta content="utf-8" http-equiv="encoding">
+  <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">
@@ -18,13 +18,13 @@
 <body>
 <h2>Graph2d | Basic Example</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
-    This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
-    In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
-    There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
-    create your own styling.
-    <br /><br />
+  This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
+  In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
+  There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
+  create your own styling.
+  <br /><br />
   Graph2d is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2d.
-    In these examples however, we will focus on what's new in Graph2d!
+  In these examples however, we will focus on what's new in Graph2d!
 </div>
 <br />
 <div id="visualization"></div>
@@ -33,18 +33,18 @@
 
   var container = document.getElementById('visualization');
   var items = [
-      {x: '2014-06-11', y: 10},
-      {x: '2014-06-12', y: 25},
-      {x: '2014-06-13', y: 30},
-      {x: '2014-06-14', y: 10},
-      {x: '2014-06-15', y: 15},
-      {x: '2014-06-16', y: 30}
+    {x: '2014-06-11', y: 10},
+    {x: '2014-06-12', y: 25},
+    {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'
+    start: '2014-06-10',
+    end: '2014-06-18'
   };
   var graph2d = new vis.Graph2d(container, dataset, options);
 

examples/graph2d/10_barsSideBySide.html

@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Bar Graphs Side by Side Example</title>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Bar Graphs Side by Side Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    When using Bar graphs, it can often be the case that there are multiple bars on the same timepoint. This may not always be the desired result. You can use the
+    barChart.handleOverlap option to automatically plot the bars next to eachother or stacked on top of eachother if they occupy the same timeslot. By default, this option is on, the bars overlap.
+    Use the dropdown box to experiment with the options. The stacked only really makes sense when using groups as is shown in the <a href="./11_barsSideBySideGroups.html">next example</a>.
+
+    <br /><br />
+    Handle overlap: <select id="dropdownID">
+    <option value="overlap">overlap</option>
+    <option value="sideBySide">sideBySide</option>
+    <option value="stack">stack</option>
+</select><br/>
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+    var container = document.getElementById('visualization');
+    var items = [
+        {x: '2014-06-11', y: 10},
+        {x: '2014-06-12', y: 25},
+        {x: '2014-06-13', y: 30},
+        {x: '2014-06-14', y: 10},
+        {x: '2014-06-15', y: 15},
+        {x: '2014-06-16', y: 30},
+        {x: '2014-06-11', y: 12},
+        {x: '2014-06-14', y: 24},
+        {x: '2014-06-15', y: 5},
+        {x: '2014-06-16', y: 12}
+    ];
+
+    var dataset = new vis.DataSet(items);
+    var options = {
+        style:'bar',
+        barChart: {width:50, align:'center'}, // align: left, center, right
+        drawPoints: false,
+        dataAxis: {
+            icons:true
+        },
+        orientation:'top',
+        start: '2014-06-10',
+        end: '2014-06-18'
+    };
+    var graph2d = new vis.Graph2d(container, items, options);
+
+
+    var dropdown = document.getElementById("dropdownID");
+    dropdown.onchange = update;
+
+    function update() {
+        var options = {barChart:{handleOverlap:dropdown.value}};
+        graph2d.setOptions(options);
+    }
+
+</script>
+</body>
+</html>

examples/graph2d/11_barsSideBySideGroups.html

@@ -0,0 +1,87 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Bar Graphs Side by Side Example with Groups</title>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Bar Graphs Side by Side Example with Groups</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    When using Bar graphs, it can often be the case that there are multiple bars on the same timepoint. This may not always be the desired result. You can use the
+    barChart.handleOverlap option to automatically plot the bars next to eachother or stacked on top of eachother if they occupy the same timeslot. By default, this option is on, the bars overlap.
+    Use the dropdown box to experiment with the options. The stacked only really makes sense when using groups as is shown here.
+
+    <br /><br />
+    Handle overlap: <select id="dropdownID">
+    <option value="overlap">overlap</option>
+    <option value="sideBySide" selected="selected">sideBySide</option>
+    <option value="stack">stack</option>
+    </select>
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+    var container = document.getElementById('visualization');
+    var groups = new vis.DataSet();
+    groups.add({id: 0, content: "group0"})
+    groups.add({id: 1, content: "group1"})
+    groups.add({id: 2, content: "group2"})
+
+    var items = [
+        {x: '2014-06-11', y: 10, group:0},
+        {x: '2014-06-12', y: 25, group:0},
+        {x: '2014-06-13', y: 30, group:0},
+        {x: '2014-06-14', y: 10, group:0},
+        {x: '2014-06-15', y: 15, group:0},
+        {x: '2014-06-16', y: 30, group:0},
+        {x: '2014-06-11', y: 12, group:1},
+        {x: '2014-06-12', y: 15, group:1},
+        {x: '2014-06-13', y: 34, group:1},
+        {x: '2014-06-14', y: 24, group:1},
+        {x: '2014-06-15', y: 5, group:1},
+        {x: '2014-06-16', y: 12, group:1},
+        {x: '2014-06-11', y: 22, group:2},
+        {x: '2014-06-12', y: 14, group:2},
+        {x: '2014-06-13', y: 24, group:2},
+        {x: '2014-06-14', y: 21, group:2},
+        {x: '2014-06-15', y: 30, group:2},
+        {x: '2014-06-16', y: 18, group:2}
+    ];
+
+    var dataset = new vis.DataSet(items);
+    var options = {
+        style:'bar',
+        barChart: {width:50, align:'center', handleOverlap:'sideBySide'}, // align: left, center, right
+        drawPoints: false,
+        dataAxis: {
+            icons:true
+        },
+        orientation:'top',
+        start: '2014-06-10',
+        end: '2014-06-18'
+    };
+    var graph2d = new vis.Graph2d(container, items, options,groups);
+
+    var dropdown = document.getElementById("dropdownID");
+    dropdown.onchange = update;
+
+    function update() {
+        var options = {barChart:{handleOverlap:dropdown.value}};
+        graph2d.setOptions(options);
+    }
+
+
+</script>
+</body>
+</html>

examples/graph2d/12_customRange.html

@@ -0,0 +1,94 @@
+<!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.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Custom axis range</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    You can define a custom range for the Y axis. Since there are two Y axis, you can define both of them. You can also
+    only define the min or max values. Since one of the Y axis is slaved to the other one (the right one is slaved to the left one),
+    you cannot absolutely define the range of the slaved axis because it has to use the same lines. The values you supply are used as guidelines however.
+
+<pre class="prettyprint lang-js">
+var options = {
+    dataAxis: {
+        customRange: {
+            left: {
+                min:-5, max:30
+            },
+            right: {
+                min:-5
+            }
+        },
+    }
+};
+</pre>
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+    var container = document.getElementById('visualization');
+    var groups = new vis.DataSet();
+    groups.add({id: 0, content: "group0"})
+    groups.add({id: 1, content: "group1"})
+    groups.add({id: 2, content: "group2",options:{ yAxisOrientation:'right'}})
+
+    var items = [
+        {x: '2014-06-11', y: 10, group:0},
+        {x: '2014-06-12', y: 25, group:0},
+        {x: '2014-06-13', y: 30, group:0},
+        {x: '2014-06-14', y: 10, group:0},
+        {x: '2014-06-15', y: 15, group:0},
+        {x: '2014-06-16', y: 30, group:0},
+        {x: '2014-06-11', y: 12, group:1},
+        {x: '2014-06-12', y: 15, group:1},
+        {x: '2014-06-13', y: 34, group:1},
+        {x: '2014-06-14', y: 24, group:1},
+        {x: '2014-06-15', y: 5, group:1},
+        {x: '2014-06-16', y: 12, group:1},
+        {x: '2014-06-11', y: 22, group:2},
+        {x: '2014-06-12', y: 14, group:2},
+        {x: '2014-06-13', y: 24, group:2},
+        {x: '2014-06-14', y: 21, group:2},
+        {x: '2014-06-15', y: 30, group:2},
+        {x: '2014-06-16', y: 18, group:2}
+    ];
+
+    var dataset = new vis.DataSet(items);
+    var options = {
+        style:'bar',
+        barChart: {width:50, align:'center', handleOverlap:"sideBySide"}, // align: left, center, right
+        drawPoints: true,
+        dataAxis: {
+            customRange: {
+                left: {
+                    min:-5, max:30
+                },
+                right: {
+                    min:-5
+                }
+            },
+            icons:true
+        },
+        orientation:'top',
+        start: '2014-06-10',
+        end: '2014-06-18'
+    };
+    var graph2d = new vis.Graph2d(container, items, options,groups);
+
+</script>
+</body>
+</html>

examples/graph2d/13_localization.html

@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
+  <title>Graph2d | Localization</title>
+
+  <style type="text/css">
+    body, html, select {
+      font-family: sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+
+  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.min.js"></script>
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Localization</h2>
+<p>
+  To localize Graph2d, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.
+</p>
+
+<p>
+  <label for="locale">Select a locale:</label>
+  <select id="locale">
+    <option value="en" selected>en</option>
+    <option value="nl">nl</option>
+  </select>
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+  var container = document.getElementById('visualization');
+  var items = [
+    {x: '2014-06-11', y: 10},
+    {x: '2014-06-12', y: 25},
+    {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);
+
+  // update the locale when changing the select box value
+  var select = document.getElementById('locale');
+  select.onchange = function () {
+    graph2d.setOptions({
+      locale: this.value
+    });
+  };
+  select.onchange();
+</script>
+</body>
+</html>

examples/graph2d/14_toggleGroups.html

@@ -0,0 +1,145 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Graph2d | Toggle Groups Example</title>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+
+      div.graphs {
+          width:300px;
+          display:inline-block;
+      }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Groups Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows the groups visibility functionality within Graph2d. Groups have their own visibility option. By using this,
+    all graph2d instances using those groups would show or hide that group. If you have multiple instances sharing the same data and groups,
+    you can use the groups.visibility option to set it on an instance level. The graphs below all share the same groups, items and initial options.
+    We then use a setOptions like so:
+
+
+    <pre class="prettyprint lang-js">
+        graph2d1.setOptions({
+            groups:{
+                visibility:{
+                    0:true,               // group id:0 visible
+                    1:false,              // group id:1 hidden
+                    2:false,              // group id:2 hidden
+                    3:false,              // group id:3 hidden
+                    "__ungrouped__":false // default group hidden
+                }
+            }
+        })
+    </pre>
+</div>
+<br />
+
+<div class="graphs" id="visualization1"></div>
+<div class="graphs" id="visualization2"></div>
+<div class="graphs" id="visualization3"></div>
+<div class="graphs" id="visualization4"></div>
+<div class="graphs" id="visualization5"></div>
+<div class="graphs" id="visualization6"></div>
+
+<script type="text/javascript">
+    // create a dataSet with groups
+    var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
+    var groups = new vis.DataSet();
+        groups.add({
+        id: 0,
+        content: names[0],
+        options: {
+            drawPoints: {
+                style: 'square' // square, circle
+            },
+            shaded: {
+                orientation: 'bottom' // top, bottom
+            }
+        }});
+
+    groups.add({
+        id: 1,
+        content: names[1],
+        options: {
+            style:'bar'
+        }});
+
+    groups.add({
+        id: 2,
+        content: names[2],
+        options: {drawPoints: false}
+    });
+
+    groups.add({
+        id: 3,
+        content: names[3],
+        options: {
+            drawPoints: {
+                style: 'circle' // square, circle
+            },
+            shaded: {
+                orientation: 'top' // top, bottom
+            }
+        }});
+
+  var container = document.getElementById('visualization');
+  var items = [
+    {x: '2014-06-13', y: 60},
+    {x: '2014-06-14', y: 40},
+    {x: '2014-06-15', y: 55},
+    {x: '2014-06-16', y: 40},
+    {x: '2014-06-17', y: 50},
+    {x: '2014-06-13', y: 30, group: 0},
+    {x: '2014-06-14', y: 10, group: 0},
+    {x: '2014-06-15', y: 15, group: 1},
+    {x: '2014-06-16', y: 30, group: 1},
+    {x: '2014-06-17', y: 10, group: 1},
+    {x: '2014-06-18', y: 15, group: 1},
+    {x: '2014-06-19', y: 52, group: 1},
+    {x: '2014-06-20', y: 10, group: 1},
+    {x: '2014-06-21', y: 20, group: 2},
+    {x: '2014-06-22', y: 60, group: 2},
+    {x: '2014-06-23', y: 10, group: 2},
+    {x: '2014-06-24', y: 25, group: 2},
+    {x: '2014-06-25', y: 30, group: 2},
+    {x: '2014-06-26', y: 20, group: 3},
+    {x: '2014-06-27', y: 60, group: 3},
+    {x: '2014-06-28', y: 10, group: 3},
+    {x: '2014-06-29', y: 25, group: 3},
+    {x: '2014-06-30', y: 30, group: 3}
+  ];
+
+  var dataset = new vis.DataSet(items);
+  var options = {
+      defaultGroup: 'ungrouped',
+      legend: false,
+      graphHeight:200,
+      start: '2014-06-10',
+      end: '2014-07-04',
+      showMajorLabels:false,
+      showMinorLabels:false
+  };
+  var graph2d1 = new vis.Graph2d(document.getElementById('visualization1'), dataset, options, groups);
+  var graph2d2 = new vis.Graph2d(document.getElementById('visualization2'), dataset, options, groups);
+  var graph2d3 = new vis.Graph2d(document.getElementById('visualization3'), dataset, options, groups);
+  var graph2d4 = new vis.Graph2d(document.getElementById('visualization4'), dataset, options, groups);
+  var graph2d5 = new vis.Graph2d(document.getElementById('visualization5'), dataset, options, groups);
+  var graph2d6 = new vis.Graph2d(document.getElementById('visualization6'), dataset, options, groups);
+
+  graph2d1.setOptions({groups:{visibility:{0:true, 1:false, 2:false, 3:false, "__ungrouped__":false}}})
+  graph2d2.setOptions({groups:{visibility:{0:false, 1:true, 2:false, 3:false, "__ungrouped__":false}}})
+  graph2d3.setOptions({groups:{visibility:{0:false, 1:false, 2:true, 3:false, "__ungrouped__":false}}})
+  graph2d4.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:true, "__ungrouped__":false}}})
+  graph2d5.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:false, "__ungrouped__":true}}})
+</script>
+</body>
+</html>

examples/graph2d/index.html

@@ -16,6 +16,11 @@
   <p><a href="07_scrollingAndSorting.html">07_scrollingAndSorting.html</a></p>
   <p><a href="08_performance.html">08_performance.html</a></p>
   <p><a href="09_external_legend.html">09_external_legend.html</a></p>
+  <p><a href="10_barsSideBySide.html">10_barsSideBySide.html</a></p>
+  <p><a href="11_barsSideBySideGroups.html">11_barsSideBySideGroups.html</a></p>
+  <p><a href="12_customRange.html">12_customRange.html</a></p>
+  <p><a href="13_localization.html">13_localization.html</a></p>
+  <p><a href="14_toggleGroups.html">14_toggleGroups.html</a></p>
 
 </div>
 </body>

examples/network/01_basic_usage.html

@@ -4,6 +4,7 @@
   <title>Network | Basic usage</title>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
     #mynetwork {

examples/network/02_random_nodes.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;
@@ -76,17 +77,19 @@
         edges: edges
       };
 
-    var options = {
-    edges: {
-    },
-    stabilize: false
-    };
-    network = new vis.Network(container, data, options);
-
-    // add event listeners
-    network.on('select', function(params) {
-      document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
-    });
+      var options = {
+        edges: {
+        }
+      };
+      network = new vis.Network(container, data, options);
+
+      // add event listeners
+      network.on('select', function(params) {
+        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+      });
+      network.on('stabilized', function (params) {
+          document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
+      });
     }
   </script>
 </head>
@@ -103,5 +106,6 @@
 <div id="mynetwork"></div>
 
 <p id="selection"></p>
+<p id="stabilization"></p>
 </body>
 </html>

examples/network/03_images.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/04_shapes.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/05_social_network.html

@@ -16,6 +16,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var DIR = 'img/soft-scraps-icons/';

examples/network/06_groups.html

@@ -16,6 +16,7 @@
 
   <script type="text/javascript" src="http://www.google.com/jsapi"></script>
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/07_selections.html

@@ -4,6 +4,7 @@
   <title>Network | Selections</title>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
     #mynetwork {

examples/network/08_mobile_friendly.html

@@ -22,6 +22,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/09_sizing.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/10_multiline_text.html

@@ -12,6 +12,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     function draw() {

examples/network/11_custom_style.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/12_scalable_images.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var DIR = 'img/soft-scraps-icons/';

examples/network/13_dashed_lines.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     // Called on page load

examples/network/14_dot_language.html

@@ -3,6 +3,7 @@
   <title>Network | DOT Language</title>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <div id="mynetwork"></div>

examples/network/15_dot_language_playground.html

@@ -4,6 +4,7 @@
   <title>Network | DOT language playground</title>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
     body, html {

examples/network/16_dynamic_data.html

@@ -54,6 +54,7 @@
 
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes, edges, network;

examples/network/17_network_info.html

@@ -18,6 +18,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/18_fully_random_nodes_clustering.html

@@ -1,95 +1,96 @@
 <!doctype html>
 <html>
 <head>
-    <title>Network | Fully random nodes clustering</title>
+  <title>Network | Fully random nodes clustering</title>
 
-    <style type="text/css">
-        body {
-            font: 10pt sans;
-        }
-        #mynetwork {
-            width: 600px;
-            height: 600px;
-            border: 1px solid lightgray;
-        }
-    </style>
+  <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>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
-    <script type="text/javascript">
-        var nodes = null;
-        var edges = null;
-        var network = null;
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
 
-        function draw() {
-            nodes = [];
-            edges = [];
-            // randomly create some nodes and edges
-            var nodeCount = parseInt(document.getElementById('nodeCount').value);
+    function draw() {
+      nodes = [];
+      edges = [];
+      // randomly create some nodes and edges
+      var nodeCount = parseInt(document.getElementById('nodeCount').value);
 
-            for (var i = 0; i < nodeCount; i++) {
-                nodes.push({
-                    id: i,
-                    label: String(i)
-                });
-            }
-            for (var i = 0; i < nodeCount; i++) {
-                var from = i;
-                var to = i;
-                to = i;
-                while (to == i) {
-                    to = Math.floor(Math.random() * (nodeCount));
-                }
-                edges.push({
-                    from: from,
-                    to: to
-                });
-            }
-            // create a network
-            var clusteringOn = document.getElementById('clustering').checked;
-            var container = document.getElementById('mynetwork');
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            var options = {
-                physics: {barnesHut:{springLength:120}}, // this is the correct way to set the length of the springs
-                clustering: {
-                    enabled: clusteringOn
-                },
-                stabilize: false
-            };
-            network = new vis.Network(container, data, options);
-
-            // add event listeners
-            network.on('select', function(params) {
-                document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
-            });
+      for (var i = 0; i < nodeCount; i++) {
+        nodes.push({
+          id: i,
+          label: String(i)
+        });
+      }
+      for (var i = 0; i < nodeCount; i++) {
+        var from = i;
+        var to = i;
+        to = i;
+        while (to == i) {
+          to = Math.floor(Math.random() * (nodeCount));
         }
-    </script>
+        edges.push({
+          from: from,
+          to: to
+        });
+      }
+      // create a network
+      var clusteringOn = document.getElementById('clustering').checked;
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        physics: {barnesHut:{springLength:120}}, // this is the correct way to set the length of the springs
+        clustering: {
+          enabled: clusteringOn
+        },
+        stabilize: false
+      };
+      network = new vis.Network(container, data, options);
+
+      // add event listeners
+      network.on('select', function(params) {
+        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+      });
+    }
+  </script>
 </head>
 
 <body onload="draw();">
 <h2>Clustering - Fully random network</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
-    This example shows a fully randomly generated set of nodes and connected edges.
-    By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
-    a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
-    <br />
-    <br />
-    Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
-    will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
-    <br />
-    <br />
-    Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
+  This example shows a fully randomly generated set of nodes and connected edges.
+  By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
+  a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
+  <br />
+  <br />
+  Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
+  will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
+  <br />
+  <br />
+  Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
 </div>
 <br />
 <form onsubmit="draw(); return false;">
-    <label for="nodeCount">Number of nodes:</label>
-    <input id="nodeCount" type="text" value="50" style="width: 50px;">
-    <label for="clustering">Enable Clustering:</label>
-    <input id="clustering" type="checkbox" onChange="draw()" checked="true">
-    <input type="submit" value="Go">
+  <label for="nodeCount">Number of nodes:</label>
+  <input id="nodeCount" type="text" value="50" style="width: 50px;">
+  <label for="clustering">Enable Clustering:</label>
+  <input id="clustering" type="checkbox" onChange="draw()" checked="true">
+  <input type="submit" value="Go">
 </form>
 <br>
 

examples/network/19_scale_free_graph_clustering.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/22_les_miserables.html

@@ -12,6 +12,7 @@
     </style>
 
     <script type="text/javascript" src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
     <script type="text/javascript">
         function draw() {

examples/network/23_hierarchical_layout.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/24_hierarchical_layout_userdefined.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-  <title>Network | Random nodes</title>
+  <title>Network | Hierarchical Layout, userDefined</title>
 
   <style type="text/css">
     body {
@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;
@@ -27,17 +28,17 @@
       edges = [];
       var connectionCount = [];
 
-      // randomly create some nodes and edges
-      for (var i = 0; i < 15; i++) {
-        nodes.push({
-          id: i,
-          label: String(i)
+        // randomly create some nodes and edges
+        for (var i = 0; i < 15; i++) {
+            nodes.push({
+                id: i,
+                label: String(i)
+            });
+        }
+        edges.push({
+            from: 0,
+            to: 1
         });
-      }
-      edges.push({
-        from: 0,
-        to: 1
-      });
         edges.push({
             from: 0,
             to: 6

examples/network/25_physics_configuration.html

@@ -15,6 +15,7 @@
   </style>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     var nodes = null;

examples/network/26_staticSmoothCurves.html

@@ -4,6 +4,7 @@
   <title>Network | Static smooth curves</title>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
     #mynetwork {

examples/network/29_neighbourhood_highlight.html

@@ -10073,13 +10073,13 @@ function onClick(selectedItems) {
     else {
         var allEdges = edges.get();
 
-        // we clear the level of seperation in all nodes.
+        // we clear the level of separation in all nodes.
         clearLevelOfSeperation(allNodes);
 
         // we will now start to collect all the connected nodes we want to highlight.
         var connectedNodes = selectedItems.nodes;
 
-        // we can store them into levels of seperation and we could then later use this to define a color per level
+        // we can store them into levels of separation and we could then later use this to define a color per level
         // any data can be added to a node, this is just stored in the nodeObject.
         storeLevelOfSeperation(connectedNodes,0, allNodes);
         for (var i = 1; i < degrees + 1; i++) {
@@ -10126,7 +10126,7 @@ function onClick(selectedItems) {
 
 
 /**
- * update the allNodes object with the level of seperation.
+ * update the allNodes object with the level of separation.
  * Arrays are passed by reference, we do not need to return them because we are working in the same object.
  */
 function storeLevelOfSeperation(connectedNodes, level, allNodes) {

examples/network/31_localization.html

@@ -0,0 +1,231 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Localization</title>
+
+  <style type="text/css">
+    body, select {
+      font: 10pt sans;
+    }
+    #mynetwork {
+      position:relative;
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+    table.legend_table {
+      font-size: 11px;
+      border-width:1px;
+      border-color:#d3d3d3;
+      border-style:solid;
+    }
+    table.legend_table,td {
+      border-width:1px;
+      border-color:#d3d3d3;
+      border-style:solid;
+      padding: 2px;
+    }
+    div.table_content {
+      width:80px;
+      text-align:center;
+    }
+    div.table_description {
+      width:100px;
+    }
+
+    #operation {
+      font-size:28px;
+    }
+    #network-popUp {
+      display:none;
+      position:absolute;
+      top:350px;
+      left:170px;
+      z-index:299;
+      width:250px;
+      height:120px;
+      background-color: #f9f9f9;
+      border-style:solid;
+      border-width:3px;
+      border-color: #5394ed;
+      padding:10px;
+      text-align: center;
+    }
+  </style>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link type="text/css" rel="stylesheet" href="../../dist/vis.css">
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+
+    function draw() {
+      nodes = [];
+      edges = [];
+      var connectionCount = [];
+
+      // randomly create some nodes and edges
+      var nodeCount = 25;
+      for (var i = 0; i < nodeCount; i++) {
+        nodes.push({
+          id: i,
+          label: String(i)
+        });
+
+        connectionCount[i] = 0;
+
+        // create edges in a scale-free-network way
+        if (i == 1) {
+          var from = i;
+          var to = 0;
+          edges.push({
+            from: from,
+            to: to
+          });
+          connectionCount[from]++;
+          connectionCount[to]++;
+        }
+        else if (i > 1) {
+          var conn = edges.length * 2;
+          var rand = Math.floor(Math.random() * conn);
+          var cum = 0;
+          var j = 0;
+          while (j < connectionCount.length && cum < rand) {
+            cum += connectionCount[j];
+            j++;
+          }
+
+          var from = i;
+          var to = j;
+          edges.push({
+            from: from,
+            to: to
+          });
+          connectionCount[from]++;
+          connectionCount[to]++;
+        }
+      }
+
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        stabilize: false,
+        dataManipulation: true,
+        onAdd: function(data,callback) {
+          var span = document.getElementById('operation');
+          var idInput = document.getElementById('node-id');
+          var labelInput = document.getElementById('node-label');
+          var saveButton = document.getElementById('saveButton');
+          var cancelButton = document.getElementById('cancelButton');
+          var div = document.getElementById('network-popUp');
+          span.innerHTML = "Add Node";
+          idInput.value = data.id;
+          labelInput.value = data.label;
+          saveButton.onclick = saveData.bind(this,data,callback);
+          cancelButton.onclick = clearPopUp.bind();
+          div.style.display = 'block';
+        },
+        onEdit: function(data,callback) {
+          var span = document.getElementById('operation');
+          var idInput = document.getElementById('node-id');
+          var labelInput = document.getElementById('node-label');
+          var saveButton = document.getElementById('saveButton');
+          var cancelButton = document.getElementById('cancelButton');
+          var div = document.getElementById('network-popUp');
+          span.innerHTML = "Edit Node";
+          idInput.value = data.id;
+          labelInput.value = data.label;
+          saveButton.onclick = saveData.bind(this,data,callback);
+          cancelButton.onclick = clearPopUp.bind();
+          div.style.display = 'block';
+        },
+        onConnect: function(data,callback) {
+          if (data.from == data.to) {
+            var r=confirm("Do you want to connect the node to itself?");
+            if (r==true) {
+              callback(data);
+            }
+          }
+          else {
+            callback(data);
+          }
+        }
+      };
+      network = new vis.Network(container, data, options);
+
+      // add event listeners
+      network.on('select', function(params) {
+        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+      });
+
+      network.on("resize", function(params) {console.log(params.width,params.height)});
+
+      function clearPopUp() {
+        var saveButton = document.getElementById('saveButton');
+        var cancelButton = document.getElementById('cancelButton');
+        saveButton.onclick = null;
+        cancelButton.onclick = null;
+        var div = document.getElementById('network-popUp');
+        div.style.display = 'none';
+      }
+
+      function saveData(data,callback) {
+        var idInput = document.getElementById('node-id');
+        var labelInput = document.getElementById('node-label');
+        var div = document.getElementById('network-popUp');
+        data.id = idInput.value;
+        data.label = labelInput.value;
+        clearPopUp();
+        callback(data);
+
+      }
+
+      // update the locale when changing the select box value
+      var select = document.getElementById('locale');
+      select.onchange = function () {
+        network.setOptions({
+          locale: this.value
+        });
+      };
+      select.onchange();
+    }
+  </script>
+</head>
+
+<body onload="draw();">
+<h2>Editing the dataset (localized)</h2>
+<p style="width: 700px; font-size:14px; text-align: justify;">
+  This is the same example as <a href="21_data_manipulation.html">21_data_manipulation.html</a>, except that there is a select box added which allows to switch locale. The localization is only relevant to the manipulation buttons.
+</p>
+
+<p>
+  <label for="locale">Select a locale:</label>
+  <select id="locale">
+    <option value="en" selected>en</option>
+    <option value="nl">nl</option>
+  </select>
+</p>
+
+<div id="network-popUp">
+  <span id="operation">node</span> <br>
+  <table style="margin:auto;"><tr>
+    <td>id</td><td><input id="node-id" value="new value"></td>
+  </tr>
+    <tr>
+      <td>label</td><td><input id="node-label" value="new value"> </td>
+    </tr></table>
+  <input type="button" value="save" id="saveButton"></button>
+  <input type="button" value="cancel" id="cancelButton"></button>
+</div>
+<br />
+<div id="mynetwork"></div>
+
+<p id="selection"></p>
+</body>
+</html>
+

examples/network/32_hierarchicaLayoutMethods.html

@@ -0,0 +1,140 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Hierarchical layout difference</title>
+
+    <style type="text/css">
+        body {
+            font: 10pt sans;
+        }
+        #mynetwork {
+            width: 800px;
+            height: 500px;
+            border: 1px solid lightgray;
+        }
+    </style>
+
+    <script type="text/javascript" src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+    <script type="text/javascript">
+        var network = null;
+        var layoutMethod = "hubsize";
+
+        function draw() {
+            var nodes = [];
+            var edges = [];
+            // randomly create some nodes and edges
+            for (var i = 0; i < 15; i++) {
+                nodes.push({
+                    id: i,
+                    label: String(i)
+                });
+            }
+            edges.push({
+                from: 0,
+                to: 1
+            });
+            edges.push({
+                from: 0,
+                to: 6
+            });
+            edges.push({
+                from: 0,
+                to: 13
+            });edges.push({
+                from: 0,
+                to: 11
+            });
+            edges.push({
+                from: 1,
+                to: 2
+            });
+            edges.push({
+                from: 2,
+                to: 3
+            });
+            edges.push({
+                from: 2,
+                to: 4
+            });
+            edges.push({
+                from: 3,
+                to: 5
+            });
+            edges.push({
+                from: 1,
+                to: 10
+            });
+            edges.push({
+                from: 1,
+                to: 7
+            });
+            edges.push({
+                from: 2,
+                to: 8
+            });
+            edges.push({
+                from: 2,
+                to: 9
+            });
+            edges.push({
+                from: 3,
+                to: 14
+            });
+            edges.push({
+                from: 1,
+                to: 12
+            });
+
+            // create a network
+            var container = document.getElementById('mynetwork');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+
+            var options = {
+                hierarchicalLayout: {
+                    layout: layoutMethod
+                },
+                edges: {style:"arrow"},
+                smoothCurves:false
+            };
+            network = new vis.Network(container, data, options);
+
+            // add event listeners
+            network.on('select', function(params) {
+                document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+            });
+        }
+
+    </script>
+</head>
+
+<body onload="draw();">
+<h2>Hierarchical Layout - User-defined</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows a the effect of the different hierarchical layout methods. Hubsize is based on the amount of edges connected to a node.
+    The node with the most connections (the largest hub) is drawn at the top of the tree. The direction method is based on the direction of the edges.
+    Try switching between the methods with the dropdown box below.
+</div>
+Layout method:
+<select id="layout">
+    <option value="hubsize">hubsize</option>
+    <option value="direction">direction</option>
+</select><br/>
+<br />
+
+<div id="mynetwork"></div>
+
+<p id="selection"></p>
+<script language="JavaScript">
+    var dropdown = document.getElementById("layout");
+    dropdown.onchange = function() {
+        layoutMethod = dropdown.value;
+        draw();
+    }
+</script>
+</body>
+</html>

examples/network/index.html

@@ -42,6 +42,7 @@
   <p><a href="28_world_cup_network_performance.html">28_world_cup_network_performance.html</a></p>
   <p><a href="29_neighbourhood_highlight.html">29_neighbourhood_highlight.html</a></p>
   <p><a href="30_importing_from_gephi.html">30_importing_from_gephi.html</a></p>
+  <p><a href="31_localization.html">31_localization.html</a></p>
   <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
 
 </div>

examples/timeline/08_edit_items.html

@@ -6,6 +6,7 @@
   <style type="text/css">
     body, html {
       font-family: sans-serif;
+      font-size: 12pt;
     }
   </style>
 
@@ -13,79 +14,93 @@
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
-  <div id="visualization"></div>
-  <p></p>
-  <div id="log"></div>
+<p style="max-width: 800px;">
+  This example shows how to use callback functions <code>onAdd</code>, <code>onMove</code>, <code>onMoving</code>, <code>onUpdate</code>, and <code>onRemove</code>. The <code>onMoving</code> function updates an item while dragging, and can be used to prevent the item from being drawn at disallowed or infeasible timeslots. In this example, the items cannot be moved outside of the month April 2013. The other callback functions are called after an add, move, update, or remove action has taken place, and can be used to cancel these actions.
+</p>
 
-  <script type="text/javascript">
-    // note that months are zero-based in the JavaScript Date object, so month 3 is April
-    var items = new vis.DataSet([
-      {id: 1, content: 'item 1', start: new Date(2013, 3, 20)},
-      {id: 2, content: 'item 2', start: new Date(2013, 3, 14)},
-      {id: 3, content: 'item 3', start: new Date(2013, 3, 18)},
-      {id: 4, content: 'item 4', start: new Date(2013, 3, 16), end: new Date(2013, 3, 19)},
-      {id: 5, content: 'item 5', start: new Date(2013, 3, 25)},
-      {id: 6, content: 'item 6', start: new Date(2013, 3, 27)}
-    ]);
+<div id="visualization"></div>
+<p></p>
+<div id="log"></div>
 
-    var container = document.getElementById('visualization');
-    var options = {
-      editable: true,
+<script type="text/javascript">
+  // note that months are zero-based in the JavaScript Date object, so month 3 is April
+  var items = new vis.DataSet([
+    {id: 1, content: 'item 1', start: new Date(2013, 3, 20)},
+    {id: 2, content: 'item 2', start: new Date(2013, 3, 14)},
+    {id: 3, content: 'item 3', start: new Date(2013, 3, 18)},
+    {id: 4, content: 'item 4', start: new Date(2013, 3, 16), end: new Date(2013, 3, 19)},
+    {id: 5, content: 'item 5', start: new Date(2013, 3, 25)},
+    {id: 6, content: 'item 6', start: new Date(2013, 3, 27)}
+  ]);
 
-      onAdd: function (item, callback) {
-        item.content = prompt('Enter text content for new item:', item.content);
-        if (item.content != null) {
-          callback(item); // send back adjusted new item
-        }
-        else {
-          callback(null); // cancel item creation
-        }
-      },
+  var min = new Date(2013, 3, 1); // 1 april
+  var max = new Date(2013, 3, 30, 23, 59, 59); // 30 april
 
-      onMove: function (item, callback) {
-        if (confirm('Do you really want to move the item to\n' +
-            'start: ' + item.start + '\n' +
-            'end: ' + item.end + '?')) {
-          callback(item); // send back item as confirmation (can be changed
-        }
-        else {
-          callback(null); // cancel editing item
-        }
-      },
+  var container = document.getElementById('visualization');
+  var options = {
+    editable: true,
 
-      onUpdate: function (item, callback) {
-        item.content = prompt('Edit items text:', item.content);
-        if (item.content != null) {
-          callback(item); // send back adjusted item
-        }
-        else {
-          callback(null); // cancel updating the item
-        }
-      },
+    onAdd: function (item, callback) {
+      item.content = prompt('Enter text content for new item:', item.content);
+      if (item.content != null) {
+        callback(item); // send back adjusted new item
+      }
+      else {
+        callback(null); // cancel item creation
+      }
+    },
 
-      onRemove: function (item, callback) {
-        if (confirm('Remove item ' + item.content + '?')) {
-          callback(item); // confirm deletion
-        }
-        else {
-          callback(null); // cancel deletion
-        }
+    onMove: function (item, callback) {
+      if (confirm('Do you really want to move the item to\n' +
+          'start: ' + item.start + '\n' +
+          'end: ' + item.end + '?')) {
+        callback(item); // send back item as confirmation (can be changed)
+      }
+      else {
+        callback(null); // cancel editing item
       }
-    };
-    var timeline = new vis.Timeline(container, items, options);
+    },
 
-    items.on('*', function (event, properties) {
-      logEvent(event, properties);
-    });
+    onMoving: function (item, callback) {
+      if (item.start < min) item.start = min;
+      if (item.start > max) item.start = max;
 
-    function logEvent(event, properties) {
-      var log = document.getElementById('log');
-      var msg = document.createElement('div');
-      msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
-          'properties=' + JSON.stringify(properties);
-      log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
+      callback(item); // send back the (possibly) changed item
+    },
+
+    onUpdate: function (item, callback) {
+      item.content = prompt('Edit items text:', item.content);
+      if (item.content != null) {
+        callback(item); // send back adjusted item
+      }
+      else {
+        callback(null); // cancel updating the item
+      }
+    },
+
+    onRemove: function (item, callback) {
+      if (confirm('Remove item ' + item.content + '?')) {
+        callback(item); // confirm deletion
+      }
+      else {
+        callback(null); // cancel deletion
+      }
     }
+  };
+  var timeline = new vis.Timeline(container, items, options);
+
+  items.on('*', function (event, properties) {
+    logEvent(event, properties);
+  });
+
+  function logEvent(event, properties) {
+    var log = document.getElementById('log');
+    var msg = document.createElement('div');
+    msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
+        'properties=' + JSON.stringify(properties);
+    log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
+  }
 
-  </script>
+</script>
 </body>
 </html>

examples/timeline/19_localization.html

@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Localization</title>
+
+  <style type="text/css">
+    body, html, select {
+      font-family: sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+
+  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<p>
+  To localize the Timeline, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.
+</p>
+
+<p>
+  <label for="locale">Select a locale:</label>
+  <select id="locale">
+    <option value="en" selected>en</option>
+    <option value="nl">nl</option>
+  </select>
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  var DAY = 24 * 60 * 60 * 1000;
+
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('visualization');
+
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+    {id: 1, content: 'item 1', start: new Date(new Date().valueOf() - DAY)},
+    {id: 2, content: 'item 2', start: new Date(new Date().valueOf() + 2 * DAY)}
+  ]);
+
+  // Configuration for the Timeline
+  var options = {
+    showCurrentTime: true,
+    showCustomTime: true
+  };
+
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+
+  timeline.setCustomTime(new Date(new Date().valueOf() + DAY));
+
+  // update the locale when changing the select box value
+  var select = document.getElementById('locale');
+  select.onchange = function () {
+    timeline.setOptions({
+      locale: this.value
+    });
+  };
+  select.onchange();
+</script>
+</body>
+</html>

examples/timeline/20_click_to_use.html

@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Click to use</title>
+
+  <style>
+    body, html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+    #main {
+      width: 728px;
+      margin: 0 auto;
+    }
+    .container {
+      margin: 10px;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<div id="main">
+  <h1>Timeline click to use</h1>
+  <p>
+    This example demonstrates how to use the <code>clickToUse</code> option: before you can scroll and drag in the timeline, you first have to click in the timeline to activate.
+  </p>
+</div>
+
+<script>
+  // create a dataset with items
+  // we specify the type of the fields `start` and `end` here to be strings
+  // containing an ISO date. The fields will be outputted as ISO dates
+  // automatically getting data from the DataSet via items.get().
+  var items = new vis.DataSet({
+    type: { start: 'ISODate', end: 'ISODate' }
+  });
+
+  // add items to the DataSet
+  items.add([
+    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
+    {id: 2, content: 'item 2', start: '2014-01-18'},
+    {id: 3, content: 'item 3', start: '2014-01-21'},
+    {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
+    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
+    {id: 6, content: 'item 6', start: '2014-01-26'}
+  ]);
+
+  function createTimeline(main) {
+    var main = document.getElementById('main');
+    var container = document.createElement('div');
+    container.className = 'container';
+    main.appendChild(container);
+
+    var options = {
+      editable: true,
+      clickToUse: true
+    };
+
+    return new vis.Timeline(container, items, options);
+  }
+
+  var timelines = [];
+  for (var i = 0; i < 10; i++) {
+    timelines.push(createTimeline());
+  }
+
+
+</script>
+</body>
+</html>

examples/timeline/21_set_selection.html

@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Select items</title>
+
+  <style>
+    body, html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h1>Set selection</h1>
+<p style="max-width: 600px;">
+  Enter one or multiple ids of items, then press select to select the items. This demo uses the function <code>Timeline.setSelection(ids)</code>. Optionally, the window can be moved to the selected items.
+</p>
+
+<p>
+  Select item(s): <input type="text" id="selection" value="5, 6"><input type="button" id="select" value="Select"><br>
+  <label><input type="checkbox" id="focus" checked> Focus on selection</label>
+</p>
+<div id="visualization"></div>
+
+<script>
+  // create a dataset with items
+  // we specify the type of the fields `start` and `end` here to be strings
+  // containing an ISO date. The fields will be outputted as ISO dates
+  // automatically getting data from the DataSet via items.get().
+  var items = new vis.DataSet({
+    type: { start: 'ISODate', end: 'ISODate' }
+  });
+
+  // add items to the DataSet
+  items.add([
+    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
+    {id: 2, content: 'item 2', start: '2014-01-18'},
+    {id: 3, content: 'item 3', start: '2014-01-21'},
+    {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
+    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
+    {id: 6, content: 'item 6', start: '2014-01-26'}
+  ]);
+
+  var container = document.getElementById('visualization');
+  var options = {
+    editable: true
+  };
+
+  var timeline = new vis.Timeline(container, items, options);
+
+  var selection = document.getElementById('selection');
+  var select = document.getElementById('select');
+  var focus = document.getElementById('focus');
+  select.onclick = function () {
+    var ids = selection.value.split(',').map(function (value) {
+      return value.trim();
+    });
+    timeline.setSelection(ids, {focus: focus.checked});
+  };
+</script>
+</body>
+</html>

examples/timeline/22_window_adjustment.html

@@ -0,0 +1,94 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Adjusting window</title>
+
+  <style>
+    body, html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+<p>This example demonstrates functions to adjust the visible window of the Timeline.</p>
+
+<input type="button" id="window1" value="Set window from 2014-01-01 to 2014-04-01"><br>
+<input type="button" id="window2" value="Set window from 2014-01-01 to 2014-04-01 without animation"><br>
+<input type="button" id="fit" value="Fit all items"><br>
+<input type="button" id="select" value="Select & focus items 5 and 6"><br>
+<input type="button" id="focus1" value="Focus item 2"><br>
+<input type="button" id="focus2" value="Focus items 5 and 6 (slow animation)"><br>
+<input type="button" id="focus3" value="Focus current selection"><br>
+<input type="button" id="moveTo" value="Move to 2014-02-01"><br>
+
+<div id="visualization"></div>
+
+<script>
+  // create a dataset with items
+  // we specify the type of the fields `start` and `end` here to be strings
+  // containing an ISO date. The fields will be outputted as ISO dates
+  // automatically getting data from the DataSet via items.get().
+  var items = new vis.DataSet({
+    type: { start: 'ISODate', end: 'ISODate' }
+  });
+
+  // add items to the DataSet
+  items.add([
+    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
+    {id: 2, content: 'item 2', start: '2014-01-18'},
+    {id: 3, content: 'item 3', start: '2014-01-21'},
+    {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
+    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
+    {id: 6, content: 'item 6', start: '2014-01-26'}
+  ]);
+
+  var container = document.getElementById('visualization');
+  var options = {
+    start: '2014-01-10',
+    end: '2014-02-10',
+    editable: true,
+    showCurrentTime: true
+  };
+
+  var timeline = new vis.Timeline(container, items, options);
+
+  document.getElementById('window1').onclick = function() {
+    timeline.setWindow('2014-01-01', '2014-04-01');
+  };
+  document.getElementById('window2').onclick = function() {
+    timeline.setWindow('2014-01-01', '2014-04-01', {
+      animate: false
+    });
+  };
+  document.getElementById('fit').onclick = function() {
+    timeline.fit();
+  };
+  document.getElementById('select').onclick = function() {
+    timeline.setSelection([5, 6], {
+      focus: true
+    });
+  };
+  document.getElementById('focus1').onclick = function() {
+    timeline.focus(2);
+  };
+  document.getElementById('focus2').onclick = function() {
+    timeline.focus([5, 6], {
+      animate: 3000 // ms
+    });
+  };
+  document.getElementById('focus3').onclick = function() {
+    var selection = timeline.getSelection();
+    timeline.focus(selection);
+  };
+  document.getElementById('moveTo').onclick = function() {
+    timeline.moveTo('2014-02-01');
+  };
+
+</script>
+</body>
+</html>

examples/timeline/index.html

@@ -30,6 +30,10 @@
   <p><a href="16_navigation_menu.html">16_navigation_menu.html</a></p>
   <p><a href="17_data_serialization.html">17_data_serialization.html</a></p>
   <p><a href="18_range_overflow.html">18_range_overflow.html</a></p>
+  <p><a href="19_localization.html">19_localization.html</a></p>
+  <p><a href="20_click_to_use.html">20_click_to_use.html</a></p>
+  <p><a href="21_set_selection.html">21_set_selection.html</a></p>
+  <p><a href="22_window_adjustment.html">22_window_adjustment.html</a></p>
 
   <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>
 

index.html

@@ -74,7 +74,7 @@ bower install vis
 <h3>download</h3>
 
 <a href="download/vis.zip">Click here to download vis.js</a>
-(version <span class="version">3.2.0</span>)
+(version <span class="version">3.3.0</span>)
 
 
 <h2 id="example">Example</h2>