released version 2.0.0

.gitignore

@@ -1 +1,3 @@
 .idea
+node_modules
+.settings

dist/vis.css

@@ -2,34 +2,76 @@
 }
 
 
-.vis.timeline.rootpanel {
+.vis.timeline.root {
   position: relative;
+  border: 1px solid #bfbfbf;
+
   overflow: hidden;
+  padding: 0;
+  margin: 0;
 
-  border: 1px solid #bfbfbf;
   box-sizing: border-box;
-
-  /* FIXME: there is an issue with the height of the items when panel height is animated
-  -webkit-transition: height 4s ease-in-out;
-  transition:         height 4s ease-in-out;
-  /**/
 }
 
-.vis.timeline .vpanel {
+.vis.timeline .vispanel {
   position: absolute;
-  overflow: hidden;
+
+  padding: 0;
+  margin: 0;
 
   box-sizing: border-box;
 }
 
-.vis.timeline .vpanel.side {
-  border-right: 1px solid #bfbfbf;
+.vis.timeline .vispanel.center,
+.vis.timeline .vispanel.left,
+.vis.timeline .vispanel.right,
+.vis.timeline .vispanel.top,
+.vis.timeline .vispanel.bottom {
+  border: 1px #bfbfbf;
+}
+
+.vis.timeline .vispanel.center,
+.vis.timeline .vispanel.left,
+.vis.timeline .vispanel.right {
+  border-top-style: solid;
+  border-bottom-style: solid;
+  overflow: hidden;
+}
+
+.vis.timeline .vispanel.center,
+.vis.timeline .vispanel.top,
+.vis.timeline .vispanel.bottom {
+  border-left-style: solid;
+  border-right-style: solid;
+}
+
+.vis.timeline .background {
+  overflow: hidden;
+}
+
+.vis.timeline .vispanel > .content {
+  position: relative;
+}
+
+.vis.timeline .vispanel .shadow {
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.8);
+  /* TODO: find a nice way to ensure shadows are drawn on top of items
+  z-index: 1;
+  */
 }
 
-.vis.timeline .vpanel.side.hidden {
-  display: none;
+.vis.timeline .vispanel .shadow.top {
+  top: -1px;
+  left: 0;
 }
 
+.vis.timeline .vispanel .shadow.bottom {
+  bottom: -1px;
+  left: 0;
+}
 
 .vis.timeline .labelset {
   position: relative;
@@ -50,14 +92,12 @@
   box-sizing: border-box;
 }
 
-.vis.timeline.top .labelset .vlabel {
-  border-top: 1px solid #bfbfbf;
-  border-bottom: none;
+.vis.timeline .labelset .vlabel {
+  border-bottom: 1px solid #bfbfbf;
 }
 
-.vis.timeline.bottom .labelset .vlabel {
-  border-top: none;
-  border-bottom: 1px solid #bfbfbf;
+.vis.timeline .labelset .vlabel:last-child {
+  border-bottom: none;
 }
 
 .vis.timeline .labelset .vlabel .inner {
@@ -65,6 +105,10 @@
   padding: 5px;
 }
 
+.vis.timeline .labelset .vlabel .inner.hidden {
+  padding: 0;
+}
+
 
 .vis.timeline .itemset {
   position: relative;
@@ -72,38 +116,33 @@
   margin: 0;
 
   box-sizing: border-box;
-
-  /* FIXME: get transition working for rootpanel and itemset
-  -webkit-transition: height 4s ease-in-out;
-  transition:         height 4s ease-in-out;
-  /**/
 }
 
-.vis.timeline .background {
-}
-
-.vis.timeline .foreground {
+.vis.timeline .itemset .background,
+.vis.timeline .itemset .foreground {
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }
 
 .vis.timeline .axis {
-  overflow: visible;
+  position: absolute;
+  width: 100%;
+  height: 0;
+  left: 1px;
+  z-index: 1;
 }
 
-.vis.timeline  .group {
+.vis.timeline  .foreground .group {
   position: relative;
   box-sizing: border-box;
+  border-bottom: 1px solid #bfbfbf;
 }
 
-.vis.timeline.top .group {
-  border-top: 1px solid #bfbfbf;
+.vis.timeline  .foreground .group:last-child {
   border-bottom: none;
 }
 
-.vis.timeline.bottom .group {
-  border-top: none;
-  border-bottom: 1px solid #bfbfbf;
-}
-
 
 .vis.timeline .item {
   position: absolute;
@@ -113,11 +152,6 @@
   background-color: #D5DDF6;
   display: inline-block;
   padding: 5px;
-
-  /* TODO: enable css transitions
-  -webkit-transition: top .4s ease-in-out, bottom .4s ease-in-out;
-  transition:         top .4s ease-in-out, bottom .4s ease-in-out;
-  /**/
 }
 
 .vis.timeline .item.selected {
@@ -126,7 +160,7 @@
   z-index: 999;
 }
 
-.vis.timeline.editable .item.selected {
+.vis.timeline .editable .item.selected {
   cursor: move;
 }
 
@@ -176,11 +210,6 @@
   width: 0;
   border-left-width: 1px;
   border-left-style: solid;
-
-  /* TODO: enable css transitions
-  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
-  transition:         height .4s ease-in-out, top .4s ease-in-out;
-  /**/
 }
 
 .vis.timeline .item .content {
@@ -223,7 +252,22 @@
 }
 
 .vis.timeline .timeaxis {
+  position: relative;
+  overflow: hidden;
+}
+
+.vis.timeline .timeaxis.foreground {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.vis.timeline .timeaxis.background {
   position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .vis.timeline .timeaxis .text {
@@ -248,14 +292,6 @@
   border-right: 1px solid;
 }
 
-.vis.timeline .timeaxis .grid.horizontal {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 0;
-  border-bottom: 1px solid;
-}
-
 .vis.timeline .timeaxis .grid.minor {
   border-color: #e5e5e5;
 }
@@ -267,14 +303,47 @@
 .vis.timeline .currenttime {
   background-color: #FF7F6E;
   width: 2px;
-  z-index: 9;
+  z-index: 1;
 }
 .vis.timeline .customtime {
   background-color: #6E94FF;
   width: 2px;
   cursor: move;
-  z-index: 9;
+  z-index: 1;
+}
+.vis.timeline.root {
+  /*
+  -webkit-transition: height .4s ease-in-out;
+  transition:         height .4s ease-in-out;
+  */
+}
+
+.vis.timeline .vispanel {
+  /*
+  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
+  transition:         height .4s ease-in-out, top .4s ease-in-out;
+  */
+}
+
+.vis.timeline .axis {
+  /*
+  -webkit-transition: top .4s ease-in-out;
+  transition:         top .4s ease-in-out;
+  */
+}
+
+/* TODO: get animation working nicely
+
+.vis.timeline .item {
+  -webkit-transition: top .4s ease-in-out;
+  transition:         top .4s ease-in-out;
+}
+
+.vis.timeline .item.line {
+  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
+  transition:         height .4s ease-in-out, top .4s ease-in-out;
 }
+/**/
 div.graph-manipulationDiv {
     border-width:0px;
     border-bottom: 1px;

docs/dataset.html

@@ -91,7 +91,7 @@ console.log('filtered items', items);
 // retrieve formatted items
 var items = data.get({
   fields: ['id', 'date'],
-  convert: {
+  type: {
     date: 'ISODate'
   }
 });
@@ -149,7 +149,7 @@ var data = new vis.DataSet([data] [, options])
     </td>
   </tr>
   <tr>
-    <td>convert</td>
+    <td>type</td>
     <td>Object.&lt;String,&nbsp;String&gt;</td>
     <td>none</td>
     <td>
@@ -227,7 +227,7 @@ var data = new vis.DataSet([data] [, options])
     <td>Number[]</td>
     <td>
       Get ids of all items or of a filtered set of items.
-      Available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>convert</code> are not applicable in case of <code>getIds</code>.
+      Available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>type</code> are not applicable in case of <code>getIds</code>.
     </td>
   </tr>
 
@@ -649,7 +649,7 @@ DataSet.map(callback [, options]);
   </tr>
 
   <tr>
-    <td>convert</td>
+    <td>type</td>
     <td>Object.&lt;String,&nbsp;String&gt;</td>
     <td>
       An object containing field names as key, and data types as value.
@@ -700,7 +700,7 @@ data.add([
 // retrieve formatted items
 var items = data.get({
   fields: ['id', 'date', 'group'],    // output the specified fields only
-  convert: {
+  type: {
     date: 'Date',                   // convert the date fields to Date objects
     group: 'String'                 // convert the group fields to Strings
   }

docs/graph.html

@@ -1593,6 +1593,16 @@ var options: {
                             // all fields normally accepted by a node can be used.
         callback(newData);  // call the callback with the new data to edit the node.
     }
+    onEditEdge: function(data,callback) {
+        /** data = {id: edgeID,
+        *           from: nodeId1,
+        *           to: nodeId2,
+        *          };
+        */
+        var newData = {..}; // alter the data as you want, except for the ID.
+                            // all fields normally accepted by an edge can be used.
+        callback(newData);  // call the callback with the new data to edit the edge.
+    }
     onConnect: function(data,callback) {
         // data = {from: nodeId1, to: nodeId2};
         var newData = {..};      // check or alter data as you see fit.
@@ -1951,10 +1961,12 @@ var options: {
       link:"Add Link",
       del:"Delete selected",
       editNode:"Edit Node",
+      editEdge:"Edit Edge",
       back:"Back",
       addDescription:"Click in an empty space to place a new node.",
       linkDescription:"Click on a node and drag the edge to another
                        node to connect them.",
+      editEdgeDescription:"Click on either one of the control points and drag them to another node to connect to it.".
       addError:"The function for add does not support two arguments
                                                         (data,callback).",
       linkError:"The function for connect does not support two arguments

docs/index.html

@@ -34,6 +34,13 @@
     Vis.js contains of the following components:
   </p>
 
+  <div style="text-align: center; float: right; padding-left: 30px;">
+    <a href="img/vis_overview.png" target="_blank">
+      <img src="img/vis_overview.png" style="width: 350px; "/><br>
+      (click for a larger view)
+    </a>
+  </div>
+
   <ul>
     <li>
       <a href="dataset.html"><b>DataSet</b></a>.
@@ -59,14 +66,6 @@
     </li>
   </ul>
 
-  <div style="text-align: center;">
-    <a href="img/vis_overview.png" target="_blank">
-      <img src="img/vis_overview.png" style="width: 250px; "/><br>
-      (click for a larger view)
-    </a>
-  </div>
-
-
   <h2 id="Install">Install</h2>
 
   <h3>npm</h3>
@@ -163,16 +162,23 @@ var timeline = new vis.Timeline(container, data, options);
 &lt;div id="visualization"&gt;&lt;/div&gt;
 
 &lt;script type="text/javascript"&gt;
+  // DOM element where the Timeline will be attached
   var container = document.getElementById('visualization');
-  var data = [
+
+  // Create a DataSet (allows two way data-binding)
+  var data = new vis.DataSet([
     {id: 1, content: 'item 1', start: '2013-04-20'},
     {id: 2, content: 'item 2', start: '2013-04-14'},
     {id: 3, content: 'item 3', start: '2013-04-18'},
     {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
     {id: 5, content: 'item 5', start: '2013-04-25'},
     {id: 6, content: 'item 6', start: '2013-04-27'}
-  ];
+  ]);
+
+    // Configuration for the Timeline
   var options = {};
+
+  // Create a Timeline
   var timeline = new vis.Timeline(container, data, options);
 &lt;/script&gt;
 &lt;/body&gt;

docs/timeline.html

@@ -68,16 +68,23 @@
 <div id="visualization"></div>
 
 <script type="text/javascript">
+  // DOM element where the Timeline will be attached
   var container = document.getElementById('visualization');
-  var items = [
+
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
     {id: 1, content: 'item 1', start: '2013-04-20'},
     {id: 2, content: 'item 2', start: '2013-04-14'},
     {id: 3, content: 'item 3', start: '2013-04-18'},
     {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
     {id: 5, content: 'item 5', start: '2013-04-25'},
     {id: 6, content: 'item 6', start: '2013-04-27'}
-  ];
+  ]);
+
+  // Configuration for the Timeline
   var options = {};
+
+  // Create a Timeline
   var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
@@ -458,6 +465,16 @@ var options = {
     <td>Specifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
 </tr>
 
+<tr>
+    <td>moveable</td>
+    <td>Boolean</td>
+    <td>true</td>
+    <td>
+      Specifies whether the Timeline can be moved and zoomed by dragging the window.
+      See also option <code>zoomable</code>.
+    </td>
+</tr>
+
 <tr>
   <td>onAdd</td>
   <td>Function</td>
@@ -533,7 +550,7 @@ var options = {
 <tr>
   <td>showCurrentTime</td>
   <td>boolean</td>
-  <td>false</td>
+  <td>true</td>
   <td>Show a vertical bar at the current time.</td>
 </tr>
 
@@ -599,6 +616,16 @@ var options = {
   <td>The width of the timeline in pixels or as a percentage.</td>
 </tr>
 
+<tr>
+  <td>zoomable</td>
+  <td>Boolean</td>
+  <td>true</td>
+  <td>
+    Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
+    Only applicable when option <code>moveable</code> is set <code>true</code>.
+  </td>
+</tr>
+
 <tr>
   <td>zoomMax</td>
   <td>Number</td>
@@ -646,6 +673,13 @@ timeline.clear({options: true}); // clear options only
     </td>
   </tr>
 
+  <tr>
+    <td>destroy()</td>
+    <td>none</td>
+    <td>Destroy the Timeline. The timeline is removed from memory. all DOM elements and event listeners are cleaned up.
+    </td>
+  </tr>
+
   <tr>
     <td>fit()</td>
     <td>none</td>
@@ -895,7 +929,7 @@ var options = {
 </p>
 <ul>
   <li><code>item</code>: the item being manipulated</li>
-  <li><code>callback</code>: a callback function which must be invoked to report back. The callback must be invoked as <code>callback(item | null)</code>. Here, <code>item</code> can contain changes to the passed item. When invoked as <code>callback(null)</code>, the action will be cancelled.</li>
+  <li><code>callback</code>: a callback function which must be invoked to report back. The callback must be invoked as <code>callback(item | null)</code>. Here, <code>item</code> can contain changes to the passed item. Parameter `item` typically contains fields `content`, `start`, and optionally `end`. The type of `start` and `end` is determined by the DataSet type configuration and is `Date` by default.  When invoked as <code>callback(null)</code>, the action will be cancelled.</li>
 </ul>
 
 <p>

examples/timeline/01_basic.html

@@ -16,16 +16,23 @@
 <div id="visualization"></div>
 
 <script type="text/javascript">
+  // DOM element where the Timeline will be attached
   var container = document.getElementById('visualization');
-  var items = [
+
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
     {id: 1, content: 'item 1', start: '2014-04-20'},
     {id: 2, content: 'item 2', start: '2014-04-14'},
     {id: 3, content: 'item 3', start: '2014-04-18'},
     {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
     {id: 5, content: 'item 5', start: '2014-04-25'},
     {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
-  ];
+  ]);
+
+  // Configuration for the Timeline
   var options = {};
+
+  // Create a Timeline
   var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>

examples/timeline/02_interactive.html

@@ -21,12 +21,14 @@
 
 <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({
-    convert: {
-      start: 'Date',
-      end: 'Date'
-    }
+    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'},

examples/timeline/03_a_lot_of_data.html

@@ -31,10 +31,7 @@
   // create a dataset with items
   var now = moment().minutes(0).seconds(0).milliseconds(0);
   var items = new vis.DataSet({
-    convert: {
-      start: 'Date',
-      end: 'Date'
-    }
+    type: {start: 'ISODate', end: 'ISODate' }
   });
 
   // create data

examples/timeline/04_html_data.html

@@ -58,7 +58,7 @@
 
   // create data and a Timeline
   var container = document.getElementById('visualization');
-  var items = [
+  var items = new vis.DataSet([
     {id: 1, content: item1, start: '2013-04-20'},
     {id: 2, content: item2, start: '2013-04-14'},
     {id: 3, content: item3, start: '2013-04-18'},
@@ -66,7 +66,7 @@
     {id: 5, content: item5, start: '2013-04-25'},
     {id: 6, content: item6, start: '2013-04-27'},
     {id: 7, content: item7, start: '2013-04-21'}
-  ];
+  ]);
   var options = {};
   var timeline = new vis.Timeline(container, items, options);
 </script>

examples/timeline/06_event_listeners.html

@@ -18,13 +18,7 @@
   <div id="log"></div>
 
   <script type="text/javascript">
-    var items = new vis.DataSet({
-      convert: {
-        start: 'Date',
-        end: 'Date'
-      }
-    });
-    items.add([
+    var items = new vis.DataSet([
       {id: 1, content: 'item 1', start: '2013-04-20'},
       {id: 2, content: 'item 2', start: '2013-04-14'},
       {id: 3, content: 'item 3', start: '2013-04-18'},

examples/timeline/07_custom_time_bar.html

@@ -34,7 +34,7 @@
 
 <script type="text/javascript">
   var container = document.getElementById('visualization');
-  var items = [];
+  var items = new vis.DataSet();
   var options = {
     showCurrentTime: true,
     showCustomTime: true,

examples/timeline/10_limit_move_and_zoom.html

@@ -28,10 +28,10 @@
 <script>
   // create some items
   // note that months are zero-based in the JavaScript Date object, so month 4 is May
-  var items = [
+  var items = new vis.DataSet([
     {'start': new Date(2012, 4, 25), 'content': 'First'},
     {'start': new Date(2012, 4, 26), 'content': 'Last'}
-  ];
+  ]);
 
   // create visualization
   var container = document.getElementById('visualization');

examples/timeline/11_points.html

@@ -23,7 +23,7 @@
   var container = document.getElementById('visualization');
 
   // note that months are zero-based in the JavaScript Date object
-  var items = [
+  var items = new vis.DataSet([
     {start: new Date(1939,8,1),  content: 'German Invasion of Poland'},
     {start: new Date(1940,4,10), content: 'Battle of France and the Low Countries'},
     {start: new Date(1940,7,13), content: 'Battle of Britain - RAF vs. Luftwaffe'},
@@ -44,7 +44,7 @@
     {start: new Date(1944,1,19), content: 'American Landings on Iwo Jima'},
     {start: new Date(1945,3,1),  content: 'US Invasion of Okinawa'},
     {start: new Date(1945,3,16), content: 'Battle of Berlin - End of the Third Reich'}
-  ];
+  ]);
 
   var options = {
     // Set global item type. Type can also be specified for items individually

examples/timeline/12_custom_styling.html

@@ -7,7 +7,7 @@
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
-    .vis.timeline.rootpanel {
+    .vis.timeline.root {
       border: 2px solid purple;
       font-family:  purisa, 'comic sans', cursive;
       font-size: 12pt;
@@ -67,7 +67,7 @@
   var container = document.getElementById('visualization');
 
   // note that months are zero-based in the JavaScript Date object
-  var items = [
+  var items = new vis.DataSet([
     {start: new Date(2010,7,23), content: '<div>Conversation</div><img src="img/community-users-icon.png" style="width:32px; height:32px;">'},
     {start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="img/mail-icon.png" style="width:32px; height:32px;">'},
     {start: new Date(2010,7,24,16,0,0), content: 'Report'},
@@ -76,7 +76,7 @@
     {start: new Date(2010,7,29), content: '<div>Phone call</div><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'},
     {start: new Date(2010,7,31), end: new Date(2010,8,3), content: 'Traject B'},
     {start: new Date(2010,8,4,12,0,0), content: '<div>Report</div><img src="img/attachment-icon.png" style="width:32px; height:32px;">'}
-  ];
+  ]);
 
   var options = {
     editable: true,

examples/timeline/15_item_class_names.html

@@ -74,7 +74,7 @@
 <script type="text/javascript">
   // create data
   // note that months are zero-based in the JavaScript Date object
-  var data = [
+  var data = new vis.DataSet([
     {
       'start': new Date(2012,7,19),
       'content': 'default'
@@ -100,7 +100,7 @@
       'content': 'magenta',
       'className': 'magenta'
     }
-  ];
+  ]);
 
   // specify options
   var options = {

examples/timeline/16_navigation_menu.html

@@ -38,14 +38,14 @@
 <script type="text/javascript">
     // create a timeline with some data
     var container = document.getElementById('visualization');
-    var items = [
+    var items = new vis.DataSet([
         {id: 1, content: 'item 1', start: '2014-04-20'},
         {id: 2, content: 'item 2', start: '2014-04-14'},
         {id: 3, content: 'item 3', start: '2014-04-18'},
         {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
         {id: 5, content: 'item 5', start: '2014-04-25'},
         {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
-    ];
+    ]);
     var options = {};
     var timeline = new vis.Timeline(container, items, options);
 

examples/timeline/17_data_serialization.html

@@ -0,0 +1,120 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Data serialization</title>
+
+  <style>
+    body, html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+
+    textarea {
+      width: 800px;
+      height: 200px;
+    }
+
+    .buttons {
+      margin: 20px 0;
+    }
+
+    .buttons input {
+      padding: 10px;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+<h1>Serialization and deserialization</h1>
+
+<p>This example shows how to serialize and deserialize JSON data, and load this in the Timeline via a DataSet. Serialization and deserialization is needed when loading or saving data from a server.</p>
+
+<textarea id="data">
+[
+  {"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"}
+]
+</textarea>
+
+<div class="buttons">
+  <input type="button" id="load" value="&darr; Load" title="Load data from textarea into the Timeline">
+  <input type="button" id="save" value="&uarr; Save" title="Save data from the Timeline into the textarea">
+</div>
+
+<div id="visualization"></div>
+
+<script>
+  var txtData = document.getElementById('data');
+  var btnLoad = document.getElementById('load');
+  var btnSave = document.getElementById('save');
+
+  // Create an empty DataSet.
+  // This DataSet is used for two way data binding with the Timeline.
+  var items = new vis.DataSet();
+
+  // create a timeline
+  var container = document.getElementById('visualization');
+  var options = {
+    editable: true
+  };
+  var timeline = new vis.Timeline(container, items, options);
+
+  function loadData () {
+    // get and deserialize the data
+    var data = JSON.parse(txtData.value);
+
+    // update the data in the DataSet
+    //
+    // Note: when retrieving updated data from a server instead of a complete
+    // new set of data, one can simply update the existing data like:
+    //
+    //   items.update(data);
+    //
+    // Existing items will then be updated, and new items will be added.
+    items.clear();
+    items.add(data);
+
+    // adjust the timeline window such that we see the loaded data
+    timeline.fit();
+  }
+  btnLoad.onclick = loadData;
+
+  function saveData() {
+    // get the data from the DataSet
+    // Note that we specify the output type of the fields start and end
+    // as ISODate, which is safely serializable. Other serializable types
+    // are Number (unix timestamp) or ASPDate.
+    //
+    // Alternatively, it is possible to configure the DataSet to convert
+    // the output automatically to ISODates like:
+    //
+    //   var options = {
+    //     type: {start: 'ISODate', end: 'ISODate'}
+    //   };
+    //   var items = new vis.DataSet(options);
+    //   // now items.get() will automatically convert start and end to ISO dates.
+    //
+    var data = items.get({
+      type: {
+        start: 'ISODate',
+        end: 'ISODate'
+      }
+    });
+
+    // serialize the data and put it in the textarea
+    txtData.value = JSON.stringify(data, null, 2);
+  }
+  btnSave.onclick = saveData;
+
+  // load the initial data
+  loadData();
+</script>
+</body>
+</html>

examples/timeline/index.html

@@ -28,6 +28,7 @@
   <p><a href="14_a_lot_of_grouped_data.html">14_a_lot_of_grouped_data.html</a></p>
   <p><a href="15_item_class_names.html">15_item_class_names.html</a></p>
   <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="requirejs/requirejs_example.html">requirejs_example.html</a></p>
 

examples/timeline/requirejs/scripts/main.js

@@ -6,14 +6,14 @@ require.config({
 
 require(['vis'], function (vis) {
   var container = document.getElementById('visualization');
-  var data = [
+  var data = new vis.DataSet([
     {id: 1, content: 'item 1', start: '2013-04-20'},
     {id: 2, content: 'item 2', start: '2013-04-14'},
     {id: 3, content: 'item 3', start: '2013-04-18'},
     {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
     {id: 5, content: 'item 5', start: '2013-04-25'},
     {id: 6, content: 'item 6', start: '2013-04-27'}
-  ];
+  ]);
   var options = {};
   var timeline = new vis.Timeline(container, data, options);
 });

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