From 0c9703016c44c932648d1d89adae73db751a94ad Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Mon, 4 May 2015 15:14:37 +0200
Subject: [PATCH] Reviewed/updated all timeline examples

---
 docs/network/new_network.html                 |  1 -
 docs/timeline.html                            |  2 +-
 examples/network/02_random_nodes.html         |  2 +-
 examples/timeline/01_basic.html               |  8 ++++++-
 ..._interactive.html => 02_manipulation.html} |  8 +++----
 examples/timeline/03_performance.html         | 11 +++++----
 examples/timeline/04_html_data.html           |  5 ++--
 examples/timeline/05_groups.html              |  3 ++-
 examples/timeline/06_event_listeners.html     |  6 ++++-
 examples/timeline/07_custom_time_bars.html    | 24 +++++++++++++------
 ...ms.html => 08_manipulation_callbacks.html} |  7 +++---
 ...er_groups.html => 09_groups_ordering.html} |  7 +++---
 examples/timeline/10_limit_move_and_zoom.html |  3 ++-
 .../{11_points.html => 11_point_items.html}   |  5 ++--
 examples/timeline/12_custom_styling.html      | 10 +++++++-
 examples/timeline/13_past_and_future.html     |  3 ++-
 ...nce.html => 14_performance_of_groups.html} |  3 ++-
 examples/timeline/15_item_class_names.html    |  3 ++-
 examples/timeline/16_navigation_menu.html     |  8 ++++++-
 examples/timeline/17_data_serialization.html  |  3 ++-
 examples/timeline/18_range_overflow.html      |  3 ++-
 examples/timeline/19_localization.html        |  3 ++-
 examples/timeline/20_click_to_use.html        |  3 ++-
 examples/timeline/21_set_selection.html       |  3 ++-
 ...adjustment.html => 22_animate_window.html} |  7 +++---
 examples/timeline/23_data_attributes.html     |  3 ++-
 examples/timeline/24_all_data_attributes.html |  3 ++-
 examples/timeline/25_background_areas.html    |  3 ++-
 ...l_data.html => 26_load_external_data.html} |  4 ++--
 examples/timeline/27_templates.html           |  3 ++-
 ...em_ordering.html => 28_item_ordering.html} |  2 ++
 ...ding_times.html => 29_hiding_periods.html} |  6 ++++-
 examples/timeline/30_subgroups.html           |  3 ++-
 .../31_background_areas_with_groups.html      |  3 ++-
 examples/timeline/32_grid_styling.html        |  3 ++-
 examples/timeline/33_custom_snapping.html     |  3 ++-
 examples/timeline/index.html                  | 21 ++++++++--------
 .../timeline/requirejs/requirejs_example.html |  3 ++-
 38 files changed, 133 insertions(+), 68 deletions(-)
 rename examples/timeline/{02_interactive.html => 02_manipulation.html} (73%)
 rename examples/timeline/{08_edit_items.html => 08_manipulation_callbacks.html} (88%)
 rename examples/timeline/{09_order_groups.html => 09_groups_ordering.html} (79%)
 rename examples/timeline/{11_points.html => 11_point_items.html} (85%)
 rename examples/timeline/{14_group_performance.html => 14_performance_of_groups.html} (86%)
 rename examples/timeline/{22_window_adjustment.html => 22_animate_window.html} (84%)
 rename examples/timeline/{26_external_data.html => 26_load_external_data.html} (77%)
 rename examples/timeline/{35_item_ordering.html => 28_item_ordering.html} (97%)
 rename examples/timeline/{29_hiding_times.html => 29_hiding_periods.html} (80%)

diff --git a/docs/network/new_network.html b/docs/network/new_network.html
index 00960874..41050a33 100644
--- a/docs/network/new_network.html
+++ b/docs/network/new_network.html
@@ -20,7 +20,6 @@
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
 
-
     <script src="../js/smooth-scroll.min.js"></script>
     <script src="../js/googleAnalytics.js"></script>
     <script language="JavaScript">
diff --git a/docs/timeline.html b/docs/timeline.html
index 2c9f8aaa..61b50ee7 100644
--- a/docs/timeline.html
+++ b/docs/timeline.html
@@ -1286,7 +1286,7 @@ var options = {
 };
 </pre>
 
-A full example is available here: <a href="../examples/timeline/08_edit_items.html">08_edit_items.html</a>.
+A full example is available here: <a href="../examples/timeline/08_manipulation_callbacks.html">08_edit_items.html</a>.
 
 
 <h2 id="Templates">Templates</h2>
diff --git a/examples/network/02_random_nodes.html b/examples/network/02_random_nodes.html
index b6209d0d..0c9db9af 100644
--- a/examples/network/02_random_nodes.html
+++ b/examples/network/02_random_nodes.html
@@ -93,7 +93,7 @@
 
   </script>
   <script src="../googleAnalytics.js"></script>
-
+</head>
 <body onload="draw();">
 <p>
   Generate a random network with nodes and edges.
diff --git a/examples/timeline/01_basic.html b/examples/timeline/01_basic.html
index cb44871d..16ea4d4f 100644
--- a/examples/timeline/01_basic.html
+++ b/examples/timeline/01_basic.html
@@ -11,8 +11,14 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
+
+<p>
+  A basic timeline. You can move and zoom the timeline, and select items.
+</p>
+
 <div id="visualization"></div>
 
 <script type="text/javascript">
diff --git a/examples/timeline/02_interactive.html b/examples/timeline/02_manipulation.html
similarity index 73%
rename from examples/timeline/02_interactive.html
rename to examples/timeline/02_manipulation.html
index 09ee7fa3..8062c449 100644
--- a/examples/timeline/02_interactive.html
+++ b/examples/timeline/02_manipulation.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-  <title>Timeline | Interactive example</title>
+  <title>Timeline | Manipulation example</title>
 
   <style>
     body, html {
@@ -12,10 +12,11 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 
-<p>Drag items around, create new items, and remove items.</p>
+<p>An editable timeline allows to drag items around, create new items, and remove items.</p>
 
 <div id="visualization"></div>
 
@@ -42,7 +43,6 @@
   var options = {
     start: '2014-01-10',
     end: '2014-02-10',
-    orientation: 'top',
     height: '300px',
     editable: true,
 
diff --git a/examples/timeline/03_performance.html b/examples/timeline/03_performance.html
index 9ceae154..ea62549a 100644
--- a/examples/timeline/03_performance.html
+++ b/examples/timeline/03_performance.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-  <title>Timeline | a lot of data</title>
+  <title>Timeline | performance</title>
 
   <style>
     body, html {
@@ -15,11 +15,12 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
-<h1>
-  Test with a lot of data
-</h1>
+<p>
+  Test the performance with a lot of items. The Timeline can load hundreds of thousands of items, but the performance of rendering them in the browser is limited. Rendering typically runs smooth for up to a few hundreds of items at once (you can set a <code>zoomMax</code> to prevent the user from zooming out too far).
+</p>
 <p>
     <label for="count">Number of items</label>
     <input id="count" value="10000">
diff --git a/examples/timeline/04_html_data.html b/examples/timeline/04_html_data.html
index 5b20c099..dbe47368 100644
--- a/examples/timeline/04_html_data.html
+++ b/examples/timeline/04_html_data.html
@@ -19,10 +19,11 @@
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <p>
-  Load HTML contents in the Timeline
+  Load HTML contents in the Timeline in various ways.
 </p>
 <div id="visualization"></div>
 
diff --git a/examples/timeline/05_groups.html b/examples/timeline/05_groups.html
index aae8c25c..bf0bce0b 100644
--- a/examples/timeline/05_groups.html
+++ b/examples/timeline/05_groups.html
@@ -21,7 +21,8 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <p>
   This example demonstrate using groups. Note that a DataSet is used for both
diff --git a/examples/timeline/06_event_listeners.html b/examples/timeline/06_event_listeners.html
index 241eea68..7026c833 100644
--- a/examples/timeline/06_event_listeners.html
+++ b/examples/timeline/06_event_listeners.html
@@ -11,8 +11,12 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
+  <p>
+    This example listens for events <code>select</code>, <code>rangechange</code>, and <code>rangechanged</code> of the Timeline, and listens for changes in the DataSet (<code>add</code>, <code>update</code>, or <code>remove</code> items).
+  </p>
   <div id="visualization"></div>
   <p></p>
   <div id="log"></div>
diff --git a/examples/timeline/07_custom_time_bars.html b/examples/timeline/07_custom_time_bars.html
index 3d3d6032..b71a0515 100644
--- a/examples/timeline/07_custom_time_bars.html
+++ b/examples/timeline/07_custom_time_bars.html
@@ -12,9 +12,13 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 
+<p>
+  The Timeline has functions to add multiple custom time bars which can be dragged by the user.
+</p>
 <p>
   <input type="button" id="add" value="Add custom vertical bar">
   <input type="text" id="barId" placeholder="custom bar ID">
@@ -24,10 +28,10 @@
   <input type="text" id="barIndex" value="1" placeholder="custom bar ID">
 </p>
 <p>
-  <code><strong>timechange</strong></code> bar index: <span id="timechangeBar"></span>. Time: <span id="timechangeEvent"></span>
+  <code><strong>timechange</strong></code> event, index: <span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
 </p>
 <p>
-  <code><strong>timechanged</strong></code> bar index: <span id="timechangedBar"></span>. Time: <span id="timechangedEvent"></span>
+  <code><strong>timechanged</strong></code> event, index: <span id="timechangedBar"></span>, time: <span id="timechangedEvent"></span>
 </p><br>
 
 <div id="visualization"></div>
@@ -48,10 +52,16 @@
   timeline.addCustomTime(customDate, '1');
 
   document.getElementById('add').onclick = function () {
-    customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
-    var barId = document.getElementById('barId').value || undefined;
-    timeline.addCustomTime(customDate, barId);
-    document.getElementById('barId').value = '';
+    try {
+      customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
+      var barId = document.getElementById('barId').value || undefined;
+      timeline.addCustomTime(customDate, barId);
+      document.getElementById('barId').value = '';
+    }
+    catch (err) {
+      console.log(err);
+      alert(err);
+    }
   };
 
   document.getElementById('remove').onclick = function () {
diff --git a/examples/timeline/08_edit_items.html b/examples/timeline/08_manipulation_callbacks.html
similarity index 88%
rename from examples/timeline/08_edit_items.html
rename to examples/timeline/08_manipulation_callbacks.html
index 2ffbb91f..2308208d 100644
--- a/examples/timeline/08_edit_items.html
+++ b/examples/timeline/08_manipulation_callbacks.html
@@ -1,18 +1,19 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-  <title>Timeline | Edit items</title>
+  <title>Timeline | Manipulation callbacks</title>
 
   <style type="text/css">
     body, html {
       font-family: sans-serif;
-      font-size: 12pt;
+      font-size: 11pt;
     }
   </style>
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <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.
diff --git a/examples/timeline/09_order_groups.html b/examples/timeline/09_groups_ordering.html
similarity index 79%
rename from examples/timeline/09_order_groups.html
rename to examples/timeline/09_groups_ordering.html
index 5ae2ab08..508afc71 100644
--- a/examples/timeline/09_order_groups.html
+++ b/examples/timeline/09_groups_ordering.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-  <title>Timeline | Order groups</title>
+  <title>Timeline | Groups ordering</title>
 
   <style>
     body, html {
@@ -18,10 +18,11 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <p>
-  This example demonstrate custom ordering of groups.
+  This example demonstrates custom ordering of groups.
 </p>
 <div id="visualization"></div>
 
diff --git a/examples/timeline/10_limit_move_and_zoom.html b/examples/timeline/10_limit_move_and_zoom.html
index 904cc5fc..b4743389 100644
--- a/examples/timeline/10_limit_move_and_zoom.html
+++ b/examples/timeline/10_limit_move_and_zoom.html
@@ -12,7 +12,8 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <p>
   The visible range is limited in this demo:
diff --git a/examples/timeline/11_points.html b/examples/timeline/11_point_items.html
similarity index 85%
rename from examples/timeline/11_points.html
rename to examples/timeline/11_point_items.html
index fd0f6d2f..95cc8aa9 100755
--- a/examples/timeline/11_points.html
+++ b/examples/timeline/11_point_items.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-  <title>Timeline | Points</title>
+  <title>Timeline | Point items</title>
 
   <style type="text/css">
     body {
@@ -11,7 +11,8 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <h1>World War II timeline</h1>
 <p>Source: <a href="http://www.onwar.com/chrono/index.htm" target="_blank">http://www.onwar.com/chrono/index.htm</a></p>
diff --git a/examples/timeline/12_custom_styling.html b/examples/timeline/12_custom_styling.html
index 5b6cdd21..c0917b63 100644
--- a/examples/timeline/12_custom_styling.html
+++ b/examples/timeline/12_custom_styling.html
@@ -7,6 +7,10 @@
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
+    body {
+      font-family:  purisa, 'comic sans', cursive;
+    }
+
     .vis-timeline {
       border: 2px solid purple;
       font-family:  purisa, 'comic sans', cursive;
@@ -58,9 +62,13 @@
     }
   </style>
 
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 
+<p>
+  The style of the Timeline can be fully customized via CSS:
+</p>
 <div id="visualization"></div>
 
 <script type="text/javascript">
diff --git a/examples/timeline/13_past_and_future.html b/examples/timeline/13_past_and_future.html
index f11c91fd..601533cf 100644
--- a/examples/timeline/13_past_and_future.html
+++ b/examples/timeline/13_past_and_future.html
@@ -15,7 +15,8 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 
 <body>
 <p style="width: 600px;">
diff --git a/examples/timeline/14_group_performance.html b/examples/timeline/14_performance_of_groups.html
similarity index 86%
rename from examples/timeline/14_group_performance.html
rename to examples/timeline/14_performance_of_groups.html
index c1d905b3..82ec0536 100644
--- a/examples/timeline/14_group_performance.html
+++ b/examples/timeline/14_performance_of_groups.html
@@ -11,7 +11,8 @@
       font: 10pt arial;
     }
   </style>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 
 <body onresize="/*timeline.checkResize();*/">
 <h1>Timeline grouping performance</h1>
diff --git a/examples/timeline/15_item_class_names.html b/examples/timeline/15_item_class_names.html
index 096c9dad..8e08eab7 100755
--- a/examples/timeline/15_item_class_names.html
+++ b/examples/timeline/15_item_class_names.html
@@ -65,7 +65,8 @@
     }
   </style>
 
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <p>This page demonstrates the Timeline with custom css classes for individual items.</p>
 
diff --git a/examples/timeline/16_navigation_menu.html b/examples/timeline/16_navigation_menu.html
index 039d8fbb..6494e776 100755
--- a/examples/timeline/16_navigation_menu.html
+++ b/examples/timeline/16_navigation_menu.html
@@ -24,8 +24,14 @@
 
     <script src="../../dist/vis.js"></script>
     <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+    <script src="../googleAnalytics.js"></script>
+</head>
 <body>
+
+<p>
+    Create your own navigation menu by creating an overlay with buttons to zoom and move.
+</p>
+
 <div id="visualization">
     <div class="menu">
         <input type="button" id="zoomIn" value="Zoom in"/>
diff --git a/examples/timeline/17_data_serialization.html b/examples/timeline/17_data_serialization.html
index 3574c91c..1b03285c 100644
--- a/examples/timeline/17_data_serialization.html
+++ b/examples/timeline/17_data_serialization.html
@@ -25,7 +25,8 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 
 <h1>Serialization and deserialization</h1>
diff --git a/examples/timeline/18_range_overflow.html b/examples/timeline/18_range_overflow.html
index cac86a8a..0abb1339 100644
--- a/examples/timeline/18_range_overflow.html
+++ b/examples/timeline/18_range_overflow.html
@@ -16,7 +16,8 @@
     }
   </style>
 
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <p>
   In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css:
diff --git a/examples/timeline/19_localization.html b/examples/timeline/19_localization.html
index 6e9552a5..e37bcc56 100644
--- a/examples/timeline/19_localization.html
+++ b/examples/timeline/19_localization.html
@@ -13,7 +13,8 @@
   <script src="http://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" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</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>.
diff --git a/examples/timeline/20_click_to_use.html b/examples/timeline/20_click_to_use.html
index 1f31df5c..8efa8e69 100644
--- a/examples/timeline/20_click_to_use.html
+++ b/examples/timeline/20_click_to_use.html
@@ -19,7 +19,8 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <div id="main">
   <h1>Timeline click to use</h1>
diff --git a/examples/timeline/21_set_selection.html b/examples/timeline/21_set_selection.html
index 3536fd28..9abfe0ad 100644
--- a/examples/timeline/21_set_selection.html
+++ b/examples/timeline/21_set_selection.html
@@ -12,7 +12,8 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <h1>Set selection</h1>
 <p style="max-width: 600px;">
diff --git a/examples/timeline/22_window_adjustment.html b/examples/timeline/22_animate_window.html
similarity index 84%
rename from examples/timeline/22_window_adjustment.html
rename to examples/timeline/22_animate_window.html
index cda8325d..8ad73349 100644
--- a/examples/timeline/22_window_adjustment.html
+++ b/examples/timeline/22_animate_window.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-  <title>Timeline | Adjusting window</title>
+  <title>Timeline | Animate window</title>
 
   <style>
     body, html {
@@ -15,10 +15,11 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 
-<p>This example demonstrates functions to adjust the visible window of the Timeline.</p>
+<p>This example demonstrates functions to programmatically adjust the visible window of the Timeline.</p>
 
 <p>
   <input type="button" id="window1" value="Set window from 2014-01-01 to 2014-04-01"><br>
diff --git a/examples/timeline/23_data_attributes.html b/examples/timeline/23_data_attributes.html
index 8ff29bf8..7f9af7cf 100644
--- a/examples/timeline/23_data_attributes.html
+++ b/examples/timeline/23_data_attributes.html
@@ -11,7 +11,8 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <p>
   In this example all items get an HTML attribute attached: each item gets an attribute <code>data-id</code>, and items 1 and 6 have an additional attribute <code>data-tooltip</code>.
diff --git a/examples/timeline/24_all_data_attributes.html b/examples/timeline/24_all_data_attributes.html
index 033eafc9..67d7f540 100644
--- a/examples/timeline/24_all_data_attributes.html
+++ b/examples/timeline/24_all_data_attributes.html
@@ -11,7 +11,8 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <p>
   In this example all items get HTML attributes attached: each item gets <code>data-?</code> attributes for each field defined on the JS object.
diff --git a/examples/timeline/25_background_areas.html b/examples/timeline/25_background_areas.html
index c6505fae..9bc20c98 100644
--- a/examples/timeline/25_background_areas.html
+++ b/examples/timeline/25_background_areas.html
@@ -16,7 +16,8 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 
 <p>This example demonstrates the item type "background", see "Period A" and "Period B". The background areas can be styled with css.</p>
diff --git a/examples/timeline/26_external_data.html b/examples/timeline/26_load_external_data.html
similarity index 77%
rename from examples/timeline/26_external_data.html
rename to examples/timeline/26_load_external_data.html
index 7ef8647e..d35bf19b 100644
--- a/examples/timeline/26_external_data.html
+++ b/examples/timeline/26_load_external_data.html
@@ -14,9 +14,9 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
-<h1>Load external data</h1>
 <p>
   This demo shows how to load external data via an ajax call.
 </p>
diff --git a/examples/timeline/27_templates.html b/examples/timeline/27_templates.html
index 9ce69793..8a66b242 100644
--- a/examples/timeline/27_templates.html
+++ b/examples/timeline/27_templates.html
@@ -57,7 +57,8 @@
     }
   </style>
 
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <h1>WK 2014</h1>
 <p style="max-width: 600px;">
diff --git a/examples/timeline/35_item_ordering.html b/examples/timeline/28_item_ordering.html
similarity index 97%
rename from examples/timeline/35_item_ordering.html
rename to examples/timeline/28_item_ordering.html
index a1b560b6..5806dff8 100644
--- a/examples/timeline/35_item_ordering.html
+++ b/examples/timeline/28_item_ordering.html
@@ -14,6 +14,8 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <script src="../googleAnalytics.js"></script>
 </head>
 <body>
 <h1>Item ordering</h1>
diff --git a/examples/timeline/29_hiding_times.html b/examples/timeline/29_hiding_periods.html
similarity index 80%
rename from examples/timeline/29_hiding_times.html
rename to examples/timeline/29_hiding_periods.html
index e378ccbc..8bef3ceb 100644
--- a/examples/timeline/29_hiding_times.html
+++ b/examples/timeline/29_hiding_periods.html
@@ -11,8 +11,12 @@
 
     <script src="../../dist/vis.js"></script>
     <link href="../../dist/vis.css" rel="stylesheet" type="text/css"/>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+    <script src="../googleAnalytics.js"></script>
+</head>
 <body>
+<p>
+    It's possible to hide (recurring) periods from the Timeline. The following example hides weekends and nights.
+</p>
 <div id="visualization"></div>
 <script type="text/javascript">
     // DOM element where the Timeline will be attached
diff --git a/examples/timeline/30_subgroups.html b/examples/timeline/30_subgroups.html
index 3dda8590..cfb5b02b 100644
--- a/examples/timeline/30_subgroups.html
+++ b/examples/timeline/30_subgroups.html
@@ -22,7 +22,8 @@
 
     <script src="../../dist/vis.js"></script>
     <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+    <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 
 <p>This example shows the workings of the subgroups. Subgroups do not use stacking, and only work when stacking is disabled.</p>
diff --git a/examples/timeline/31_background_areas_with_groups.html b/examples/timeline/31_background_areas_with_groups.html
index 727b596a..de19749c 100644
--- a/examples/timeline/31_background_areas_with_groups.html
+++ b/examples/timeline/31_background_areas_with_groups.html
@@ -12,7 +12,8 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 
 <p>This example demonstrates the item type "background" when using groups.</p>
diff --git a/examples/timeline/32_grid_styling.html b/examples/timeline/32_grid_styling.html
index e63a4e60..74c649e9 100644
--- a/examples/timeline/32_grid_styling.html
+++ b/examples/timeline/32_grid_styling.html
@@ -26,7 +26,8 @@
       color: white;
     }
   </style>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <div id="visualization"></div>
 
diff --git a/examples/timeline/33_custom_snapping.html b/examples/timeline/33_custom_snapping.html
index b415b77c..aa79623d 100644
--- a/examples/timeline/33_custom_snapping.html
+++ b/examples/timeline/33_custom_snapping.html
@@ -5,7 +5,8 @@
 
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 <body>
 <p>
   When moving the items in on the Timeline below, they will snap to full hours,
diff --git a/examples/timeline/index.html b/examples/timeline/index.html
index 48e71c8a..a618d70e 100644
--- a/examples/timeline/index.html
+++ b/examples/timeline/index.html
@@ -5,7 +5,8 @@
   <title>vis.js | timeline examples</title>
 
   <link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../googleAnalytics.js"></script>
+</head>
 
 <body>
 <div id="container">
@@ -13,19 +14,19 @@
   <h1>vis.js timeline examples</h1>
 
   <p><a href="01_basic.html">01_basic.html</a></p>
-  <p><a href="02_interactive.html">02_dataset.html</a></p>
+  <p><a href="02_manipulation.html">02_manipulation.html</a></p>
   <p><a href="03_performance.html">03_performance.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>
   <p><a href="07_custom_time_bars.html">07_custom_time_bars.html</a></p>
-  <p><a href="08_edit_items.html">08_edit_items.html</a></p>
-  <p><a href="09_order_groups.html">09_order_groups.html</a></p>
+  <p><a href="08_manipulation_callbacks.html">08_manipulation_callbacks.html</a></p>
+  <p><a href="09_groups_ordering.html">09_groups_ordering.html</a></p>
   <p><a href="10_limit_move_and_zoom.html">10_limit_range_and_zoom.html</a></p>
-  <p><a href="11_points.html">11_points.html</a></p>
+  <p><a href="11_point_items.html">11_point_items.html</a></p>
   <p><a href="12_custom_styling.html">12_custom_styling.html</a></p>
   <p><a href="13_past_and_future.html">13_past_and_future.html</a></p>
-  <p><a href="14_group_performance.html">14_group_performance.html</a></p>
+  <p><a href="14_performance_of_groups.html">14_performance_of_groups.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>
@@ -33,18 +34,18 @@
   <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="22_animate_window.html">22_animate_window.html</a></p>
   <p><a href="23_data_attributes.html">23_data_attributes.html</a></p>
   <p><a href="24_all_data_attributes.html">24_all_data_attributes.html</a></p>
   <p><a href="25_background_areas.html">25_background_areas.html</a></p>
-  <p><a href="26_external_data.html">26_external_data.html</a></p>
+  <p><a href="26_load_external_data.html">26_load_external_data.html</a></p>
   <p><a href="27_templates.html">27_templates.html</a></p>
-  <p><a href="29_hiding_times.html">29_hiding_times.html</a></p>
+  <p><a href="28_item_ordering.html">28_item_ordering.html</a></p>
+  <p><a href="29_hiding_periods.html">29_hiding_periods.html</a></p>
   <p><a href="30_subgroups.html">30_subgroups.html</a></p>
   <p><a href="31_background_areas_with_groups.html">31_background_areas_with_groups.html</a></p>
   <p><a href="32_grid_styling.html">32_grid_styling.html</a></p>
   <p><a href="33_custom_snapping.html">33_custom_snapping.html</a></p>
-  <p><a href="35_item_ordering.html">35_item_ordering.html</a></p>
   <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>
 
 </div>
diff --git a/examples/timeline/requirejs/requirejs_example.html b/examples/timeline/requirejs/requirejs_example.html
index daafd1ae..5306b13b 100644
--- a/examples/timeline/requirejs/requirejs_example.html
+++ b/examples/timeline/requirejs/requirejs_example.html
@@ -6,7 +6,8 @@
   <script data-main="scripts/main" src="scripts/require.js"></script>
 
   <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
-<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+  <script src="../../googleAnalytics.js"></script>
+</head>
 <body>
 <div id="visualization"></div>
 </body>