<!doctype html> <html> <head> <title>Network | DOT language playground</title> <script type="text/javascript" src="../../dist/vis.js"></script> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body, html { font: 10pt sans; width: 100%; height: 100%; padding: 0; margin: 0; color: #4d4d4d; } #frame { width: 100%; height: 99%; } #frame td { padding: 10px; height: 100%; } #error { color: red; } #data { width: 100%; height: 100%; border: 1px solid #d3d3d3; } #mynetwork { float: left; width: 100%; height: 100%; border: 1px solid #d3d3d3; box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; } textarea.example { display: none; } </style> </head> <body onload="drawExample('example1')"> <table id="frame"> <col width="50%"> <col width="50%"> <tr> <td colspan="2" style="height: 50px;"> <h1>DOT language playground</h1> <div> <a href="javascript: drawExample('example1')">example 1</a> <a href="javascript: drawExample('example2')">example 2</a> <a href="javascript: drawExample('example3')">example 3</a> </div> <div> <br> <button id="draw">Draw</button> <span id="error"></span> </div> </td> </tr> <tr> <td> <textarea id="data"></textarea> </td> <td> <div id="mynetwork"></div> </td> </tr> </table> <script type="text/javascript"> var network, data; var btnDraw = document.getElementById('draw'); var txtData = document.getElementById('data'); var txtError = document.getElementById('error'); btnDraw.onclick = draw; // resize the network when window resizes window.onresize = function () { network.redraw() }; function destroy() { if (network !== null) { network.destroy(); network = null; } } // parse and draw the data function draw () { destroy(); try { txtError.innerHTML = ''; // Provide a string with data in DOT language data = { dot: txtData.value }; // create a network var container = document.getElementById('mynetwork'); var options = {}; network = new vis.Network(container, data, options); } catch (err) { // set the cursor at the position where the error occurred var match = /\(char (.*)\)/.exec(err); if (match) { var pos = Number(match[1]); if(txtData.setSelectionRange) { txtData.focus(); txtData.setSelectionRange(pos, pos); } } // show an error message txtError.innerHTML = err.toString(); } } /** * Draw an example * @param {String} id HTML id of the textarea containing the example code */ function drawExample(id) { txtData.value = document.getElementById(id).value; draw(); } </script> <textarea id="example1" class="example"> 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> <textarea id="example2" class="example"> digraph topology { node[shape=circle fontSize=12] edge[length=170 fontSize=12] "10.0.255.1" -> "10.0.255.3"[label="1.000"]; "10.0.255.1" -> "10.0.255.2"[label="1.000"]; "10.0.255.1" -> "10.0.255.2"[label="1.000"]; "10.0.255.1" -> "10.0.255.3"[label="1.000"]; "10.0.255.2" -> "10.0.255.1"[label="1.000"]; "10.0.255.2" -> "10.0.255.3"[label="1.000"]; "10.0.255.3" -> "10.0.255.1"[label="1.000"]; "10.0.255.3" -> "10.0.255.2"[label="1.000"]; "10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid]; "10.0.3.0/24"[shape=box]; "10.0.255.2" -> "10.0.2.0/24"[label="HNA"]; "10.0.2.0/24"[shape=box]; "10.0.255.1" -> "10.0.1.0/24"[label="HNA"]; "10.0.1.0/24"[shape=box]; } </textarea> <textarea id="example3" class="example"> digraph G { // note: not all attributes are recognized and supported by Network // unrecognized attributes are ignored node[width=.25,height=.375,fontsize=15] node [shape=filled fillcolor=#F1AAF0] 0-> 0 ; 1-> 1 ; 2-> 2 ; 3-> 3 ; 4-> 4 ; 5-> 5 ; 6-> 6 ; 7-> 5 ; 8-> 8 ; 9-> 9 ; 10-> 10 ; 11-> 10 ; 12-> 12 ; 13-> 5 ; 14-> 10 ; 15-> 0 ; } </textarea> </body> </html>