<!doctype html> <html> <head> <title>Network | DOT language playground</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="../../../../dist/vis.js"></script> <link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body, html { font: 10pt sans; line-height: 1.5em;; width: 100%; height: 100%; padding: 0; margin: 0; color: #4d4d4d; box-sizing: border-box; overflow: hidden; } #header { margin: 0; padding: 10px; box-sizing: border-box; } #contents { height: 100%; margin: 0; padding: 0; box-sizing: border-box; position: relative; } #left, #right { position: absolute; width: 50%; height: 100%; margin: 0; padding: 10px; box-sizing: border-box; display: inline-block; } #left { top: 0; left: 0; } #right { top: 0; right: 0; } #error { color: red; } #data { width: 100%; height: 100%; border: 1px solid #d3d3d3; box-sizing: border-box; resize: none; } #draw { padding: 5px 15px; } #mynetwork { width: 100%; height: 100%; border: 1px solid #d3d3d3; box-sizing: border-box; } a:hover { color: red; } </style> </head> <body> <div id="header"> <h1>DOT language playground</h1> <p> Play around with the DOT language in the textarea below, or select one of the following examples: </p> <p style="margin-left: 30px;"> <a href="#" class="example" data-url="data/simple.gv.txt">simple</a>, <a href="#" class="example" data-url="data/computer_network.gv.txt">computer network</a>, <a href="#" class="example" data-url="data/cellular_automata.gv.txt">cellular automata</a>, <a href="#" class="example" data-url="graphvizGallery/fsm.gv.txt">fsm *</a>, <a href="#" class="example" data-url="graphvizGallery/hello.gv.txt">hello *</a>, <a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</a>, <a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</a>, <a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</a>, <a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</a>, <a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</a>, <a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</a>, <a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</a>, <a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</a> </p> <p> The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">GraphViz gallery</a>. </p> <div> <button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button> <span id="error"></span> </div> </div> <div id="contents"> <div id="left"> <textarea id="data"> digraph { node [shape=circle fontsize=16] edge [length=100, color=gray, fontcolor=black] A -> A[label=0.5]; B -> B[label=1.2] -> C[label=0.7] -- A; B -> D; D -> {B; C} D -> E[label=0.2]; F -> F; A [ fontcolor=white, color=red, ] } </textarea> </div> <div id="right"> <div id="mynetwork"></div> </div> </div> <script type="text/javascript"> // create a network var container = document.getElementById('mynetwork'); var options = { physics: { stabilization: false, barnesHut: { springLength: 200 } } }; var data = {}; var network = new vis.Network(container, data, options); $('#draw').click(draw); $('a.example').click(function (event) { var url = $(event.target).data('url'); $.get(url) .done(function(dotData) { $('#data').val(dotData); draw(); }) .fail(function () { $('#error').html('Error: Cannot fetch the example data because of security restrictions in JavaScript. Run the example from a server instead of as a local file to resolve this problem. Alternatively, you can copy/paste the data of DOT graphs manually in the textarea below.'); resize(); }); }); $(window).resize(resize); $(window).load(draw); $('#data').keydown(function (event) { if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter draw(); event.stopPropagation(); event.preventDefault(); } }); function resize() { $('#contents').height($('body').height() - $('#header').height() - 30); } function draw () { try { resize(); $('#error').html(''); // Provide a string with data in DOT language data = vis.network.convertDot($('#data').val()); network.setData(data); } catch (err) { // set the cursor at the position where the error occurred var match = /\(char (.*)\)/.exec(err); if (match) { var pos = Number(match[1]); var textarea = $('#data')[0]; if(textarea.setSelectionRange) { textarea.focus(); textarea.setSelectionRange(pos, pos); } } // show an error message $('#error').html(err.toString()); } } </script> </body> </html>