visjs-network
Version:
A dynamic, browser-based network visualization library.
135 lines (134 loc) • 3.35 kB
HTML
<html>
<head>
<title>Network | DataSet</title>
<style type='text/css'>
html, body {
font: 11pt arial;
}
h1 {
font-size: 150%;
margin: 5px 0;
}
h2 {
font-size: 100%;
margin: 5px 0;
}
table.view {
width: 100%;
}
table td {
vertical-align: top;
}
table table {
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
}
table table td {
vertical-align: middle;
}
input[type=text], pre {
border: 1px solid lightgray;
}
pre {
margin: 0;
padding: 5px;
font-size: 10pt;
}
#network {
width: 100%;
height: 400px;
border: 1px solid lightgray;
}
</style>
<script type='text/javascript' src='../../../dist/vis.js'></script>
<link href='../../../dist/vis-network.min.css' rel='stylesheet' type='text/css'/>
<script src='./index.js' type='text/javascript'></script>
</head>
<body onload='draw();'>
<p>
This example demonstrates dynamically adding, updating and removing nodes
and edges using a DataSet.
</p>
<h1>Adjust</h1>
<table>
<tr>
<td>
<h2>Node</h2>
<table>
<tr>
<td></td>
<td><label for='node-id'>Id</label></td>
<td><input id='node-id' type='text' value='6'></td>
</tr>
<tr>
<td></td>
<td><label for='node-label'>Label</label></td>
<td><input id='node-label' type='text' value='Node 6'></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id='node-add' onclick='addNode();'>Add</button>
<button id='node-update' onclick='updateNode();'>Update</button>
<button id='node-remove' onclick='removeNode();'>Remove</button>
</td>
</tr>
</table>
</td>
<td>
<h2>Edge</h2>
<table>
<tr>
<td></td>
<td><label for='edge-id'>Id</label></td>
<td><input id='edge-id' type='text' value='5'></td>
</tr>
<tr>
<td></td>
<td><label for='edge-from'>From</label></td>
<td><input id='edge-from' type='text' value='3'></td>
</tr>
<tr>
<td></td>
<td><label for='edge-to'>To</label></td>
<td><input id='edge-to' type='text' value='4'></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id='edge-add' onclick='addEdge();'>Add</button>
<button id='edge-update' onclick='updateEdge();'>Update</button>
<button id='edge-remove' onclick='removeEdge();'>Remove</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
<h1>View</h1>
<table class='view'>
<colgroup>
<col width='25%'>
<col width='25%'>
<col width='50%'>
</colgroup>
<tr>
<td>
<h2>Nodes</h2>
<pre id='nodes'></pre>
</td>
<td>
<h2>Edges</h2>
<pre id='edges'></pre>
</td>
<td>
<h2>Network</h2>
<div id='network'></div>
</td>
</tr>
</table>
</body>
</html>