@@ -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 = '
+ 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.
+
+ 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:
+
+
+
minimum visible date is limited to 2012-01-01 using option min
+
maximum visible date is limited to 2013-01-01 (excluded) using option max
+
visible zoom interval is limited to a minimum of 24 hours using option zoomMin
+
visible zoom interval is limited to a maximum of about 3 months using option zoomMax
+
+
+
+
+
+
\ 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.
+
+
Background items having a group are displayed in that group
+
Background items without a group are spread over the whole timeline
+
Background items with a non-existing group are not displayed
+
+
+
+
+
+
\ 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
+
+
+
+
+
+
+
+
+
+ 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:
+
+
+
+
+
+
+
\ 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
+
+
+
+
+
+
+
+
+
+
+ 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.
+
+ 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 @@
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).
+
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-