<!DOCTYPE html>
							 | 
						|
								<html>
							 | 
						|
								<head>
							 | 
						|
								    <meta charset="utf-8">
							 | 
						|
								    <title>JS Bin</title>
							 | 
						|
								    <script type="text/javascript" src="../dist/vis.js"></script> <!-- network handling framework -->
							 | 
						|
								    <link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
							 | 
						|
								    <style type="text/css">
							 | 
						|
								        #network{
							 | 
						|
								            width: 1200px;
							 | 
						|
								            height: 800px;
							 | 
						|
								            border: 1px solid lightgray;
							 | 
						|
								        }
							 | 
						|
								    </style>
							 | 
						|
								</head>
							 | 
						|
								<body>
							 | 
						|
								<h1>Network Test</h1>
							 | 
						|
								<div id="network"></div>
							 | 
						|
								
							 | 
						|
								<script type="text/javascript">
							 | 
						|
								    // create a network
							 | 
						|
								    var container = document.getElementById('network');
							 | 
						|
								    var nodes = new vis.DataSet([]);
							 | 
						|
								    var edges = new vis.DataSet([]);
							 | 
						|
								
							 | 
						|
								    // create a network
							 | 
						|
								    var data = {
							 | 
						|
								        nodes: nodes,
							 | 
						|
								        edges: edges
							 | 
						|
								    };
							 | 
						|
								//    data.nodes.update({id: 0, label: 'node 1'});
							 | 
						|
								    var fontFace = 'roboto,"helvetica neue","segoe ui",arial,helvetica,sans-serif';
							 | 
						|
								    var options = {
							 | 
						|
								        autoResize: true,
							 | 
						|
								        interaction: {
							 | 
						|
								            hover: true
							 | 
						|
								        },
							 | 
						|
								        width: '100%',
							 | 
						|
								        height: '400px',
							 | 
						|
								        nodes: {
							 | 
						|
								            shape: 'dot',
							 | 
						|
								            font: {
							 | 
						|
								                size: 13,
							 | 
						|
								                face: fontFace,
							 | 
						|
								                strokeColor: '#fff',
							 | 
						|
								                strokeWidth: 5
							 | 
						|
								            }
							 | 
						|
								        }
							 | 
						|
								    };
							 | 
						|
								    var network = new vis.Network(container, data, options);
							 | 
						|
								
							 | 
						|
								    function info(s) {
							 | 
						|
								        document.getElementById('num').innerText += s + '\n';
							 | 
						|
								    }
							 | 
						|
								
							 | 
						|
								
							 | 
						|
								
							 | 
						|
								
							 | 
						|
								
							 | 
						|
								
							 | 
						|
								</script>
							 | 
						|
								</body>
							 | 
						|
								</html>
							 |