<!doctype html>
<html>
<head>
<title>Graph | DOT language playground</title>
<script type="text/javascript" src="../../vis.js"></script>
<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;
}
#mygraph {
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="mygraph"></div>
</td>
</tr>
</table>
<script type="text/javascript">
var graph, data;
var btnDraw = document.getElementById('draw');
var txtData = document.getElementById('data');
var txtError = document.getElementById('error');
btnDraw.onclick = draw;
// resize the graph when window resizes
window.onresize = function () {
graph.redraw()
};
// parse and draw the data
function draw () {
try {
txtError.innerHTML = '';
// Provide a string with data in DOT language
data = {
dot: txtData.value
};
// create a graph
var container = document.getElementById('mygraph');
var options = {};
graph = new vis.Graph(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>