<!doctype html>
							 | 
						|
								<html>
							 | 
						|
								<head>
							 | 
						|
								    <title>Graph | DOT Language</title>
							 | 
						|
								
							 | 
						|
								    <script type="text/javascript" src="../../vis.js"></script>
							 | 
						|
								
							 | 
						|
								    <style type="text/css">
							 | 
						|
								        html, body, #graph {
							 | 
						|
								            width: 100%;
							 | 
						|
								            height: 100%;
							 | 
						|
								            padding: 0;
							 | 
						|
								            margin: 0;
							 | 
						|
								        }
							 | 
						|
								    </style>
							 | 
						|
								</head>
							 | 
						|
								<body>
							 | 
						|
								<div id="graph"></div>
							 | 
						|
								
							 | 
						|
								<script type="text/javascript">
							 | 
						|
								    // create a network view
							 | 
						|
								    var graph = new vis.Graph(document.getElementById('graph'));
							 | 
						|
								
							 | 
						|
								    // parse data in DOT-notation
							 | 
						|
								    var dot = 'digraph {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
							 | 
						|
								    var data = vis.Graph.util.DOTToGraph(dot);
							 | 
						|
								
							 | 
						|
								    // draw the data
							 | 
						|
								    graph.draw(data.nodes, data.edges, data.options);
							 | 
						|
								
							 | 
						|
								    // resize the network when window resizes
							 | 
						|
								    window.onresize = function () {
							 | 
						|
								        graph.redraw()
							 | 
						|
								    };
							 | 
						|
								</script>
							 | 
						|
								</body>
							 | 
						|
								</html>
							 |