<html>
<head>
<!-- jquery cdn -->
integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
crossorigin="anonymous"></script>
<!-- vis js -->
<script type="text/javascript" src="vis.min.js"></script>
<link type="text/css" href="vis.min.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- the graph will be rendered here -->
<div id="div_vis_graph" width="100%" height="100%"></div>
<script type="text/javascript">
$(document).ready( function() {
// graph container
var container = document.getElementById("div_vis_graph");
// raw data for nodes
var data_nodes = [
{id: 1, label: 'Num 1', title: 'N1 Title'},
{id: 2, label: 'Num 2', title: 'N2 Title'},
{id: 3, label: 'Num 3', title: 'N3 Title'},
{id: 4, label: 'Num 4', title: 'N4 Title'},
{id: 5, label: 'Num 5', title: 'N5 Title'},
{id: 6, label: 'Num 6', title: 'N6 Title'},
{id: 7, label: 'Num 7', title: 'N7 Title'}
];
// raw data for edges
var data_edges = [
{from: 1, to: 2, arrows: 'to'},
{from: 1, to: 3, arrows: 'to, from'},
{from: 1, to: 4, arrows: 'to'},
{from: 2, to: 3, arrows: 'to'},
{from: 2, to: 4, arrows: 'to'},
{from: 3, to: 5, arrows: 'to from'},
{from: 5, to: 6, arrows: 'to'},
{from: 5, to: 7, arrows: 'to'}
];
// translate raw data to vis format
var nodes = new vis.DataSet(data_nodes);
var edges = new vis.DataSet(data_edges);
// setup whole data (node and edge)
var data = {
nodes : nodes,
edges : edges
};
// other options
var opt = {
layout : {
improvedLayout: false
},
height: "100%",
width : "100%"
};
// render it !
var network = new vis.Network(container, data, opt);
});
</script>
</body>
</html>
