Released version 0.4.0

dist/vis.css

@@ -109,6 +109,14 @@
   z-index: 999;
 }
 
+.vis.timeline .item.point.selected {
+  background-color: #FFF785;
+  z-index: 999;
+}
+.vis.timeline .item.point.selected .dot {
+  border-color: #FFC200;
+}
+
 .vis.timeline .item.cluster {
   /* TODO: use another color or pattern? */
   background: #97B0F8 url('img/cluster_bg.png');

docs/index.html

@@ -179,7 +179,7 @@ var timeline = new vis.Timeline(container, data, options);
   <h2 id="license">License</h2>
 
   <p>
-    Copyright (C) 2010-2013 Almende B.V.
+    Copyright (C) 2010-2014 Almende B.V.
   </p>
 
   <p>

docs/timeline.html

@@ -14,6 +14,16 @@
 
 <h1>Timeline documentation</h1>
 
+<h2 id="Overview">Overview</h2>
+<p>
+  The Timeline is an interactive visualization chart to visualize data in time.
+  The data items can take place on a single date, or have a start and end date (a range).
+  You can freely move and zoom in the timeline by dragging and scrolling in the
+  Timeline. Items can be created, edited, and deleted in the timeline.
+  The time scale on the axis is adjusted automatically, and supports scales ranging
+  from milliseconds to years.
+</p>
+
 
 <h2 id="Contents">Contents</h2>
 <ul>
@@ -28,20 +38,11 @@
   </li>
   <li><a href="#Configuration_Options">Configuration Options</a></li>
   <li><a href="#Methods">Methods</a></li>
+  <li><a href="#Events">Events</a></li>
   <li><a href="#Styles">Styles</a></li>
   <li><a href="#Data_Policy">Data Policy</a></li>
 </ul>
 
-<h2 id="Overview">Overview</h2>
-<p>
-  The Timeline is an interactive visualization chart to visualize data in time.
-  The data items can take place on a single date, or have a start and end date (a range).
-  You can freely move and zoom in the timeline by dragging and scrolling in the
-  Timeline. Items can be created, edited, and deleted in the timeline.
-  The time scale on the axis is adjusted automatically, and supports scales ranging
-  from milliseconds to years.
-</p>
-
 <h2 id="Example">Example</h2>
 <p>
   The following code shows how to create a Timeline and provide it with data.
@@ -342,7 +343,7 @@ var options = {
 
 <tr>
   <td>end</td>
-  <td>Date</td>
+  <td>Date | Number | String</td>
   <td>none</td>
   <td>The initial end date for the axis of the timeline.
     If not provided, the latest date present in the items set is taken as
@@ -387,7 +388,7 @@ var options = {
 
 <tr>
   <td>max</td>
-  <td>Date</td>
+  <td>Date | Number | String</td>
   <td>none</td>
   <td>Set a maximum Date for the visible range.
     It will not be possible to move beyond this maximum.
@@ -404,7 +405,7 @@ var options = {
 
 <tr>
   <td>min</td>
-  <td>Date</td>
+  <td>Date | Number | String</td>
   <td>none</td>
   <td>Set a minimum Date for the visible range.
     It will not be possible to move beyond this minimum.
@@ -482,7 +483,7 @@ var options = {
 
 <tr>
   <td>start</td>
-  <td>Date</td>
+  <td>Date | Number | String</td>
   <td>none</td>
   <td>The initial start date for the axis of the timeline.
     If not provided, the earliest date present in the events is taken as start date.</td>
@@ -544,12 +545,32 @@ var options = {
     <td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</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>
   </tr>
+
+  <tr>
+    <td>getSelection()</td>
+    <td>ids</td>
+    <td>Get an array with the ids of the currently selected items.</td>
+  </tr>
+
+  <tr>
+    <td>on(event, callback)</td>
+    <td>none</td>
+    <td>Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
+  </tr>
+
+  <tr>
+    <td>off(event, callback)</td>
+    <td>none</td>
+    <td>Remove an event listener created before via function <code>on(event, callback)</code>. See section <a href="#Events">Events for more information</a>.</td>
+  </tr>
+
   <tr>
     <td>setGroups(groups)</td>
     <td>none</td>
@@ -560,6 +581,7 @@ var options = {
       must correspond with the id of the group.
     </td>
   </tr>
+
   <tr>
     <td>setItems(items)</td>
     <td>none</td>
@@ -572,12 +594,107 @@ var options = {
   <tr>
     <td>setOptions(options)</td>
     <td>none</td>
-    <td>Set or update options. It is possible to change any option
-      of the timeline at any time. You can for example switch orientation
-      on the fly.
+    <td>Set or update options. It is possible to change any option of the timeline at any time. You can for example switch orientation on the fly.
+    </td>
+  </tr>
+
+  <tr>
+    <td>setSelection([ids])</td>
+    <td>none</td>
+    <td>Select or deselect items. Currently selected items will be unselected.
+    </td>
+  </tr>
+
+</table>
+
+
+<h2 id="Events">Events</h2>
+<p>
+  Timeline fires events when changing the visible window by dragging, or when
+  selecting items.
+</p>
+
+<p>
+  Here an example on how to listen for a <code>select</code> event.
+</p>
+
+<pre class="prettyprint lang-js">
+timeline.on('select', function (properties) {
+  alert('selected items: ' + properties.nodes);
+});
+</pre>
+
+<p>
+  A listener can be removed via the function <code>off</code>:
+</p>
+
+<pre class="prettyprint lang-js">
+function onSelect (properties) {
+  alert('selected items: ' + properties.nodes);
+}
+
+// add event listener
+timeline.on('select', onSelect);
+
+// do stuff...
+
+// remove event listener
+timeline.off('select', onSelect);
+</pre>
+
+
+<p>
+  The following events are available.
+</p>
+
+<table>
+  <colgroup>
+    <col style="width: 20%;">
+    <col style="width: 40%;">
+    <col style="width: 40%;">
+  </colgroup>
+
+  <tr>
+    <th>name</th>
+    <th>Description</th>
+    <th>Properties</th>
+  </tr>
+
+  <tr>
+    <td>rangechange</td>
+    <td>Fired repeatedly when the user is dragging the timeline window.
+    </td>
+    <td>
+      <ul>
+        <li><code>start</code> (Number): timestamp of the current start of the window.</li>
+        <li><code>end</code> (Number): timestamp of the current end of the window.</li>
+      </ul>
+    </td>
+  </tr>
+
+  <tr>
+    <td>rangechanged</td>
+    <td>Fired once after the user has dragging the timeline window.
+    </td>
+    <td>
+      <ul>
+        <li><code>start</code> (Number): timestamp of the current start of the window.</li>
+        <li><code>end</code> (Number): timestamp of the current end of the window.</li>
+      </ul>
     </td>
   </tr>
 
+  <tr>
+    <td>select</td>
+    <td>Fired after the user selects or deselects items by tapping or holding them.
+      Not fired when the method <code>setSelection</code>is executed.
+    </td>
+    <td>
+      <ul>
+        <li><code>items</code>: an array with the ids of the selected items</li>
+      </ul>
+    </td>
+  </tr>
 
 </table>
 

examples/graph/02_random_nodes.html

@@ -74,6 +74,7 @@
         nodes: nodes,
         edges: edges
       };
+        /*
       var options = {
         nodes: {
           shape: 'circle'
@@ -83,12 +84,18 @@
         },
         stabilize: false
       };
+      */
+    var options = {
+    edges: {
+        length: 50
+    },
+    stabilize: false
+    };
       graph = new vis.Graph(container, data, options);
 
       // add event listeners
-      vis.events.addListener(graph, 'select', function(params) {
-        document.getElementById('selection').innerHTML =
-            'Selection: ' + graph.getSelection();
+      graph.on('select', function(params) {
+        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
       });
     }
   </script>

examples/graph/07_selections.html

@@ -51,11 +51,9 @@
   graph = new vis.Graph(container, data, options);
 
   // add event listener
-  function onSelect() {
-    document.getElementById('info').innerHTML +=
-        'selection: ' + graph.getSelection().join(', ') + '<br>';
-  }
-  vis.events.addListener(graph, 'select', onSelect);
+  graph.on('select', function(params) {
+    document.getElementById('info').innerHTML += 'selection: ' + params.nodes + '<br>';
+  });
 
   // set initial selection (id's of some nodes)
   graph.setSelection([3, 4, 5]);

examples/graph/17_network_info.html

@@ -17,7 +17,7 @@
     }
   </style>
 
-  <script type="text/javascript" src="../../dist/vis.min.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
 
   <script type="text/javascript">
     var nodes = null;

examples/graph/18_fully_random_nodes_clustering.html

@@ -0,0 +1,102 @@
+<!doctype html>
+<html>
+<head>
+    <title>Graph | Fully random nodes clustering</title>
+
+    <style type="text/css">
+        body {
+            font: 10pt sans;
+        }
+        #mygraph {
+            width: 600px;
+            height: 600px;
+            border: 1px solid lightgray;
+        }
+    </style>
+
+    <script type="text/javascript" src="../../dist/vis.js"></script>
+
+    <script type="text/javascript">
+        var nodes = null;
+        var edges = null;
+        var graph = null;
+
+        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 graph
+            var clusteringOn = document.getElementById('clustering').checked;
+            var container = document.getElementById('mygraph');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var options = {
+                edges: {
+                    length: 80
+                },
+                clustering: {
+                    enabled: clusteringOn
+                },
+                stabilize: false
+            };
+            graph = new vis.Graph(container, data, options);
+
+            // add event listeners
+            graph.on('select', function(params) {
+                document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+            });
+        }
+    </script>
+</head>
+
+<body onload="draw();">
+<h2>Clustering - Fully random graph</h2>
+<div style="width:700px; font-size:14px;">
+    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">
+</form>
+<br>
+
+<div id="mygraph"></div>
+
+<p id="selection"></p>
+</body>
+</html>

examples/graph/19_scale_free_graph_clustering.html

@@ -0,0 +1,141 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph | Scale free graph clustering</title>
+
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mygraph {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
+
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var graph = null;
+
+    function draw() {
+      nodes = [];
+      edges = [];
+      var connectionCount = [];
+
+      // randomly create some nodes and edges
+      var nodeCount = document.getElementById('nodeCount').value;
+      for (var i = 0; i < nodeCount; i++) {
+        nodes.push({
+          id: i,
+          label: String(i)
+        });
+
+        connectionCount[i] = 0;
+
+        // create edges in a scale-free-graph 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 graph
+      var clusteringOn = document.getElementById('clustering').checked;
+      var clusterEdgeThreshold = parseInt(document.getElementById('clusterEdgeThreshold').value);
+      var container = document.getElementById('mygraph');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+        /*
+      var options = {
+        nodes: {
+          shape: 'circle'
+        },
+        edges: {
+          length: 50
+        },
+        stabilize: false
+      };
+      */
+    var options = {
+    edges: {
+        length: 50
+    },
+    clustering: {
+        enabled: clusteringOn,
+        clusterEdgeThreshold: clusterEdgeThreshold
+    },
+    stabilize: false
+    };
+      graph = new vis.Graph(container, data, options);
+
+      // add event listeners
+      graph.on('select', function(params) {
+        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+      });
+    }
+  </script>
+</head>
+
+<body onload="draw();">
+<h2>Clustering - Scale-Free-Graph</h2>
+<div style="width:700px; font-size:14px;">
+    This example shows therandomly generated <b>scale-free-graph</b> set of nodes and connected edges from example 2.
+    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.
+    Experiment with the clusterEdgeThreshold, which increases the formation of clusters when zoomed out (assuming the checkbox is checked).
+</div>
+<br />
+<form onsubmit="draw(); return false;">
+  <label for="nodeCount">Number of nodes:</label>
+  <input id="nodeCount" type="text" value="125" style="width: 50px;">
+  <label for="clustering">Enable Clustering:</label>
+  <input id="clustering" type="checkbox" onChange="draw()" checked="true">
+  <label for="clusterEdgeThreshold">clusterEdgeThreshold:</label>
+  <input id="clusterEdgeThreshold" type="text" value="20" style="width: 50px;">
+  <input type="submit" value="Go">
+</form>
+<br>
+
+<div id="mygraph"></div>
+
+<p id="selection"></p>
+</body>
+</html>

examples/graph/20_navigation.html

@@ -0,0 +1,181 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph | Navigation</title>
+
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mygraph {
+      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;
+    }
+
+  </style>
+
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var graph = null;
+
+    function draw() {
+      nodes = [];
+      edges = [];
+      var connectionCount = [];
+
+      // randomly create some nodes and edges
+      var nodeCount = document.getElementById('nodeCount').value;
+      for (var i = 0; i < nodeCount; i++) {
+        nodes.push({
+          id: i,
+          label: String(i)
+        });
+
+        connectionCount[i] = 0;
+
+        // create edges in a scale-free-graph 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 graph
+      var container = document.getElementById('mygraph');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      /*
+       var options = {
+       nodes: {
+       shape: 'circle'
+       },
+       edges: {
+       length: 50
+       },
+       stabilize: false
+       };
+       */
+      var options = {
+        edges: {
+          length: 50
+        },
+        stabilize: false,
+        navigation: true,
+        keyboard: true
+      };
+      graph = new vis.Graph(container, data, options);
+
+      // add event listeners
+      graph.on('select', function(params) {
+        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+      });
+    }
+  </script>
+</head>
+
+<body onload="draw();">
+<h2>Navigation controls and keyboad navigation</h2>
+<div style="width: 700px; font-size:14px;">
+  This example is the same as example 2, except for the navigation controls that has been activated. The navigation controls are described below. <br /><br />
+  <table class="legend_table">
+    <tr>
+      <td>Icons: </td>
+      <td><div class="table_content"><img src="../../dist/img/uparrow.png" />     </div></td>
+      <td><div class="table_content"><img src="../../dist/img/downarrow.png" />   </div></td>
+      <td><div class="table_content"><img src="../../dist/img/leftarrow.png" />   </div></td>
+      <td><div class="table_content"><img src="../../dist/img/rightarrow.png" />  </div></td>
+      <td><div class="table_content"><img src="../../dist/img/plus.png" />        </div></td>
+      <td><div class="table_content"><img src="../../dist/img/minus.png" />       </div></td>
+      <td><div class="table_content"><img src="../../dist/img/zoomExtends.png" /> </div></td>
+    </tr>
+    <tr>
+      <td><div class="table_description">Keyboard shortcuts:</div></td>
+      <td><div class="table_content">Up arrow</div></td>
+      <td><div class="table_content">Down arrow</div></td>
+      <td><div class="table_content">Left arrow</div></td>
+      <td><div class="table_content">Right arrow</div></td>
+      <td><div class="table_content">=<br />[<br />Page up</div></td>
+      <td><div class="table_content">-<br />]<br />Page down</div></td>
+      <td><div class="table_content">None</div></td>
+    </tr>
+    <tr>
+      <td><div class="table_description">Description:</div></td>
+      <td><div class="table_content">Move up</div></td>
+      <td><div class="table_content">Move down</div></td>
+      <td><div class="table_content">Move left</div></td>
+      <td><div class="table_content">Move right</div></td>
+      <td><div class="table_content">Zoom in</div></td>
+      <td><div class="table_content">Zoom out</div></td>
+      <td><div class="table_content">Zoom extends</div></td>
+    </tr>
+  </table>
+  <br />
+  Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above.
+  Zoom Extends changes the zoom and position of the camera to encompass all visible nodes.
+
+
+</div>
+<br />
+
+<form onsubmit="draw(); return false;">
+  <label for="nodeCount">Number of nodes:</label>
+  <input id="nodeCount" type="text" value="25" style="width: 50px;">
+  <input type="submit" value="Go">
+</form>
+<br>
+
+<div id="mygraph"></div>
+
+<p id="selection"></p>
+</body>
+</html>

examples/graph/index.html

@@ -29,6 +29,9 @@
   <p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p>
   <p><a href="16_dynamic_data.html">16_dynamic_data.html</a></p>
   <p><a href="17_network_info.html">17_network_info.html</a></p>
+  <p><a href="18_fully_random_nodes_clustering.html">18_fully_random_nodes_clustering.html</a></p>
+  <p><a href="19_scale_free_graph_clustering.html">19_scale_free_graph_clustering.html</a></p>
+  <p><a href="20_navigation.html">20_navigation.html</a></p>
   <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
 
 </div>

examples/timeline/02_dataset.html

@@ -39,18 +39,18 @@
     }
   });
   items.add([
-    {id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4)},
-    {id: 2, content: 'item 2', start: now.clone().add('days', -2)},
-    {id: 3, content: 'item 3', start: now.clone().add('days', 2)},
-    {id: 4, content: 'item 4', start: now.clone().add('days', 0), end: now.clone().add('days', 3).toDate()},
-    {id: 5, content: 'item 5', start: now.clone().add('days', 9), type:'point'},
-    {id: 6, content: 'item 6', start: now.clone().add('days', 11)}
+    {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: now.clone().add('days', -3),
-    end: now.clone().add('days', 7),
+    start: '2014-01-10',
+    end: '2014-02-10',
     orientation: 'top',
     height: '100%',
     showCurrentTime: true

examples/timeline/06_event_listeners.html

@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Event listeners</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>
+  <div id="visualization"></div>
+  <p></p>
+  <div id="log"></div>
+
+  <script type="text/javascript">
+    var container = document.getElementById('visualization');
+    var items = [
+      {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, items, options);
+
+    timeline.on('rangechange', function (properties) {
+      logEvent('rangechange', properties);
+    });
+    timeline.on('rangechanged', function (properties) {
+      logEvent('rangechanged', properties);
+    });
+    timeline.on('select', function (properties) {
+      logEvent('select', 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>
+</body>
+</html>

examples/timeline/index.html

@@ -17,6 +17,7 @@
   <p><a href="03_much_data.html">03_much_data.html</a></p>
   <p><a href="04_html_data.html">04_html_data.html</a></p>
   <p><a href="05_groups.html">05_groups.html</a></p>
+  <p><a href="06_event_listeners.html">06_event_listeners.html</a></p>
 
 </div>
 </body>

index.html

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