Browse Source

made the examples pretty :)

gh-pages
Alex de Mulder 9 years ago
parent
commit
9eb003c835
49 changed files with 27346 additions and 27309 deletions
  1. +22
    -0
      css/imagesNetwork.css
  2. +27107
    -27040
      dist/vis.js
  3. BIN
      examples/network/data/dotLanguage/graphvizGallery/screenshots/fsm.png
  4. BIN
      examples/network/data/dotLanguage/graphvizGallery/screenshots/hello.png
  5. BIN
      examples/network/data/dotLanguage/graphvizGallery/screenshots/softmaint.png
  6. BIN
      examples/network/data/dotLanguage/graphvizGallery/screenshots/traffic_lights.png
  7. +0
    -57
      examples/network/index.html
  8. BIN
      images/exampleScreenshots/network/1.png
  9. BIN
      images/exampleScreenshots/network/10.png
  10. BIN
      images/exampleScreenshots/network/11.png
  11. BIN
      images/exampleScreenshots/network/12.png
  12. BIN
      images/exampleScreenshots/network/13.png
  13. BIN
      images/exampleScreenshots/network/14.png
  14. BIN
      images/exampleScreenshots/network/15.png
  15. BIN
      images/exampleScreenshots/network/16.png
  16. BIN
      images/exampleScreenshots/network/17.png
  17. BIN
      images/exampleScreenshots/network/18.png
  18. BIN
      images/exampleScreenshots/network/19.png
  19. BIN
      images/exampleScreenshots/network/2.png
  20. BIN
      images/exampleScreenshots/network/20.png
  21. BIN
      images/exampleScreenshots/network/21.png
  22. BIN
      images/exampleScreenshots/network/22.png
  23. BIN
      images/exampleScreenshots/network/23.png
  24. BIN
      images/exampleScreenshots/network/24.png
  25. BIN
      images/exampleScreenshots/network/25.png
  26. BIN
      images/exampleScreenshots/network/26.png
  27. BIN
      images/exampleScreenshots/network/27.png
  28. BIN
      images/exampleScreenshots/network/28.png
  29. BIN
      images/exampleScreenshots/network/29.png
  30. BIN
      images/exampleScreenshots/network/3.png
  31. BIN
      images/exampleScreenshots/network/30.png
  32. BIN
      images/exampleScreenshots/network/31.png
  33. BIN
      images/exampleScreenshots/network/32.png
  34. BIN
      images/exampleScreenshots/network/33.png
  35. BIN
      images/exampleScreenshots/network/34.png
  36. BIN
      images/exampleScreenshots/network/35.png
  37. BIN
      images/exampleScreenshots/network/36.png
  38. BIN
      images/exampleScreenshots/network/37.png
  39. BIN
      images/exampleScreenshots/network/38.png
  40. BIN
      images/exampleScreenshots/network/4.png
  41. BIN
      images/exampleScreenshots/network/5.png
  42. BIN
      images/exampleScreenshots/network/6.png
  43. BIN
      images/exampleScreenshots/network/7.png
  44. BIN
      images/exampleScreenshots/network/8.png
  45. BIN
      images/exampleScreenshots/network/9.png
  46. BIN
      images/exampleScreenshots/network/graphviz.png
  47. +154
    -0
      js/imagesNetwork.js
  48. +3
    -156
      network_examples.html
  49. +60
    -56
      timeline_examples.html

+ 22
- 0
css/imagesNetwork.css View File

@ -0,0 +1,22 @@
#networkContainer {
margin:0px;
padding:0px;
position:relative;
height: 0px;
width: 100%;
z-index:0;
}
#contentContainer {
margin:0px;
padding:0px;
position:relative;
width: 100%;
z-index:2;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

+ 27107
- 27040
dist/vis.js
File diff suppressed because it is too large
View File


BIN
examples/network/data/dotLanguage/graphvizGallery/screenshots/fsm.png View File

Before After
Width: 894  |  Height: 593  |  Size: 69 KiB

BIN
examples/network/data/dotLanguage/graphvizGallery/screenshots/hello.png View File

Before After
Width: 921  |  Height: 264  |  Size: 18 KiB

BIN
examples/network/data/dotLanguage/graphvizGallery/screenshots/softmaint.png View File

Before After
Width: 1237  |  Height: 729  |  Size: 262 KiB

BIN
examples/network/data/dotLanguage/graphvizGallery/screenshots/traffic_lights.png View File

Before After
Width: 1108  |  Height: 591  |  Size: 58 KiB

+ 0
- 57
examples/network/index.html View File

@ -1,57 +0,0 @@
<!doctype html>
<html>
<head>
<title>vis.js | Network examples</title>
<link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<div id="container">
<h1>vis.js Network examples</h1>
<p><a href="01_basic_usage.html">01_basic_usage.html</a></p>
<p><a href="02_random_nodes.html">02_random_nodes.html</a></p>
<p><a href="03_images.html">03_images.html</a></p>
<p><a href="04_shapes.html">04_shapes.html</a></p>
<p><a href="05_social_network.html">05_social_network.html</a></p>
<p><a href="06_groups.html">06_groups.html</a></p>
<p><a href="07_selections.html">07_selections.html</a></p>
<p><a href="09_scaling.html">09_scaling.html</a></p>
<p><a href="10_multiline_text.html">10_multiline_text.html</a></p>
<p><a href="11_styling.html">11_styling.html</a></p>
<p><a href="12_arrows.html">12_arrows.html</a></p>
<p><a href="13_dashed_lines.html">13_dashed_lines.html</a></p>
<p><a href="14_dot_language.html">14_dot_language.html</a></p>
<p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p>
<p><a href="16_dynamic_data.html">16_dynamic_data.html</a></p>
<p><a href="17_network_info.html">17_network_info.html</a></p>
<p><a href="18_fully_random_nodes_clustering.html">18_fully_random_nodes_clustering.html</a></p>
<p><a href="19_scale_free_graph_clustering.html">19_scale_free_graph_clustering.html</a></p>
<p><a href="20_navigation.html">20_navigation.html</a></p>
<p><a href="21_data_manipulation.html">21_data_manipulation.html</a></p>
<p><a href="22_les_miserables.html">22_les_miserables.html</a></p>
<p><a href="23_hierarchical_layout.html">23_hierarchical_layout.html</a></p>
<p><a href="24_hierarchical_layout_userdefined.html">24_hierarchical_layout_userdefined.html</a></p>
<p><a href="25_physics_configuration.html">25_physics_configuration.html</a></p>
<p><a href="26_staticSmoothCurves.html">26_staticSmoothCurves.html</a></p>
<p><a href="27_world_cup_network.html">27_world_cup_network.html</a></p>
<p><a href="28_world_cup_network_performance.html">28_world_cup_network_performance.html</a></p>
<p><a href="29_neighbourhood_highlight.html">29_neighbourhood_highlight.html</a></p>
<p><a href="30_importing_from_gephi.html">30_importing_from_gephi.html</a></p>
<p><a href="31_manipulation_and_localization.html">31_localization.html</a></p>
<p><a href="32_hierarchicaLayoutMethods.html">32_hierarchicaLayoutMethods.html</a></p>
<p><a href="33_animation.html">33_animation.html</a></p>
<p><a href="34_circular_images.html">34_circular_images.html</a></p>
<p><a href="35_label_stroke.html">35_label_stroke.html</a></p>
<p><a href="36_HTML_in_Nodes.html">36_HTML_in_Nodes.html</a></p>
<p><a href="37_label_alignment.html">37_label_alignment.html</a></p>
<p><a href="38_node_as_icon.html">38_node_as_icon.html</a></p>
<p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
</div>
</body>
</html>

BIN
images/exampleScreenshots/network/1.png View File

Before After
Width: 250  |  Height: 250  |  Size: 29 KiB

BIN
images/exampleScreenshots/network/10.png View File

Before After
Width: 470  |  Height: 470  |  Size: 43 KiB

BIN
images/exampleScreenshots/network/11.png View File

Before After
Width: 581  |  Height: 581  |  Size: 57 KiB

BIN
images/exampleScreenshots/network/12.png View File

Before After
Width: 567  |  Height: 567  |  Size: 89 KiB

BIN
images/exampleScreenshots/network/13.png View File

Before After
Width: 503  |  Height: 503  |  Size: 37 KiB

BIN
images/exampleScreenshots/network/14.png View File

Before After
Width: 250  |  Height: 250  |  Size: 27 KiB

BIN
images/exampleScreenshots/network/15.png View File

Before After
Width: 250  |  Height: 250  |  Size: 37 KiB

BIN
images/exampleScreenshots/network/16.png View File

Before After
Width: 250  |  Height: 250  |  Size: 41 KiB

BIN
images/exampleScreenshots/network/17.png View File

Before After
Width: 250  |  Height: 250  |  Size: 38 KiB

BIN
images/exampleScreenshots/network/18.png View File

Before After
Width: 250  |  Height: 250  |  Size: 37 KiB

BIN
images/exampleScreenshots/network/19.png View File

Before After
Width: 250  |  Height: 250  |  Size: 40 KiB

BIN
images/exampleScreenshots/network/2.png View File

Before After
Width: 250  |  Height: 250  |  Size: 31 KiB

BIN
images/exampleScreenshots/network/20.png View File

Before After
Width: 250  |  Height: 250  |  Size: 37 KiB

BIN
images/exampleScreenshots/network/21.png View File

Before After
Width: 250  |  Height: 250  |  Size: 42 KiB

BIN
images/exampleScreenshots/network/22.png View File

Before After
Width: 250  |  Height: 250  |  Size: 52 KiB

BIN
images/exampleScreenshots/network/23.png View File

Before After
Width: 250  |  Height: 250  |  Size: 28 KiB

BIN
images/exampleScreenshots/network/24.png View File

Before After
Width: 250  |  Height: 250  |  Size: 29 KiB

BIN
images/exampleScreenshots/network/25.png View File

Before After
Width: 250  |  Height: 250  |  Size: 49 KiB

BIN
images/exampleScreenshots/network/26.png View File

Before After
Width: 250  |  Height: 250  |  Size: 30 KiB

BIN
images/exampleScreenshots/network/27.png View File

Before After
Width: 250  |  Height: 250  |  Size: 82 KiB

BIN
images/exampleScreenshots/network/28.png View File

Before After
Width: 250  |  Height: 250  |  Size: 88 KiB

BIN
images/exampleScreenshots/network/29.png View File

Before After
Width: 250  |  Height: 250  |  Size: 97 KiB

BIN
images/exampleScreenshots/network/3.png View File

Before After
Width: 250  |  Height: 250  |  Size: 36 KiB

BIN
images/exampleScreenshots/network/30.png View File

Before After
Width: 250  |  Height: 250  |  Size: 116 KiB

BIN
images/exampleScreenshots/network/31.png View File

Before After
Width: 250  |  Height: 250  |  Size: 37 KiB

BIN
images/exampleScreenshots/network/32.png View File

Before After
Width: 250  |  Height: 250  |  Size: 34 KiB

BIN
images/exampleScreenshots/network/33.png View File

Before After
Width: 250  |  Height: 250  |  Size: 47 KiB

BIN
images/exampleScreenshots/network/34.png View File

Before After
Width: 250  |  Height: 250  |  Size: 48 KiB

BIN
images/exampleScreenshots/network/35.png View File

Before After
Width: 250  |  Height: 250  |  Size: 27 KiB

BIN
images/exampleScreenshots/network/36.png View File

Before After
Width: 250  |  Height: 250  |  Size: 34 KiB

BIN
images/exampleScreenshots/network/37.png View File

Before After
Width: 250  |  Height: 250  |  Size: 33 KiB

BIN
images/exampleScreenshots/network/38.png View File

Before After
Width: 250  |  Height: 250  |  Size: 13 KiB

BIN
images/exampleScreenshots/network/4.png View File

Before After
Width: 250  |  Height: 250  |  Size: 33 KiB

BIN
images/exampleScreenshots/network/5.png View File

Before After
Width: 250  |  Height: 250  |  Size: 38 KiB

BIN
images/exampleScreenshots/network/6.png View File

Before After
Width: 250  |  Height: 250  |  Size: 29 KiB

BIN
images/exampleScreenshots/network/7.png View File

Before After
Width: 384  |  Height: 366  |  Size: 27 KiB

BIN
images/exampleScreenshots/network/8.png View File

Before After
Width: 809  |  Height: 809  |  Size: 65 KiB

BIN
images/exampleScreenshots/network/9.png View File

Before After
Width: 565  |  Height: 565  |  Size: 43 KiB

BIN
images/exampleScreenshots/network/graphviz.png View File

Before After
Width: 250  |  Height: 250  |  Size: 37 KiB

+ 154
- 0
js/imagesNetwork.js View File

@ -0,0 +1,154 @@
// some global vars
var network;
var connectedNodes = [];
var largeNode = undefined;
var NORMAL_SIZE = 60;
var LARGE_SIZE = 60;
var IMAGE_PATH = './images/exampleScreenshots/';
function loadVis(SPACING) {
// getting the sizes of the containers
var linksContainer = document.getElementById('contentContainer');
var networkContainer = document.getElementById('networkContainer');
var linksContainerRect = linksContainer.getBoundingClientRect();
var linksContainerHeight = linksContainerRect.bottom - linksContainerRect.top;
networkContainer.style.height = (linksContainerHeight + LARGE_SIZE) + 'px';
linksContainer.style.marginTop = '-' + (linksContainerHeight + LARGE_SIZE) + 'px';
// constructing nodes and edges from links with class exampleLink
var links = linksContainer.getElementsByTagName('a');
var nodesArray = [];
var edgesArray = [];
var idCounter = 0;
var firstLink = undefined;
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link.className === 'exampleLink') {
var exampleName = link.getAttribute('href').replace('.html','').replace('examples/','');
var linkRect = link.getBoundingClientRect();
var linkWidth = linkRect.right - linkRect.left;
if (firstLink === undefined) {
firstLink = link;
}
nodesArray.push({id:idCounter,
x:link.offsetLeft + linkWidth,
y:link.offsetTop,
color:{
background:'rgba(0,0,0,0.0)',
border:'rgba(70,158,255,0)'
},
shape:'dot',
size:2,
fixed:true
});
nodesArray.push({id:idCounter + 'image',
x:link.offsetLeft + 400 + 100 + (idCounter % 3) * SPACING,
y:link.offsetTop,
color:{
border:'rgba(70,158,255,1)'
},
shadow:{
size:2,
x:0,
y:0
},
shape:'image',
image:IMAGE_PATH+(exampleName)+'.png',
size:NORMAL_SIZE
});
edgesArray.push({from: idCounter, to: idCounter+'image', arrows:'from'});
idCounter += 1;
}
}
// making a dataset.
var nodes = new vis.DataSet(nodesArray);
var edges = new vis.DataSet(edgesArray);
// creating a network
var networkContainer = document.getElementById('networkContainer');
var data = {
nodes: nodes,
edges: edges
};
var options = {
edges:{
color:{inherit:'both'},
smooth:false
},
physics: false,
interaction:{
zoomView:false,
dragView: false
}
};
network = new vis.Network(networkContainer, data, options);
// get the offset or the camera
var firstLinkPos = {x:firstLink.offsetLeft, y:firstLink.offsetTop};
var firstLinkRect = firstLink.getBoundingClientRect();
var firstLinkWidth = firstLinkRect.right - firstLinkRect.left;
var firstLinkHeight = firstLinkRect.bottom - firstLinkRect.top;
var networkContainerRect = networkContainer.getBoundingClientRect();
var networkContainerWidth = networkContainerRect.right - networkContainerRect.left;
var networkContainerHeight = networkContainerRect.bottom - networkContainerRect.top;
var ydiff = linksContainer.offsetTop - networkContainer.offsetTop;
// move the camera
network.moveTo({
scale: 1,
position: network.getPositions([0])[0],
offset: {
x: -0.5 * networkContainerWidth + firstLinkPos.x + firstLinkWidth,
y: -0.5 * networkContainerHeight + firstLinkPos.y + ydiff + 0.5 * firstLinkHeight
},
animation: false
});
// onclick handler
linksContainer.onclick = function (event) {
var nodeUnderCursor = network.getNodeAt({x:event.layerX, y:event.layerY+ydiff});
if (nodeUnderCursor !== undefined) {
var url = nodes.get(nodeUnderCursor).image.replace(IMAGE_PATH, './examples/').replace(".png",".html");
window.location.href = url;
}
}
// throttled mouse move handler
var t0 = new Date().valueOf();
linksContainer.onmousemove = function (event) {
if (new Date().valueOf() - t0 > 60) {
handleMouse(event);
t0 = new Date().valueOf();
}
}
// get a node at a position, select the node, update the dataset
function handleMouse(event) {
var nodeUnderCursor = network.getNodeAt({x:event.layerX, y:event.layerY+ydiff});
if (connectedNodes.length > 0) {
nodes.update([{id: connectedNodes[0], color: {border: 'rgba(70,158,255,0)'}}])
connectedNodes = []
}
if (largeNode !== undefined) {
nodes.update([{id: largeNode, size: NORMAL_SIZE}]);
largeNode = undefined;
}
if (nodeUnderCursor !== undefined) {
connectedNodes = network.getConnectedNodes(nodeUnderCursor);
largeNode = nodeUnderCursor;
nodes.update([{id: largeNode, size: LARGE_SIZE}, {id: connectedNodes[0],color: {border: 'rgba(70,158,255,1)'}}]);
network.selectNodes([nodeUnderCursor]);
}
else {
network.unselectAll();
}
}
}

+ 3
- 156
network_examples.html View File

@ -21,166 +21,13 @@
<script src="./dist/vis.js"></script> <script src="./dist/vis.js"></script>
<link href="./dist/vis.css" rel="stylesheet" type="text/css" /> <link href="./dist/vis.css" rel="stylesheet" type="text/css" />
<link href="./css/examples.css" rel="stylesheet" type="text/css" /> <link href="./css/examples.css" rel="stylesheet" type="text/css" />
<style>
#networkContainer {
margin:0px;
padding:0px;
position:relative;
height: 0px;
width: 100%;
z-index:0;
}
#contentContainer {
margin:0px;
padding:0px;
position:relative;
width: 100%;
z-index:2;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<script>
var network;
var connectedNodes = [];
var largeNode = undefined;
var NORMAL_SIZE = 60;
var LARGE_SIZE = 80;
function loadVis() {
var linksContainer = document.getElementById('contentContainer');
var networkContainer = document.getElementById('networkContainer');
var linksContainerRect = linksContainer.getBoundingClientRect();
var linksContainerHeight = linksContainerRect.bottom - linksContainerRect.top;
networkContainer.style.height = (linksContainerHeight + LARGE_SIZE) + 'px';
linksContainer.style.marginTop = '-' + (linksContainerHeight + LARGE_SIZE) + 'px';
var links = linksContainer.getElementsByTagName('a');
var nodesArray = [];
var edgesArray = [];
var idCounter = 0;
var firstLink = undefined;
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link.className === 'exampleLink') {
var exampleName = link.getAttribute('href').replace('.html','').replace('examples/','');
var linkRect = link.getBoundingClientRect();
var linkWidth = linkRect.right - linkRect.left;
if (firstLink === undefined) {
firstLink = link;
}
nodesArray.push({id:idCounter,
x:link.offsetLeft + linkWidth,
y:link.offsetTop,
color:{
background:'rgba(0,0,0,0.0)',
border:'rgba(70,158,255,0)'
},
shape:'dot',
size:2,
fixed:true
});
nodesArray.push({id:idCounter + 'image',
label:exampleName,
x:link.offsetLeft + 400 + 100 + (idCounter % 3) * 150,
y:link.offsetTop,
color:{
border:'rgba(70,158,255,1)'
},
shadow:{
size:2,
x:0,
y:0
},
shape:'circle',
image:'./images/exampleScreenshots/'+(exampleName)+'.png',
size:NORMAL_SIZE
});
edgesArray.push({from: idCounter, to: idCounter+'image', arrows:'from'});
idCounter += 1;
}
}
var nodes = new vis.DataSet(nodesArray);
var edges = new vis.DataSet(edgesArray);
var networkContainer = document.getElementById('networkContainer');
var data = {
nodes: nodes,
edges: edges
};
var options = {
edges:{
color:{inherit:'both'},
smooth:{enabled:false,type:'continuous'}
},
physics: false,
interaction:{
zoomView:false,
dragView: false
}
};
network = new vis.Network(networkContainer, data, options);
// get the offset
var firstLinkPos = {x:firstLink.offsetLeft, y:firstLink.offsetTop};
var firstLinkRect = firstLink.getBoundingClientRect();
var firstLinkWidth = firstLinkRect.right - firstLinkRect.left;
var firstLinkHeight = firstLinkRect.bottom - firstLinkRect.top;
var networkContainerRect = networkContainer.getBoundingClientRect();
var networkContainerWidth = networkContainerRect.right - networkContainerRect.left;
var networkContainerHeight = networkContainerRect.bottom - networkContainerRect.top;
var ydiff = linksContainer.offsetTop - networkContainer.offsetTop;
network.moveTo({
scale: 1,
position: network.getPositions([0])[0],
offset: {
x: -0.5 * networkContainerWidth + firstLinkPos.x + firstLinkWidth,
y: -0.5 * networkContainerHeight + firstLinkPos.y + ydiff + 0.5 * firstLinkHeight
},
animation: false
});
linksContainer.onclick = function (event) {
var nodeUnderCursor = network.getNodeAt({x:event.layerX, y:event.layerY+ydiff});
if (connectedNodes.length > 0) {
nodes.update([{id: connectedNodes[0], color: {border: 'rgba(70,158,255,0)'}}])
connectedNodes = []
}
if (largeNode !== undefined) {
nodes.update([{id: largeNode, size:NORMAL_SIZE}]);
largeNode = undefined;
}
if (nodeUnderCursor !== undefined) {
connectedNodes = network.getConnectedNodes(nodeUnderCursor);
largeNode = nodeUnderCursor;
nodes.update([{id:connectedNodes[0], color:{border:'rgba(70,158,255,1)'}}]);
nodes.update([{id:largeNode, size:LARGE_SIZE}]);
largeNode = nodeUnderCursor;
network.selectNodes([nodeUnderCursor]);
}
else {
network.unselectAll();
}
}
}
</script>
<script src="./js/imagesNetwork.js"></script>
<link href="./css/imagesNetwork.css" rel="stylesheet" type="text/css" />
</head> </head>
<body onload="loadVis();">
<body onload="loadVis(150);">
<div class="navbar-wrapper"> <div class="navbar-wrapper">

+ 60
- 56
timeline_examples.html View File

@ -22,8 +22,10 @@
<link href="./dist/vis.css" rel="stylesheet" type="text/css" /> <link href="./dist/vis.css" rel="stylesheet" type="text/css" />
<link href="./css/examples.css" rel="stylesheet" type="text/css" /> <link href="./css/examples.css" rel="stylesheet" type="text/css" />
<script src="./js/imagesNetwork.js"></script>
<link href="./css/imagesNetwork.css" rel="stylesheet" type="text/css" />
</head> </head>
<body>
<body onload="loadVis(220);">
<div class="navbar-wrapper"> <div class="navbar-wrapper">
@ -57,61 +59,63 @@
</div> </div>
<div class="contentWrapper"> <div class="contentWrapper">
<h1>Timeline Examples</h1>
This page contains examples which show how to use Timeline. For the documentation, please click the button below: <br><br>
<a class="btn btn-primary" href="./docs/timeline" role="button">View docs »</a>
<h3>basic usage</h3>
<a class='exampleLink' href="examples/timeline/basicUsage.html">basic usage</a><br />
<h3>interaction</h3>
<a class='exampleLink' href="examples/timeline/interaction/animateWindow.html">animate window</a><br />
<a class='exampleLink' href="examples/timeline/interaction/clickToUse.html">click to use</a><br />
<a class='exampleLink' href="examples/timeline/interaction/eventListeners.html">event listeners</a><br />
<a class='exampleLink' href="examples/timeline/interaction/limitMoveAndZoom.html">limit move and zoom of the window</a><br />
<a class='exampleLink' href="examples/timeline/interaction/navigationMenu.html">navigation menu</a><br />
<a class='exampleLink' href="examples/timeline/interaction/setSelection.html">set selection</a><br />
<h3>editing</h3>
<a class='exampleLink' href="examples/timeline/editing/customSnappingOfItems.html">custom snapping of items</a><br />
<a class='exampleLink' href="examples/timeline/editing/editingItems.html">editing items</a><br />
<a class='exampleLink' href="examples/timeline/editing/editingItemsCallbacks.html">editing items, manipulate using callbacks</a><br />
<a class='exampleLink' href="examples/timeline/editing/updateDataOnEvent.html">update data on event</a><br />
<h3>items</h3>
<a class='exampleLink' href="examples/timeline/items/htmlContents.html">HTML contents</a><br />
<a class='exampleLink' href="examples/timeline/items/pointItems.html">point items</a><br />
<a class='exampleLink' href="examples/timeline/items/backgroundAreas.html">background areas</a><br />
<a class='exampleLink' href="examples/timeline/items/backgroundAreasWithGroups.html">background areas with groups</a><br />
<a class='exampleLink' href="examples/timeline/items/itemOrdering.html">item ordering</a><br />
<a class='exampleLink' href="examples/timeline/items/rangeOverflowItem.html">range overflow item</a><br />
<h3>groups</h3>
<a class='exampleLink' href="examples/timeline/groups/groups.html">groups</a><br />
<a class='exampleLink' href="examples/timeline/groups/groupsOrdering.html">ordering of groups</a><br />
<a class='exampleLink' href="examples/timeline/groups/subgroups.html">subgroups</a><br />
<h3>styling</h3>
<a class='exampleLink' href="examples/timeline/styling/itemClassNames.html">item class names</a><br />
<a class='exampleLink' href="examples/timeline/styling/itemTemplates.html">item templates</a><br />
<a class='exampleLink' href="examples/timeline/styling/axisOrientation.html">axis orientation</a><br />
<a class='exampleLink' href="examples/timeline/styling/customCss.html">custom CSS</a><br />
<a class='exampleLink' href="examples/timeline/styling/gridStyling.html">grid styling</a><br />
<h3>data handling</h3>
<a class='exampleLink' href="examples/timeline/dataHandling/dataSerialization.html">data serialization</a><br />
<a class='exampleLink' href="examples/timeline/dataHandling/loadExternalData.html">load external data</a><br />
<h3>other</h3>
<a class='exampleLink' href="examples/timeline/other/customTimeBars.html">custom time bars</a><br />
<a class='exampleLink' href="examples/timeline/other/dataAttributes.html">data attributes</a><br />
<a class='exampleLink' href="examples/timeline/other/dataAttributesAll.html">all data attributes</a><br />
<a class='exampleLink' href="examples/timeline/other/hidingPeriods.html">hiding periods</a><br />
<a class='exampleLink' href="examples/timeline/other/localization.html">localization</a><br />
<a class='exampleLink' href="examples/timeline/other/performance.html">performance</a><br />
<a class='exampleLink' href="examples/timeline/other/groupsPerformance.html">perforance of groups</a><br />
<a class='exampleLink' href="examples/timeline/other/requirejs/requirejs_example.html">require.js example</a><br />
<div id="networkContainer"></div>
<div id="contentContainer">
<h1>Timeline Examples</h1>
This page contains examples which show how to use Timeline. For the documentation, please click the button below: <br><br>
<a class="btn btn-primary" href="./docs/timeline" role="button">View docs »</a>
<h3>basic usage</h3>
<a class='exampleLink' href="examples/timeline/basicUsage.html">basic usage</a><br />
<h3>interaction</h3>
<a class='exampleLink' href="examples/timeline/interaction/animateWindow.html">animate window</a><br />
<a class='exampleLink' href="examples/timeline/interaction/clickToUse.html">click to use</a><br />
<a class='exampleLink' href="examples/timeline/interaction/eventListeners.html">event listeners</a><br />
<a class='exampleLink' href="examples/timeline/interaction/limitMoveAndZoom.html">limit move and zoom of the window</a><br />
<a class='exampleLink' href="examples/timeline/interaction/navigationMenu.html">navigation menu</a><br />
<a class='exampleLink' href="examples/timeline/interaction/setSelection.html">set selection</a><br />
<h3>editing</h3>
<a class='exampleLink' href="examples/timeline/editing/customSnappingOfItems.html">custom snapping of items</a><br />
<a class='exampleLink' href="examples/timeline/editing/editingItems.html">editing items</a><br />
<a class='exampleLink' href="examples/timeline/editing/editingItemsCallbacks.html">editing items, manipulate using callbacks</a><br />
<a class='exampleLink' href="examples/timeline/editing/updateDataOnEvent.html">update data on event</a><br />
<h3>items</h3>
<a class='exampleLink' href="examples/timeline/items/htmlContents.html">HTML contents</a><br />
<a class='exampleLink' href="examples/timeline/items/pointItems.html">point items</a><br />
<a class='exampleLink' href="examples/timeline/items/backgroundAreas.html">background areas</a><br />
<a class='exampleLink' href="examples/timeline/items/backgroundAreasWithGroups.html">background areas with groups</a><br />
<a class='exampleLink' href="examples/timeline/items/itemOrdering.html">item ordering</a><br />
<a class='exampleLink' href="examples/timeline/items/rangeOverflowItem.html">range overflow item</a><br />
<h3>groups</h3>
<a class='exampleLink' href="examples/timeline/groups/groups.html">groups</a><br />
<a class='exampleLink' href="examples/timeline/groups/groupsOrdering.html">ordering of groups</a><br />
<a class='exampleLink' href="examples/timeline/groups/subgroups.html">subgroups</a><br />
<h3>styling</h3>
<a class='exampleLink' href="examples/timeline/styling/itemClassNames.html">item class names</a><br />
<a class='exampleLink' href="examples/timeline/styling/itemTemplates.html">item templates</a><br />
<a class='exampleLink' href="examples/timeline/styling/axisOrientation.html">axis orientation</a><br />
<a class='exampleLink' href="examples/timeline/styling/customCss.html">custom CSS</a><br />
<a class='exampleLink' href="examples/timeline/styling/gridStyling.html">grid styling</a><br />
<h3>data handling</h3>
<a class='exampleLink' href="examples/timeline/dataHandling/dataSerialization.html">data serialization</a><br />
<a class='exampleLink' href="examples/timeline/dataHandling/loadExternalData.html">load external data</a><br />
<h3>other</h3>
<a class='exampleLink' href="examples/timeline/other/customTimeBars.html">custom time bars</a><br />
<a class='exampleLink' href="examples/timeline/other/dataAttributes.html">data attributes</a><br />
<a class='exampleLink' href="examples/timeline/other/dataAttributesAll.html">all data attributes</a><br />
<a class='exampleLink' href="examples/timeline/other/hidingPeriods.html">hiding periods</a><br />
<a class='exampleLink' href="examples/timeline/other/localization.html">localization</a><br />
<a class='exampleLink' href="examples/timeline/other/performance.html">performance</a><br />
<a class='exampleLink' href="examples/timeline/other/groupsPerformance.html">perforance of groups</a><br />
<a class='exampleLink' href="examples/timeline/other/requirejs/requirejs_example.html">require.js example</a><br />
</div>
</div> </div>
<br /> <br />
<br /> <br />

Loading…
Cancel
Save