diff options
Diffstat (limited to 'www/lib/vis/examples/network/other/performance.html')
| -rw-r--r-- | www/lib/vis/examples/network/other/performance.html | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/www/lib/vis/examples/network/other/performance.html b/www/lib/vis/examples/network/other/performance.html new file mode 100644 index 00000000..0b3ea663 --- /dev/null +++ b/www/lib/vis/examples/network/other/performance.html @@ -0,0 +1,91 @@ +<!doctype html> +<html> +<head> + <title>Network | Random nodes</title> + + <style type="text/css"> + body { + font: 10pt sans; + } + #mynetwork { + width: 600px; + height: 600px; + border: 1px solid lightgray; + } + + #message { + color:darkred; + max-width:600px; + font-size:16px; + cursor:pointer; + text-decoration: underline; + } + </style> + + <script type="text/javascript" src="../exampleUtil.js"></script> + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> + + <script type="text/javascript"> + var nodes = null; + var edges = null; + var network = null; + var setSmooth = false; + + function destroy() { + if (network !== null) { + network.destroy(); + network = null; + } + } + + function draw() { + destroy(); + var nodeCount = document.getElementById('nodeCount').value; + if (nodeCount > 100) { + document.getElementById("message").innerHTML = '<a onclick="disableSmoothCurves()">You may want to disable dynamic smooth curves for better performance with a large amount of nodes and edges. Click here to disable them.</a>'; + } + else if (setSmooth === false) { + document.getElementById("message").innerHTML = ''; + } + // create a network + var container = document.getElementById('mynetwork'); + var data = getScaleFreeNetwork(nodeCount); + var options = { + physics: { stabilization: false } + }; + network = new vis.Network(container, data, options); + } + + function disableSmoothCurves() { + setSmooth = true; + network.setOptions({edges:{smooth:{type:'continuous'}}}); + document.getElementById("message").innerHTML = '<a onclick="enableSmoothCurves()">Click here to reenable the dynamic smooth curves.</a>'; + } + + function enableSmoothCurves() { + setSmooth = false; + document.getElementById("message").innerHTML = '<a onclick="disableSmoothCurves()">You may want to disable dynamic smooth curves for better performance with a large amount of nodes and edges. Click here to disable them.</a>'; + network.setOptions({edges:{smooth:{type:'dynamic'}}}); + } + + + </script> + <script src="../../googleAnalytics.js"></script> +</head> +<body onload="draw();"> +<p> + Generate a random network with nodes and edges. +</p> +<p> + <form onsubmit="draw(); return false;"> + <label for="nodeCount">Number of nodes:</label> + <input id="nodeCount" type="text" value="25" style="width: 50px;"> + <input type="button" value="Go" onclick="draw()"> +</form> +</p> +<span id="message"></span> +<div id="mynetwork"></div> + +</body> +</html> |
