From d2f2b0aa1448bdc8af60ed487359c7db8a83831f Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Fri, 22 May 2015 12:34:25 +0200 Subject: [PATCH] added network and timeline examples, updated network docs, updated network example index --- docs/network/index.html | 7 +- .../network/events/interactionEvents.html | 12 + ....html => hierarchical_layout_methods.html} | 0 examples/timeline/12_custom_styling.html | 100 +++++ examples/timeline/basicUsage.html | 45 +++ .../dataHandling/dataSerialization.html | 121 ++++++ .../dataHandling/loadExternalData.html | 58 +++ .../editing/customSnappingOfItems.html | 55 +++ examples/timeline/editing/editingItems.html | 77 ++++ .../editing/editingItemsCallbacks.html | 108 ++++++ .../timeline/editing/updateDataOnEvent.html | 90 +++++ examples/timeline/groups/groups.html | 74 ++++ examples/timeline/groups/groupsOrdering.html | 68 ++++ examples/timeline/groups/subgroups.html | 76 ++++ .../timeline/interaction/animateWindow.html | 96 +++++ examples/timeline/interaction/clickToUse.html | 73 ++++ .../timeline/interaction/eventListeners.html | 64 +++ .../interaction/limitMoveAndZoom.html | 53 +++ .../timeline/interaction/navigationMenu.html | 94 +++++ .../timeline/interaction/setSelection.html | 66 ++++ examples/timeline/items/backgroundAreas.html | 50 +++ .../items/backgroundAreasWithGroups.html | 57 +++ examples/timeline/items/htmlContents.html | 75 ++++ examples/timeline/items/itemOrdering.html | 82 ++++ examples/timeline/items/pointItems.html | 60 +++ .../timeline/items/rangeOverflowItem.html | 54 +++ examples/timeline/other/customTimeBars.html | 89 +++++ examples/timeline/other/dataAttributes.html | 44 +++ .../timeline/other/dataAttributesAll.html | 44 +++ .../timeline/other/groupsPerformance.html | 110 ++++++ examples/timeline/other/hidingPeriods.html | 53 +++ examples/timeline/other/localization.html | 66 ++++ examples/timeline/other/performance.html | 65 ++++ .../other/requirejs/requirejs_example.html | 17 + .../timeline/other/requirejs/scripts/main.js | 19 + .../other/requirejs/scripts/require.js | 35 ++ examples/timeline/resources/data/basic.json | 34 ++ examples/timeline/resources/data/wk2014.json | 152 ++++++++ .../img/Hardware-Mobile-Phone-icon.png | Bin 0 -> 3463 bytes .../resources/img/attachment-icon.png | Bin 0 -> 2774 bytes .../resources/img/blog-post-edit-icon.png | Bin 0 -> 4225 bytes .../timeline/resources/img/comments-icon.png | Bin 0 -> 3173 bytes .../resources/img/community-users-icon.png | Bin 0 -> 4664 bytes examples/timeline/resources/img/license.txt | 17 + .../resources/img/license_aesthetica-2.txt | 36 ++ .../resources/img/license_refresh-cl.txt | 26 ++ examples/timeline/resources/img/mail-icon.png | Bin 0 -> 3298 bytes .../resources/img/notes-edit-icon.png | Bin 0 -> 2913 bytes .../timeline/resources/img/product-icon.png | Bin 0 -> 1594 bytes .../timeline/resources/img/truck-icon.png | Bin 0 -> 1703 bytes .../timeline/styling/axisOrientation.html | 75 ++++ examples/timeline/styling/customCss.html | 100 +++++ examples/timeline/styling/gridStyling.html | 54 +++ examples/timeline/styling/itemClassNames.html | 117 ++++++ examples/timeline/styling/itemTemplates.html | 251 ++++++++++++ network_examples.html | 367 ++++-------------- 56 files changed, 3186 insertions(+), 300 deletions(-) rename examples/network/layout/{hierarchica_layout_methods.html => hierarchical_layout_methods.html} (100%) create mode 100644 examples/timeline/12_custom_styling.html create mode 100644 examples/timeline/basicUsage.html create mode 100644 examples/timeline/dataHandling/dataSerialization.html create mode 100644 examples/timeline/dataHandling/loadExternalData.html create mode 100644 examples/timeline/editing/customSnappingOfItems.html create mode 100644 examples/timeline/editing/editingItems.html create mode 100644 examples/timeline/editing/editingItemsCallbacks.html create mode 100644 examples/timeline/editing/updateDataOnEvent.html create mode 100644 examples/timeline/groups/groups.html create mode 100644 examples/timeline/groups/groupsOrdering.html create mode 100644 examples/timeline/groups/subgroups.html create mode 100644 examples/timeline/interaction/animateWindow.html create mode 100644 examples/timeline/interaction/clickToUse.html create mode 100644 examples/timeline/interaction/eventListeners.html create mode 100644 examples/timeline/interaction/limitMoveAndZoom.html create mode 100644 examples/timeline/interaction/navigationMenu.html create mode 100644 examples/timeline/interaction/setSelection.html create mode 100644 examples/timeline/items/backgroundAreas.html create mode 100644 examples/timeline/items/backgroundAreasWithGroups.html create mode 100644 examples/timeline/items/htmlContents.html create mode 100644 examples/timeline/items/itemOrdering.html create mode 100644 examples/timeline/items/pointItems.html create mode 100644 examples/timeline/items/rangeOverflowItem.html create mode 100644 examples/timeline/other/customTimeBars.html create mode 100644 examples/timeline/other/dataAttributes.html create mode 100644 examples/timeline/other/dataAttributesAll.html create mode 100644 examples/timeline/other/groupsPerformance.html create mode 100644 examples/timeline/other/hidingPeriods.html create mode 100644 examples/timeline/other/localization.html create mode 100644 examples/timeline/other/performance.html create mode 100644 examples/timeline/other/requirejs/requirejs_example.html create mode 100644 examples/timeline/other/requirejs/scripts/main.js create mode 100644 examples/timeline/other/requirejs/scripts/require.js create mode 100644 examples/timeline/resources/data/basic.json create mode 100644 examples/timeline/resources/data/wk2014.json create mode 100644 examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png create mode 100644 examples/timeline/resources/img/attachment-icon.png create mode 100644 examples/timeline/resources/img/blog-post-edit-icon.png create mode 100644 examples/timeline/resources/img/comments-icon.png create mode 100644 examples/timeline/resources/img/community-users-icon.png create mode 100644 examples/timeline/resources/img/license.txt create mode 100644 examples/timeline/resources/img/license_aesthetica-2.txt create mode 100644 examples/timeline/resources/img/license_refresh-cl.txt create mode 100644 examples/timeline/resources/img/mail-icon.png create mode 100644 examples/timeline/resources/img/notes-edit-icon.png create mode 100644 examples/timeline/resources/img/product-icon.png create mode 100644 examples/timeline/resources/img/truck-icon.png create mode 100644 examples/timeline/styling/axisOrientation.html create mode 100644 examples/timeline/styling/customCss.html create mode 100644 examples/timeline/styling/gridStyling.html create mode 100644 examples/timeline/styling/itemClassNames.html create mode 100644 examples/timeline/styling/itemTemplates.html diff --git a/docs/network/index.html b/docs/network/index.html index 036fb67d..ca786bd6 100644 --- a/docs/network/index.html +++ b/docs/network/index.html @@ -190,7 +190,7 @@ </body> </html> -

The result of the code above will be the basic example which is shown here.

+

The result of the code above will be the basic example which is shown here.


@@ -1439,8 +1439,7 @@ var network = new vis.Network(container, data, options);

Network can import data straight from an exported json file from gephi. You can get the JSON exporter here: https://marketplace.gephi.org/plugin/json-exporter/. - An example exists showing how to get a JSON file into Vis: 30_importing_from_gephi. + An example exists showing how to get a JSON file into Vis:

@@ -1449,7 +1448,7 @@ var network = new vis.Network(container, data, options); 

 // load the JSON file containing the Gephi network.
-var gephiJSON = loadJSON("./data/WorldCup2014.json"); // code in example 30
+var gephiJSON = loadJSON("./datasources/WorldCup2014.json"); // code in importing_from_gephi.
 
 // you can customize the result like with these options. These are explained below.
 // These are the default options.
diff --git a/examples/network/events/interactionEvents.html b/examples/network/events/interactionEvents.html
index 151e4783..737416e3 100644
--- a/examples/network/events/interactionEvents.html
+++ b/examples/network/events/interactionEvents.html
@@ -61,6 +61,18 @@
         params.event = "[original event]";
         document.getElementById('eventSpan').innerHTML = '
oncontext (right click) event:
' + JSON.stringify(params, null, 4);
     });
+    network.on("dragStart", function (params) {
+        params.event = "[original event]";
+        document.getElementById('eventSpan').innerHTML = '
dragStart event:
' + JSON.stringify(params, null, 4);
+    });
+    network.on("dragging", function (params) {
+        params.event = "[original event]";
+        document.getElementById('eventSpan').innerHTML = '
dragging event:
' + JSON.stringify(params, null, 4);
+    });
+    network.on("dragEnd", function (params) {
+        params.event = "[original event]";
+        document.getElementById('eventSpan').innerHTML = '
dragEnd event:
' + JSON.stringify(params, null, 4);
+    });
     network.on("zoom", function (params) {
         document.getElementById('eventSpan').innerHTML = '
zoom event:
' + JSON.stringify(params, null, 4);
     });
diff --git a/examples/network/layout/hierarchica_layout_methods.html b/examples/network/layout/hierarchical_layout_methods.html
similarity index 100%
rename from examples/network/layout/hierarchica_layout_methods.html
rename to examples/network/layout/hierarchical_layout_methods.html
diff --git a/examples/timeline/12_custom_styling.html b/examples/timeline/12_custom_styling.html
new file mode 100644
index 00000000..c0917b63
--- /dev/null
+++ b/examples/timeline/12_custom_styling.html
@@ -0,0 +1,100 @@
+
+
+
+  Timeline | Custom styling
+
+  
+  
+
+  
+
+  
+
+
+
+

+  The style of the Timeline can be fully customized via CSS:
+

+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/basicUsage.html b/examples/timeline/basicUsage.html
new file mode 100644
index 00000000..16ea4d4f
--- /dev/null
+++ b/examples/timeline/basicUsage.html
@@ -0,0 +1,45 @@
+
+
+
+  Timeline | Basic demo
+
+  
+
+  
+  
+  
+
+
+
+

+  A basic timeline. You can move and zoom the timeline, and select items.
+

+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/dataHandling/dataSerialization.html b/examples/timeline/dataHandling/dataSerialization.html
new file mode 100644
index 00000000..1b3fcfa7
--- /dev/null
+++ b/examples/timeline/dataHandling/dataSerialization.html
@@ -0,0 +1,121 @@
+
+
+
+  Timeline | Data serialization
+
+  
+
+  
+  
+  
+
+
+
+
Serialization and deserialization

+
+
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.

+
+
+
+

+  
+  
+

+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/dataHandling/loadExternalData.html b/examples/timeline/dataHandling/loadExternalData.html
new file mode 100644
index 00000000..a5002726
--- /dev/null
+++ b/examples/timeline/dataHandling/loadExternalData.html
@@ -0,0 +1,58 @@
+
+
+
+  Timeline | External data
+
+  
+
+  
+  
+
+  
+  
+  
+
+
+

+  This demo shows how to load external data via an ajax call.
+

+

+
loading...

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/editing/customSnappingOfItems.html b/examples/timeline/editing/customSnappingOfItems.html
new file mode 100644
index 00000000..65a9a510
--- /dev/null
+++ b/examples/timeline/editing/customSnappingOfItems.html
@@ -0,0 +1,55 @@
+
+
+
+  Timeline | Custom snapping
+
+  
+  
+  
+
+
+

+  When moving the items in on the Timeline below, they will snap to full hours,
+  independent of being zoomed in or out.
+

+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/editing/editingItems.html b/examples/timeline/editing/editingItems.html
new file mode 100644
index 00000000..41f6e7c0
--- /dev/null
+++ b/examples/timeline/editing/editingItems.html
@@ -0,0 +1,77 @@
+
+
+
+  Timeline | Manipulation example
+
+  
+
+  
+  
+  
+
+
+
+
An editable timeline allows to drag items around, create new items, and remove items. Changes are logged in the browser console.

+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/editing/editingItemsCallbacks.html b/examples/timeline/editing/editingItemsCallbacks.html
new file mode 100644
index 00000000..8797683f
--- /dev/null
+++ b/examples/timeline/editing/editingItemsCallbacks.html
@@ -0,0 +1,108 @@
+
+
+
+  Timeline | Manipulation callbacks
+
+  
+
+  
+  
+  
+
+
+

+  This example shows how to use callback functions onAdd, onMove, onMoving, onUpdate, and onRemove. The onMoving 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.
+

+
+

+

+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/editing/updateDataOnEvent.html b/examples/timeline/editing/updateDataOnEvent.html
new file mode 100644
index 00000000..aedb885f
--- /dev/null
+++ b/examples/timeline/editing/updateDataOnEvent.html
@@ -0,0 +1,90 @@
+
+
+  Timeline | Update data on event
+
+  
+
+  
+  
+  
+
+
+
+

+  When the custom time bar is shown, the user can drag this bar to a specific
+  time. The Timeline sends an event that the custom time is changed, after
+  which the contents of the timeline can be changed according to the specified
+  time in past or future.
+

+
+
 

+

+
+

+
+
+
+
+
+
diff --git a/examples/timeline/groups/groups.html b/examples/timeline/groups/groups.html
new file mode 100644
index 00000000..1fe6938e
--- /dev/null
+++ b/examples/timeline/groups/groups.html
@@ -0,0 +1,74 @@
+
+
+
+  Timeline | Group example
+
+  
+
+  
+  
+
+  
+  
+  
+
+
+

+  This example demonstrate using groups. Note that a DataSet is used for both
+  items and groups, allowing to dynamically add, update or remove both items
+  and groups via the DataSet.
+

+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/groups/groupsOrdering.html b/examples/timeline/groups/groupsOrdering.html
new file mode 100644
index 00000000..8b9d03e2
--- /dev/null
+++ b/examples/timeline/groups/groupsOrdering.html
@@ -0,0 +1,68 @@
+
+
+
+  Timeline | Groups ordering
+
+  
+
+  
+  
+  
+
+
+

+  This example demonstrates custom ordering of groups.
+

+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/groups/subgroups.html b/examples/timeline/groups/subgroups.html
new file mode 100644
index 00000000..770a88d8
--- /dev/null
+++ b/examples/timeline/groups/subgroups.html
@@ -0,0 +1,76 @@
+
+
+
+    Timeline | Background areas
+
+    
+
+    
+    
+    
+
+
+
+
This example shows the workings of the subgroups. Subgroups do not use stacking, and only work when stacking is disabled.

+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/interaction/animateWindow.html b/examples/timeline/interaction/animateWindow.html
new file mode 100644
index 00000000..5ec8d7bd
--- /dev/null
+++ b/examples/timeline/interaction/animateWindow.html
@@ -0,0 +1,96 @@
+
+
+
+  Timeline | Animate window
+
+  
+
+  
+  
+  
+
+
+
+
This example demonstrates functions to programmatically adjust the visible window of the Timeline.

+
+

+  

+  

+  

+  

+  

+  

+  

+  

+

+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/interaction/clickToUse.html b/examples/timeline/interaction/clickToUse.html
new file mode 100644
index 00000000..97d465f6
--- /dev/null
+++ b/examples/timeline/interaction/clickToUse.html
@@ -0,0 +1,73 @@
+
+
+
+  Timeline | Click to use
+
+  
+
+  
+  
+  
+
+
+

+  
Timeline click to use

+  

+    This example demonstrates how to use the clickToUse option: before you can scroll and drag in the timeline, you first have to click in the timeline to activate.
+  

+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/interaction/eventListeners.html b/examples/timeline/interaction/eventListeners.html
new file mode 100644
index 00000000..53f94da6
--- /dev/null
+++ b/examples/timeline/interaction/eventListeners.html
@@ -0,0 +1,64 @@
+
+
+
+  Timeline | Event listeners
+
+  
+
+  
+  
+  
+
+
+  

+    This example listens for events select, rangechange, and rangechanged of the Timeline, and listens for changes in the DataSet (add, update, or remove items).
+  

+  

+  

+  

+
+  
+
+
\ No newline at end of file
diff --git a/examples/timeline/interaction/limitMoveAndZoom.html b/examples/timeline/interaction/limitMoveAndZoom.html
new file mode 100644
index 00000000..d6632187
--- /dev/null
+++ b/examples/timeline/interaction/limitMoveAndZoom.html
@@ -0,0 +1,53 @@
+
+
+
+  Timeline | Limit move and zoom
+
+  
+
+  
+  
+  
+
+
+

+  The visible range is limited in this demo:
+

+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/interaction/navigationMenu.html b/examples/timeline/interaction/navigationMenu.html
new file mode 100644
index 00000000..07ec66c1
--- /dev/null
+++ b/examples/timeline/interaction/navigationMenu.html
@@ -0,0 +1,94 @@
+
+
+
+    Timeline | navigation menu
+
+    
+
+    
+    
+    
+
+
+
+

+    Create your own navigation menu by creating an overlay with buttons to zoom and move.
+

+
+

+    

+        
+        
+        
+        
+    

+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/interaction/setSelection.html b/examples/timeline/interaction/setSelection.html
new file mode 100644
index 00000000..b68fb022
--- /dev/null
+++ b/examples/timeline/interaction/setSelection.html
@@ -0,0 +1,66 @@
+
+
+
+  Timeline | Select items
+
+  
+
+  
+  
+  
+
+
+
Set selection

+

+  Enter one or multiple ids of items, then press select to select the items. This demo uses the function Timeline.setSelection(ids). Optionally, the window can be moved to the selected items.
+

+
+

+  Select item(s): 

+  
+

+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/items/backgroundAreas.html b/examples/timeline/items/backgroundAreas.html
new file mode 100644
index 00000000..5f6d547c
--- /dev/null
+++ b/examples/timeline/items/backgroundAreas.html
@@ -0,0 +1,50 @@
+
+
+
+  Timeline | Background areas
+
+  
+
+  
+  
+  
+
+
+
+
This example demonstrates the item type "background", see "Period A" and "Period B". The background areas can be styled with css.

+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/items/backgroundAreasWithGroups.html b/examples/timeline/items/backgroundAreasWithGroups.html
new file mode 100644
index 00000000..409f3e54
--- /dev/null
+++ b/examples/timeline/items/backgroundAreasWithGroups.html
@@ -0,0 +1,57 @@
+
+
+
+  Timeline | Background areas with groups
+
+  
+
+  
+  
+  
+
+
+
+
This example demonstrates the item type "background" when using groups.

+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/items/htmlContents.html b/examples/timeline/items/htmlContents.html
new file mode 100644
index 00000000..6a818c30
--- /dev/null
+++ b/examples/timeline/items/htmlContents.html
@@ -0,0 +1,75 @@
+
+
+
+  Timeline | HTML data
+
+  
+
+  
+  
+
+  
+
+
+

+  Load HTML contents in the Timeline in various ways.
+

+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/items/itemOrdering.html b/examples/timeline/items/itemOrdering.html
new file mode 100644
index 00000000..e8cafdc9
--- /dev/null
+++ b/examples/timeline/items/itemOrdering.html
@@ -0,0 +1,82 @@
+
+
+
+  Timeline | Item ordering
+
+  
+
+  
+  
+
+  
+
+
+
Item ordering

+

+  By default, the items displayed on the Timeline are unordered. They are
+  stacked in the order that they where loaded. This means that way items are
+  stacked can change while moving and zooming the Timeline.
+

+

+  To display and stack the items in a controlled order, you can provide a
+  custom sorting function via the configuration option order.
+

+

+  WARNING: Custom ordering is only suitable for small amounts of items (up to a few
+  hundred), as the Timeline has to render all items once on load to
+  determine their width and height.
+

+

+  
+

+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/items/pointItems.html b/examples/timeline/items/pointItems.html
new file mode 100644
index 00000000..67082cc0
--- /dev/null
+++ b/examples/timeline/items/pointItems.html
@@ -0,0 +1,60 @@
+
+
+
+  Timeline | Point items
+
+  
+
+  
+  
+  
+
+
+
World War II timeline

+
Source: http://www.onwar.com/chrono/index.htm

+

+
+

+
+
+
+
diff --git a/examples/timeline/items/rangeOverflowItem.html b/examples/timeline/items/rangeOverflowItem.html
new file mode 100644
index 00000000..12582a69
--- /dev/null
+++ b/examples/timeline/items/rangeOverflowItem.html
@@ -0,0 +1,54 @@
+
+
+
+  Timeline | Range overflow
+
+  
+  
+
+  
+
+  
+
+
+

+  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:
+

+
+.vis-item .vis-item-overflow {
+  overflow: visible;
+}
+

+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/other/customTimeBars.html b/examples/timeline/other/customTimeBars.html
new file mode 100644
index 00000000..4794904c
--- /dev/null
+++ b/examples/timeline/other/customTimeBars.html
@@ -0,0 +1,89 @@
+
+
+
+  Timeline | Show current and custom time bars
+
+  
+
+  
+  
+  
+
+
+
+

+  The Timeline has functions to add multiple custom time bars which can be dragged by the user.
+

+

+  
+  
+

+

+  
+  
+

+

+  timechange event, index: , time: 
+

+

+  timechanged event, index: , time: 
+


+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/other/dataAttributes.html b/examples/timeline/other/dataAttributes.html
new file mode 100644
index 00000000..f852fffb
--- /dev/null
+++ b/examples/timeline/other/dataAttributes.html
@@ -0,0 +1,44 @@
+
+
+
+  Timeline | Basic demo
+
+  
+
+  
+  
+  
+
+
+

+  In this example all items get an HTML attribute attached: each item gets an attribute data-id, and items 1 and 6 have an additional attribute data-tooltip.
+

+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/other/dataAttributesAll.html b/examples/timeline/other/dataAttributesAll.html
new file mode 100644
index 00000000..7938f0bd
--- /dev/null
+++ b/examples/timeline/other/dataAttributesAll.html
@@ -0,0 +1,44 @@
+
+
+
+  Timeline | Basic demo
+
+  
+
+  
+  
+  
+
+
+

+  In this example all items get HTML attributes attached: each item gets data-? attributes for each field defined on the JS object.
+

+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/other/groupsPerformance.html b/examples/timeline/other/groupsPerformance.html
new file mode 100644
index 00000000..58dc9ca1
--- /dev/null
+++ b/examples/timeline/other/groupsPerformance.html
@@ -0,0 +1,110 @@
+
+
+  Timeline | A lot of grouped data
+
+  
+  
+
+  
+  
+
+
+
+
Timeline grouping performance

+
+

+  Choose a number of items:
+  100,
+  1000,
+  10000,
+  100000
+

+

+  Current number of items: 100
+

+
+

+
+
+
+
+
diff --git a/examples/timeline/other/hidingPeriods.html b/examples/timeline/other/hidingPeriods.html
new file mode 100644
index 00000000..9b2f359a
--- /dev/null
+++ b/examples/timeline/other/hidingPeriods.html
@@ -0,0 +1,53 @@
+
+
+
+    Timeline | Hiding periods
+
+    
+
+    
+    
+    
+
+
+

+    It's possible to hide (recurring) periods from the Timeline. The following example hides weekends and nights.
+

+

+
+
+
\ No newline at end of file
diff --git a/examples/timeline/other/localization.html b/examples/timeline/other/localization.html
new file mode 100644
index 00000000..39080c89
--- /dev/null
+++ b/examples/timeline/other/localization.html
@@ -0,0 +1,66 @@
+
+
+
+  Timeline | Localization
+
+  
+
+  
+  
+  
+  
+
+
+

+  To localize the Timeline, one has to load a version of moment.js including locales. To set a locale, specify option {locale: STRING}.
+

+
+

+  
+  
+

+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/other/performance.html b/examples/timeline/other/performance.html
new file mode 100644
index 00000000..4f914354
--- /dev/null
+++ b/examples/timeline/other/performance.html
@@ -0,0 +1,65 @@
+
+
+
+  Timeline | performance
+
+  
+
+  
+  
+
+  
+  
+  
+
+
+

+  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 zoomMax to prevent the user from zooming out too far).
+

+

+    
+    
+    
+

+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/other/requirejs/requirejs_example.html b/examples/timeline/other/requirejs/requirejs_example.html
new file mode 100644
index 00000000..d4531591
--- /dev/null
+++ b/examples/timeline/other/requirejs/requirejs_example.html
@@ -0,0 +1,17 @@
+
+
+
+  Timeline require.js demo
+
+  
+
+  
+  
+
+
+

+  This example shows how to load the vis.js library using require.js.
+

+

+
+
diff --git a/examples/timeline/other/requirejs/scripts/main.js b/examples/timeline/other/requirejs/scripts/main.js
new file mode 100644
index 00000000..f8148540
--- /dev/null
+++ b/examples/timeline/other/requirejs/scripts/main.js
@@ -0,0 +1,19 @@
+require.config({
+  paths: {
+    vis: '../../../../../dist/vis'
+  }
+});
+
+require(['vis'], function (vis) {
+  var container = document.getElementById('visualization');
+  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);
+});
diff --git a/examples/timeline/other/requirejs/scripts/require.js b/examples/timeline/other/requirejs/scripts/require.js
new file mode 100644
index 00000000..8de013dc
--- /dev/null
+++ b/examples/timeline/other/requirejs/scripts/require.js
@@ -0,0 +1,35 @@
+/*
+ RequireJS 2.1.2 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
+ Available via the MIT or new BSD license.
+ see: http://github.com/jrburke/requirejs for details
+*/
+var requirejs,require,define;
+(function(Y){function H(b){return"[object Function]"===L.call(b)}function I(b){return"[object Array]"===L.call(b)}function x(b,c){if(b){var d;for(d=0;dthis.depCount&&!this.defined){if(H(n)){if(this.events.error)try{e=j.execCb(c,n,b,e)}catch(d){a=d}else e=j.execCb(c,n,b,e);this.map.isDefine&&((b=this.module)&&void 0!==b.exports&&b.exports!==this.exports?e=b.exports:void 0===e&&this.usingExports&&(e=this.exports));if(a)return a.requireMap=this.map,a.requireModules=[this.map.id],a.requireType="define",C(this.error=a)}else e=n;this.exports=e;if(this.map.isDefine&&
+!this.ignore&&(p[c]=e,l.onResourceLoad))l.onResourceLoad(j,this.map,this.depMaps);delete k[c];this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=this.map,b=a.id,d=h(a.prefix);this.depMaps.push(d);s(d,"defined",t(this,function(e){var n,d;d=this.map.name;var v=this.map.parentMap?this.map.parentMap.name:null,f=j.makeRequire(a.parentMap,{enableBuildCallback:!0,
+skipMap:!0});if(this.map.unnormalized){if(e.normalize&&(d=e.normalize(d,function(a){return c(a,v,!0)})||""),e=h(a.prefix+"!"+d,this.map.parentMap),s(e,"defined",t(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),d=i(k,e.id)){this.depMaps.push(e);if(this.events.error)d.on("error",t(this,function(a){this.emit("error",a)}));d.enable()}}else n=t(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),n.error=t(this,function(a){this.inited=!0;this.error=
+a;a.requireModules=[b];E(k,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&delete k[a.map.id]});C(a)}),n.fromText=t(this,function(e,c){var d=a.name,u=h(d),v=O;c&&(e=c);v&&(O=!1);q(u);r(m.config,b)&&(m.config[d]=m.config[b]);try{l.exec(e)}catch(k){throw Error("fromText eval for "+d+" failed: "+k);}v&&(O=!0);this.depMaps.push(u);j.completeLoad(d);f([d],n)}),e.load(a.name,f,n,m)}));j.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){this.enabling=this.enabled=!0;x(this.depMaps,t(this,function(a,
+b){var c,e;if("string"===typeof a){a=h(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=i(N,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;s(a,"defined",t(this,function(a){this.defineDep(b,a);this.check()}));this.errback&&s(a,"error",this.errback)}c=a.id;e=k[c];!r(N,c)&&(e&&!e.enabled)&&j.enable(a,this)}));E(this.pluginMaps,t(this,function(a){var b=i(k,a.id);b&&!b.enabled&&j.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=
+this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){x(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};j={config:m,contextName:b,registry:k,defined:p,urlFetched:S,defQueue:F,Module:W,makeModuleMap:h,nextTick:l.nextTick,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=m.pkgs,c=m.shim,e={paths:!0,config:!0,map:!0};E(a,function(a,b){e[b]?"map"===b?Q(m[b],a,!0,!0):Q(m[b],a,!0):m[b]=a});a.shim&&(E(a.shim,function(a,
+b){I(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=j.makeShimExports(a);c[b]=a}),m.shim=c);a.packages&&(x(a.packages,function(a){a="string"===typeof a?{name:a}:a;b[a.name]={name:a.name,location:a.location||a.name,main:(a.main||"main").replace(ga,"").replace(aa,"")}}),m.pkgs=b);E(k,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=h(b))});if(a.deps||a.callback)j.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(Y,arguments));
+return b||a.exports&&Z(a.exports)}},makeRequire:function(a,d){function f(e,c,u){var i,m;d.enableBuildCallback&&(c&&H(c))&&(c.__requireJsBuild=!0);if("string"===typeof e){if(H(c))return C(J("requireargs","Invalid require call"),u);if(a&&r(N,e))return N[e](k[a.id]);if(l.get)return l.get(j,e,a);i=h(e,a,!1,!0);i=i.id;return!r(p,i)?C(J("notloaded",'Module name "'+i+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):p[i]}K();j.nextTick(function(){K();m=q(h(null,a));m.skipMap=d.skipMap;
+m.init(e,c,u,{enabled:!0});B()});return f}d=d||{};Q(f,{isBrowser:z,toUrl:function(b){var d=b.lastIndexOf("."),g=null;-1!==d&&(g=b.substring(d,b.length),b=b.substring(0,d));return j.nameToUrl(c(b,a&&a.id,!0),g)},defined:function(b){return r(p,h(b,a,!1,!0).id)},specified:function(b){b=h(b,a,!1,!0).id;return r(p,b)||r(k,b)}});a||(f.undef=function(b){w();var c=h(b,a,!0),d=i(k,b);delete p[b];delete S[c.url];delete X[b];d&&(d.events.defined&&(X[b]=d.events),delete k[b])});return f},enable:function(a){i(k,
+a.id)&&q(a).enable()},completeLoad:function(a){var b,c,d=i(m.shim,a)||{},h=d.exports;for(w();F.length;){c=F.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);D(c)}c=i(k,a);if(!b&&!r(p,a)&&c&&!c.inited){if(m.enforceDefine&&(!h||!Z(h)))return y(a)?void 0:C(J("nodefine","No define call for "+a,null,[a]));D([a,d.deps||[],d.exportsFn])}B()},nameToUrl:function(a,b){var c,d,h,f,j,k;if(l.jsExtRegExp.test(a))f=a+(b||"");else{c=m.paths;d=m.pkgs;f=a.split("/");for(j=f.length;0f.attachEvent.toString().indexOf("[native code"))&&!V?(O=!0,f.attachEvent("onreadystatechange",
+b.onScriptLoad)):(f.addEventListener("load",b.onScriptLoad,!1),f.addEventListener("error",b.onScriptError,!1)),f.src=d,K=f,D?A.insertBefore(f,D):A.appendChild(f),K=null,f;$&&(importScripts(d),b.completeLoad(c))};z&&M(document.getElementsByTagName("script"),function(b){A||(A=b.parentNode);if(s=b.getAttribute("data-main"))return q.baseUrl||(G=s.split("/"),ba=G.pop(),ca=G.length?G.join("/")+"/":"./",q.baseUrl=ca,s=ba),s=s.replace(aa,""),q.deps=q.deps?q.deps.concat(s):[s],!0});define=function(b,c,d){var i,
+f;"string"!==typeof b&&(d=c,c=b,b=null);I(c)||(d=c,c=[]);!c.length&&H(d)&&d.length&&(d.toString().replace(ia,"").replace(ja,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c));if(O){if(!(i=K))P&&"interactive"===P.readyState||M(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return P=b}),i=P;i&&(b||(b=i.getAttribute("data-requiremodule")),f=B[i.getAttribute("data-requirecontext")])}(f?f.defQueue:R).push([b,c,d])};define.amd=
+{jQuery:!0};l.exec=function(b){return eval(b)};l(q)}})(this);
diff --git a/examples/timeline/resources/data/basic.json b/examples/timeline/resources/data/basic.json
new file mode 100644
index 00000000..711dd8e2
--- /dev/null
+++ b/examples/timeline/resources/data/basic.json
@@ -0,0 +1,34 @@
+[
+  {
+    "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"
+  }
+]
\ No newline at end of file
diff --git a/examples/timeline/resources/data/wk2014.json b/examples/timeline/resources/data/wk2014.json
new file mode 100644
index 00000000..2bcb3d75
--- /dev/null
+++ b/examples/timeline/resources/data/wk2014.json
@@ -0,0 +1,152 @@
+[
+  {
+    "player1": "Brazil",
+    "abbr1": "br",
+    "score1": "1 (3)",
+    "player2": "Chile",
+    "abbr2": "cl",
+    "score2": "1 (2)",
+    "description": "round of 16",
+    "start": "2014-06-28 13:00"
+  },
+  {
+    "player1": "Colombia",
+    "abbr1": "co",
+    "score1": 2,
+    "player2": "Uruguay",
+    "abbr2": "uy",
+    "score2": 0,
+    "description": "round of 16",
+    "start": "2014-06-28 17:00"
+  },
+  {
+    "player1": "Netherlands",
+    "abbr1": "nl",
+    "score1": 2,
+    "player2": "Mexico",
+    "abbr2": "mx",
+    "score2": 1,
+    "description": "round of 16",
+    "start": "2014-06-29 13:00"
+  },
+  {
+    "player1": "Costa Rica",
+    "abbr1": "cr",
+    "score1": "1 (5)",
+    "player2": "Greece",
+    "abbr2": "gr",
+    "score2": "1 (3)",
+    "description": "round of 16",
+    "start": "2014-06-29 17:00"
+  },
+  {
+    "player1": "France",
+    "abbr1": "fr",
+    "score1": 2,
+    "player2": "Nigeria",
+    "abbr2": "ng",
+    "score2": 0,
+    "description": "round of 16",
+    "start": "2014-06-30 13:00"
+  },
+  {
+    "player1": "Germany",
+    "abbr1": "de",
+    "score1": 2,
+    "player2": "Algeria",
+    "abbr2": "dz",
+    "score2": 1,
+    "description": "round of 16",
+    "start": "2014-06-30 17:00"
+  },
+  {
+    "player1": "Argentina",
+    "abbr1": "ar",
+    "score1": 1,
+    "player2": "Switzerland",
+    "abbr2": "ch",
+    "score2": 0,
+    "description": "round of 16",
+    "start": "2014-07-01 13:00"
+  },
+  {
+    "player1": "Belgium",
+    "abbr1": "be",
+    "score1": 2,
+    "player2": "USA",
+    "abbr2": "us",
+    "score2": 1,
+    "description": "round of 16",
+    "start": "2014-07-01 17:00"
+  },
+  {
+    "player1": "France",
+    "abbr1": "fr",
+    "score1": 0,
+    "player2": "Germany",
+    "abbr2": "de",
+    "score2": 1,
+    "description": "quarter-finals",
+    "start": "2014-07-04 13:00"
+  },
+  {
+    "player1": "Brazil",
+    "abbr1": "br",
+    "score1": 2,
+    "player2": "Colombia",
+    "abbr2": "co",
+    "score2": 1,
+    "description": "quarter-finals",
+    "start": "2014-07-04 17:00"
+  },
+  {
+    "player1": "Argentina",
+    "abbr1": "ar",
+    "score1": 1,
+    "player2": "Belgium",
+    "abbr2": "be",
+    "score2": 0,
+    "description": "quarter-finals",
+    "start": "2014-07-05 13:00"
+  },
+  {
+    "player1": "Netherlands",
+    "abbr1": "nl",
+    "score1": "0 (4)",
+    "player2": "Costa Rica",
+    "abbr2": "cr",
+    "score2": "0 (3)",
+    "description": "quarter-finals",
+    "start": "2014-07-05 17:00"
+  },
+  {
+    "player1": "Brazil",
+    "abbr1": "br",
+    "score1": 1,
+    "player2": "Germany",
+    "abbr2": "de",
+    "score2": 7,
+    "description": "semi-finals",
+    "start": "2014-07-08 17:00"
+  },
+  {
+    "player1": "Netherlands",
+    "abbr1": "nl",
+    "score1": "0 (2)",
+    "player2": "Argentina",
+    "abbr2": "ar",
+    "score2": "0 (4)",
+    "description": "semi-finals",
+    "start": "2014-07-09 17:00"
+  },
+  {
+    "player1": "Germany",
+    "score1": 1,
+    "abbr1": "de",
+    "player2": "Argentina",
+    "abbr2": "ar",
+    "score2": 0,
+    "description": "final",
+    "start": "2014-07-13 16:00"
+  }
+]
\ No newline at end of file
diff --git a/examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png b/examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..66a6d35fc329c86b12d57185fb82879b471c5546
GIT binary patch
literal 3463
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

literal 0
HcmV?d00001

diff --git a/examples/timeline/resources/img/attachment-icon.png b/examples/timeline/resources/img/attachment-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc82517762e5c83e8030e4947fd0b5ed62e73b4d
GIT binary patch
literal 2774
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

literal 0
HcmV?d00001

diff --git a/examples/timeline/resources/img/blog-post-edit-icon.png b/examples/timeline/resources/img/blog-post-edit-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..12ab23c64717a0b361a739661f5bdabf16df85a6
GIT binary patch
literal 4225
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
X4%%syG(5Yu00000NkvXXu0mjfMVmS1

literal 0
HcmV?d00001

diff --git a/examples/timeline/resources/img/comments-icon.png b/examples/timeline/resources/img/comments-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..736789edd6ffce59fd55e89948bd5ead588a8106
GIT binary patch
literal 3173
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
LNkvXXu0mjfA!Y1$

literal 0
HcmV?d00001

diff --git a/examples/timeline/resources/img/community-users-icon.png b/examples/timeline/resources/img/community-users-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..a77e239a3cb3df9cb8367d0beedbf1ab545fcaf0
GIT binary patch
literal 4664
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
LNkvXXu0mjfwykOf

literal 0
HcmV?d00001

diff --git a/examples/timeline/resources/img/product-icon.png b/examples/timeline/resources/img/product-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb12da43b3d7979fc6377f30398dbd12bcedded2
GIT binary patch
literal 1594
zcmV-A2F3Y_P)3`Oy;0h7DOD~)MWi595e+d4w7XP@7D~Alfl#X$B8s5K5aT~F(O(*Y)F2@-
zCQX%qs6e@xD0EAyn5IymQd)Ym+Z&~&H(Iys?#y`RTxMss3qLSXe|VacbLLFb_c`zP
zeREDF{L4-HAK*U)Q1{aZ+wHDV?>ghBOp_#;yw$q|Iw!w6G}w!Q?l#D>4K~sxnXGFX
zR8@hZsz^*qA&(mQUD7p`z9VnhNS*`zEsaXx_O3@?_#|%_K<$b5b~<7wd}wpUBRJ4b
z#U)7>vC|Qx_uOnjYuy#t?GDoIkZm^l#}y@nP%wy;1zA)GnnFg>RW^c-Dx7f>KmZUJ
zy!lb`(oc690M`rO8B2uPo$(L3LVtDw`tBqmEL#D(JDSmQ{Sp@^U6yox=0GTfIcclz
z0T80kj**E7+-|$0siBFm;-Ec6Cp1X6+5>ZI~O3Gt&OO!EF;S@WSS!q
zGyy!v`yEo^7NXU+s2Gm|YPpd$p)gc^U
zVOY34mphPR=&o|
zjze&Oa3XRD?!e5fFBm}ekv9y0u&@A;c^=4UYpO?8c?r#a_HBUSfZi8pZ)W0@N*9Y(
z5hj2YdpW?5uSapfS^;_(S{rLoSypVsUwlObz>Dj*(5eWBf#t#79C&QyJ`V81W|D-$
zfrtc@!VWYyT*u|#in#q8K%)pyiSY7`Tlwxyd0-Y7a{;hwKLfb-{U)A-ChH^OuRGwY
zuffIAGe{gi3EiC?R5&I!p27_F_hIF$+e{&d%mdZ*J)mozS*yQd09A)y3Fm;xb~cwG
z&V{Dh8gzHv#MATBQE}djhU!XqmSrPu)EJyTdH_q;ZK6;bKL@NKP|X!U9hkM|YYuQI
z$4!L1!@quE`*nccTU{8P@Blpn0z*T%cBve5pG~ECaHG|S@slQtvS1KUt%+!HLG{dD
zo6i8Q9^Akk(5)5_R&n#`s0UyFVM!>l-Lk#&xoWsz{w!N7LiMD)^bG^}{lHo`5%os5
zpMQv`AU~eLAPfL1Yy~h}Fn^k@$>>R0e~Wk_s_gR5FD?h=#>O1IU*GUWN7Dj0rDtDZS87Ycw3HyJ2E%#?I=*yf?9
zr-xoVDlV2|*6bAc{eDbOo`L$hT8tZ)NX4&JT}Aeq73eSfSj50`B{Lk*T~Vz7WWh5h
z_f!M`X)%vv;X=zOG&TJJhr@{zg-5Y4)s4QsUZg+21SMy^NP2iG6)QUZGxGNCM_=jt
zMk0g(B0~@c;IPpFMoi5_dGl!ad^&&wCyy6m!NN2Ouqb^o&Xp900nYq_J$YZ^_OCl4
z$}l>BaEUhyKpGi}^|>=C0~ead5P&8MaO&i7%wLd-{=PoA7p0^0TnUnrlIUOX7M;Q8
zd-5=Neg_vv_(m+;7%nWDn*f}p0GIPKCXh)Bnc5`RI0VOMAf(9j+SPTd6Jy6F&@0!-
z*f3#!4MvCV97t
zbbU;eG-Zq({x~v^0V{ZYblj(AkaRy-Jp3WV3}}+Am(06JuO|IF9Y7Z$HxM{Y-Nn29
sE|#y|Pb2?mV2}gc;XNRFPEJnnFH4UWN>
zrU6p1wW6qjsz{?D6*MGZ0?M{{sq4bR-fwf+o!PnU%$e&sGjn{;Fq?=j1&odV@Fj0%
z<~x_?_rCA*ecv$nfd_LH;3~lP^`fVD?`10OwvHB0V`srIv~)J>OJ{PvoUZ$G`FwQq
z-5ZPFJHYREzS!ur+1ANCdz+`euG48%>a129!*MJ)j)Nr0&~(knYWZ|K6Ubt*pvqZ^0|)*IgRY$~xeS2>6>5oSR)7G_
zFg+j$;-y>g$5#*B)8MYzHow-@Lat$W%2Y8kqB5ExnV*z-cshdav;BxAGZ^SS4Tf4I
zlc1TkAW9`qm~G(7{Vx^^=DacJ^<5m`cROE_6`Om)D=e%@lCbDdV7KsaFhw-*27Xj6
zLyu1(98KWtWDf2M0g0Iq{G$WZYoXNh**2H}CWt`uR4xK@z?MJ%?VKzri-QFjzM_nAUBE~R
z(8Wr+%Hqhac071=8VoPtm&~VVZEZm$rD1HKueA1AD);D20z>f>Qq;CKmlK?S7<_sL
zr~dPA+<4O(V=x%5`s~<|nYm54{qKFW=G)A@JeSKrpf$hvnr1}e35-XwST^5@`%b2D
zbDaY}Q@qgiJW_d}yZdttMq=onj>6@1qRFnnolhe^9VGMVxZ%b%c>nNwx&ATl{n4qw
zdwMQwo(1`D0o=RkzCJ^0Y-?TMDJ?aR$Ah+}MX*^ESSZ8ZfngjzGmT|6EYj)Z`JGX+
zV%PrtCC9J-@p5!DHsIqA4N2OdH;rDBoWg{9I2y5jYyq=P0LnnKr!Xrs$!0ySs;XbuZB}D^eBz;0JoXVunFiF%g>eDE%3nRw
zR_k{6wl>spHIh&|(I&h;h%PrcGGrjG;xX}G=&JcOqM;yO-L-?XvTE3XyuzJ<1O&iw!VJT(USIg7I*!1{~aE;g$K^{azTH`@@3cJn${)Q
z_vXH#zSBMTmwTEl3nwVDvqt-0gPG$uK|rFADU@=^R7OQqtW^bFV_enlH$C<9?CtIC
zIDGWz_ORdga#>g{gA^_$d@+D;UgIcu3gPQOJXOeQx38vuIN@k;@(t?mtZ?y?idO(I
x*S+l5fXv_IW=1y;=_?ifE&%_RaTVYyz*l!zp+91aH)j9<002ovPDHLkV1m_RMTh_Z

literal 0
HcmV?d00001

diff --git a/examples/timeline/styling/axisOrientation.html b/examples/timeline/styling/axisOrientation.html
new file mode 100644
index 00000000..899a6bd2
--- /dev/null
+++ b/examples/timeline/styling/axisOrientation.html
@@ -0,0 +1,75 @@
+
+
+
+  Timeline | Orientation
+
+  
+
+  
+  
+
+  
+
+
+
+

+  There are a number of orientation options for the time axis and the items.
+

+
+

+  
+  
+

+
+

+  
+  
+

+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/styling/customCss.html b/examples/timeline/styling/customCss.html
new file mode 100644
index 00000000..906d44a6
--- /dev/null
+++ b/examples/timeline/styling/customCss.html
@@ -0,0 +1,100 @@
+
+
+
+  Timeline | Custom styling
+
+  
+  
+
+  
+
+  
+
+
+
+

+  The style of the Timeline can be fully customized via CSS:
+

+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/styling/gridStyling.html b/examples/timeline/styling/gridStyling.html
new file mode 100644
index 00000000..aaa39c45
--- /dev/null
+++ b/examples/timeline/styling/gridStyling.html
@@ -0,0 +1,54 @@
+
+
+
+  Timeline | Grid styling
+
+  
+  
+
+  
+  
+
+
+

+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/styling/itemClassNames.html b/examples/timeline/styling/itemClassNames.html
new file mode 100644
index 00000000..38b2735d
--- /dev/null
+++ b/examples/timeline/styling/itemClassNames.html
@@ -0,0 +1,117 @@
+
+
+  Timeline | Item class names
+
+  
+  
+
+  
+
+  
+
+
+
This page demonstrates the Timeline with custom css classes for individual items.

+
+

+
+
+
+
diff --git a/examples/timeline/styling/itemTemplates.html b/examples/timeline/styling/itemTemplates.html
new file mode 100644
index 00000000..a8772afa
--- /dev/null
+++ b/examples/timeline/styling/itemTemplates.html
@@ -0,0 +1,251 @@
+
+
+
+  Timeline | Templates
+
+  
+  
+  
+
+  
+  
+
+  
+
+  
+
+
+
WK 2014

+

+  This example demonstrates using templates to format item contents. In this case handlebars is used as template engine, but you can just use your favorite template engine or manually craft HTML from the data of an item.
+

+
+

+  
+

+
+
+
+
\ No newline at end of file
diff --git a/network_examples.html b/network_examples.html
index 8c728feb..99952d70 100644
--- a/network_examples.html
+++ b/network_examples.html
@@ -23,34 +23,21 @@
     
 
     
-    
+        a.exampleLink {
+            display:block;
+            text-decoration: underline;
+        }
+    
 
 
 
@@ -88,276 +75,64 @@
 
 
 

-
Network Examples
View all examples »  View docs »
-
-
This small code example shows the easiest way to get a network up and running. This code has been taken from example 1. The working example is shown next to it. (click it to start interacting with it).

-
-<div id="visualization"></div>
-<script type="text/javascript">
-    // create an array with nodes
-    var nodes = [
-        {id: 1, label: 'Node 1'},
-        {id: 2, label: 'Node 2'},
-        {id: 3, label: 'Node 3'},
-        {id: 4, label: 'Node 4'},
-        {id: 5, label: 'Node 5'}
-    ];
+
Network Examples

+    We have seperated the examples into groups to make it easier to navigate them. For the documentation, please click the button below: 


+    View docs »
 
-    // create an array with edges
-    var edges = [
-        {from: 1, to: 2},
-        {from: 1, to: 3},
-        {from: 2, to: 4},
-        {from: 2, to: 5}
-    ];
-
-    // create a network
-    var container = document.getElementById('visualization');
-    var data = {
-        nodes: nodes,
-        edges: edges
-    };
-    var network = new vis.Network(container, data, {});
-</script>
-

-

-
-
All examples

-

-    

-        
-            
-            
basic usage

-        
-    

-    

-        
-            
-            
random nodes

-        
-    

-    

-        
-            
-            
images

-        
-    

-    

-        
-            
-            
shapes

-        
-    

-    

-        
-            
-            
social network

-        
-    

-    

-        
-            
-            
groups

-        
-    

-    

-        
-            
-            
selections

-        
-    

-    

-        
-            
-            
mobile friendly

-        
-    

-    

-        
-            
-            
sizing

-        
-    

-    

-        
-            
-            
multiline text

-        
-    

-    

-        
-            
-            
custom style

-        
-    

-    

-        
-            
-            
scalable images

-        
-    

-    

-        
-            
-            
dashed lines

-        
-    

-    

-        
-            
-            
dot language

-        
-    

-    

-        
-            
-            
playground

-        
-    

-    

-        
-            
-            
dynamic data

-        
-    

-    

-        
-            
-            
network info

-        
-    

-    

-        
-            
-            
fully random nodes clustering

-        
-    

-    

-        
-            
-            
scale free graph clustering

-        
-    

-    

-        
-            
-            
navigation

-        
-    

-    

-        
-            
-            
data manipulation

-        
-    

-    

-        
-            
-            
les miserables

-        
-    

-    

-        
-            
-            
hierarchical layout

-        
-    

-    

-        
-            
-            
hierarchical layout userdefined

-        
-    

-    

-        
-            
-            
physics configuration

-        
-    

-    

-        
-            
-            
static smooth curves

-        
-    

-    

-        
-            
-            
world cup network

-        
-    

-    

-        
-            
-            
world cup network performance

-        
-    

-    

-        
-            
-            
neighborhood highlight

-        
-    

-    

-        
-            
-            
importing from gephi

-        
-    

-    

-        
-            
-            
localization

-        
-    

-    

-        
-            
-            
hierarchical layout methods

-        
-    

-    

-        
-            
-            
animation

-        
-    

-    

-        
-            
-            
circular images

-        
-    

-    

-        
-            
-            
label stroke

-        
-    

-    

-        
-            
-            
HTML in nodes!

-        
-    

-    

-        
-            
-            
labelAlignment for edges

-        
-    

-    

-        
-            
-            
node as icon

-        
-    

-    

-        
-            
-            
graphviz examples

-        
-    

+
node styles

+    colors
+    groups
+    custom groups
+    HTML in nodes
+    icons (Fontawesome and Ionicons)
+    images
+    circular images
+    node shadows
+    node shapes
+
edge styles

+    arrows (also combined with dashes)
+    different colors
+    dashes
+    smooth curves
+    smooth curves in action
+
labels

+    label alignment (for edges only)
+    label background
+    colors and sizes
+    label stroke
+    multiline text
+
layout

+    hierarchical layout
+    hierarchical layout - different methods
+    hierarchical layout - user defined
+    set the random seed so every network will be the same
+
events

+    interaction events, click, rightclick, drag etc.
+    physics events, stabilization etc.
+    rendering events, use to draw custom items on the canvas.
+
dynamic data

+    dataset for dynamic data
+    dynamic data, playground
+    importing data from gephi
+    scaling the nodes with the value.
+    scaling the nodes and edges with the value.
+    scaling the nodes, edges and labels with the value.
+
physics

+    physics configuration
+
example applications

+    les miserables cast
+    loading bar during stabilization
+    neighbourhood heighlight
+    using nodes as a legend
+    performance test with the worldcup data
+
other

+    animation showcase
+    clustering possibilities
+    clustering by zoom
+    dynamic configuration
+    manipulation interface and localization
+    navigation buttons and keyboard shortcuts
+    performance test with scale free network, customize the amount of nodes