<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="../../../dist/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> <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>