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.

79 lines
2.4 KiB

  1. <html>
  2. <head>
  3. <title>Graph | Graphviz Gallery</title>
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  5. <script type="text/javascript" src="../../../vis.js"></script>
  6. <style type="text/css">
  7. p {
  8. width: 600px;
  9. }
  10. html, body, select {
  11. font: 11pt verdana;
  12. }
  13. #mygraph {
  14. width: 600px;
  15. height: 600px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <script>
  21. if (location.href.substr(0, 5) == 'file:') {
  22. document.write(
  23. '<p style="color: red;">' +
  24. 'Error: Cannot fetch the example data because of security ' +
  25. 'restrictions in JavaScript. Run the example from a server ' +
  26. 'instead of as a local file to resolve this problem.' +
  27. '</p>');
  28. }
  29. </script>
  30. <p>
  31. The following examples are unmodified copies from the
  32. <a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphiz Gallery</a>.
  33. Note that vis.js does not support all attributes of GraphVis, and
  34. </p>
  35. <p>
  36. <label for="url">Select an example:</label>
  37. <select id="url" onchange="loadData()">
  38. <option value="data/fsm.gv.txt">fsm</option>
  39. <option value="data/hello.gv.txt">hello</option>
  40. <option value="data/process.gv.txt">process</option>
  41. <option value="data/profile.gv.txt">profile</option>
  42. <option value="data/siblings.gv.txt">siblings</option>
  43. <option value="data/softmaint.gv.txt">softmaint</option>
  44. <option value="data/traffic_lights.gv.txt">traffic_lights</option>
  45. <option value="data/transparency.gv.txt">transparency</option>
  46. <option value="data/twopi2.gv.txt">twopi2</option>
  47. <option value="data/unix.gv.txt">unix</option>
  48. <option value="data/world.gv.txt">world</option>
  49. </select>
  50. </p>
  51. <div id="mygraph"></div>
  52. <script type="text/javascript">
  53. var container = document.getElementById('mygraph');
  54. var url = document.getElementById('url');
  55. var graph = new vis.Graph(container);
  56. function loadData () {
  57. $.ajax({
  58. type: "GET",
  59. url: url.value
  60. }).done(function(data) {
  61. graph.setOptions({
  62. stabilize: false
  63. });
  64. graph.setData( {
  65. dot: data
  66. });
  67. });
  68. }
  69. loadData();
  70. </script>
  71. </body>
  72. </html>