vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

88 lines
2.8 KiB

<html>
<head>
<title>Graph | Graphviz Gallery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../../../vis.js"></script>
<style type="text/css">
p {
width: 600px;
}
html, body, select {
font: 11pt arial;
}
#mygraph {
width: 100%;
height: 600px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<script>
if (location.href.substr(0, 5) == 'file:') {
document.write(
'<p style="color: red;">' +
'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 load DOT graphs in ' +
'the <a href="../15_dot_language_playground.html" ' +
'style="color:red;">playground</a>.' +
'</p>');
}
</script>
<p>
The following examples are unmodified copies from the
<a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>.
</p>
<p>
Note that some style attributes of Graphviz are not supported by vis.js,
and that vis.js offers options not supported by Graphviz (which could make
some examples look much nicer).
</p>
<p>
<label for="url">Select an example:</label>
<select id="url" onchange="loadData()">
<option value="data/fsm.gv.txt">fsm</option>
<option value="data/hello.gv.txt">hello</option>
<option value="data/process.gv.txt">process</option>
<option value="data/siblings.gv.txt">siblings</option>
<option value="data/softmaint.gv.txt">softmaint</option>
<option value="data/traffic_lights.gv.txt">traffic_lights</option>
<option value="data/transparency.gv.txt">transparency</option>
<option value="data/twopi2.gv.txt">twopi2</option>
<option value="data/unix.gv.txt">unix</option>
<!-- TODO: get example world working (needs some extension of the DOT parser)
<option value="data/world.gv.txt">world</option>
-->
</select>
</p>
<div id="mygraph"></div>
<script type="text/javascript">
var container = document.getElementById('mygraph');
var url = document.getElementById('url');
var graph = new vis.Graph(container);
function loadData () {
$.ajax({
type: "GET",
url: url.value
}).done(function(data) {
graph.setOptions({
stabilize: false
});
graph.setData( {
dot: data
});
});
}
loadData();
</script>
</body>
</html>