bezany/vis.html

## vis.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>DOT viewer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css'>
    <style>
        #mynetwork {
            width: calc(100vw - 10px);
            height: calc(100vh - 40px);
            border: 1px solid lightgray;
        }

        body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <input type='file' accept='text/plain' onchange='openFile(event)'><br>
    <div id="mynetwork"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<script type="text/javascript">
    function openFile (event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function(){
          var text = reader.result;
          showGraph(text)
        };
        reader.readAsText(input.files[0]);
    };

    function showGraph (dotText) {
        var container = document.getElementById('mynetwork');

        // provide data in the DOT language
        var parsedData = vis.network.convertDot(dotText);

        var data = {
        nodes: parsedData.nodes,
        edges: parsedData.edges
        }

        var options = parsedData.options;

        // create a network
        var network = new vis.Network(container, data, options);
    }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>DOT viewer</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css'>
	<style>
	#mynetwork {
	width: calc(100vw - 10px);
	height: calc(100vh - 40px);
	border: 1px solid lightgray;
	}

	body {
	padding: 0;
	margin: 0;
	}
	</style>
	</head>
	<body>
	<input type='file' accept='text/plain' onchange='openFile(event)'><br>
	<div id="mynetwork"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
	<script type="text/javascript">
	function openFile (event) {
	var input = event.target;

	var reader = new FileReader();
	reader.onload = function(){
	var text = reader.result;
	showGraph(text)
	};
	reader.readAsText(input.files[0]);
	};

	function showGraph (dotText) {
	var container = document.getElementById('mynetwork');

	// provide data in the DOT language
	var parsedData = vis.network.convertDot(dotText);

	var data = {
	nodes: parsedData.nodes,
	edges: parsedData.edges
	}

	var options = parsedData.options;

	// create a network
	var network = new vis.Network(container, data, options);
	}
	</script>
	</body>
	</html>