summaryrefslogtreecommitdiff
path: root/www/lib/vis/examples/network/edgeStyles/smoothWorldCup.html
diff options
context:
space:
mode:
Diffstat (limited to 'www/lib/vis/examples/network/edgeStyles/smoothWorldCup.html')
-rw-r--r--www/lib/vis/examples/network/edgeStyles/smoothWorldCup.html97
1 files changed, 97 insertions, 0 deletions
diff --git a/www/lib/vis/examples/network/edgeStyles/smoothWorldCup.html b/www/lib/vis/examples/network/edgeStyles/smoothWorldCup.html
new file mode 100644
index 00000000..12846011
--- /dev/null
+++ b/www/lib/vis/examples/network/edgeStyles/smoothWorldCup.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF8">
+ <title>Network | Static smooth curves - World Cup Network</title>
+
+ <script type="text/javascript" src="../../../dist/vis.js"></script>
+ <link type="text/css" rel="stylesheet" href="../../../dist/vis.css">
+
+ <script src="../datasources/WorldCup2014.js"></script>
+
+ <style type="text/css">
+ #mynetwork {
+ width: 800px;
+ height: 800px;
+ border: 1px solid lightgray;
+ }
+ #optionsContainer {
+ height:280px;
+ }
+ </style>
+ <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+
+<h2>Static smooth curves - World Cup Network</h2>
+
+<div style="width:700px; font-size:14px;">
+ The static smooth curves are based only on the positions of the connected
+ nodes.
+ There are multiple ways to determine the way this curve is drawn.
+ This example shows the effect of the different types on a large network.
+ <br/> <br/>
+ Also shown in this example is the inheritColor option of the edges as well as
+ the roundness factor. Because the physics has been disabled, the dynamic smooth curves do not work here.
+</div>
+
+<div id="optionsContainer"></div>
+
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+ var network;
+
+ function redrawAll() {
+ var container = document.getElementById('mynetwork');
+ var options = {
+ nodes: {
+ shape: 'dot',
+ scaling: {
+ min: 10,
+ max: 30
+ },
+ font: {
+ size: 12,
+ face: 'Tahoma'
+ }
+ },
+ edges: {
+ color:{inherit:true},
+ width: 0.15,
+ smooth: {
+ type: 'continuous'
+ }
+ },
+ interaction: {
+ hideEdgesOnDrag: true,
+ tooltipDelay: 200
+ },
+ configure: {
+ filter: function (option, path) {
+ if (option === 'inherit') {return true;}
+ if (option === 'type' && path.indexOf("smooth") !== -1) {return true;}
+ if (option === 'roundness') {return true;}
+ if (option === 'hideEdgesOnDrag') {return true;}
+ if (option === 'hideNodesOnDrag') {return true;}
+ return false;
+ },
+ container: document.getElementById('optionsContainer'),
+ showButton: false
+ },
+ physics: false
+ };
+
+ var data = {nodes:nodes, edges:edges};
+ // Note: data is coming from ./data/WorldCup2014.js
+ network = new vis.Network(container, data, options);
+ }
+
+ redrawAll()
+
+</script>
+
+</body>
+</html>