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.

86 lines
2.9 KiB

  1. <html>
  2. <head>
  3. <title>Network | 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="../../../dist/vis.js"></script>
  6. <style type="text/css">
  7. p {
  8. width: 600px;
  9. }
  10. html, body, select {
  11. font: 11pt arial;
  12. }
  13. #mygraph {
  14. width: 100%;
  15. height: 600px;
  16. border: 1px solid lightgray;
  17. }
  18. </style>
  19. <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  20. <body>
  21. <script>
  22. if (location.href.substr(0, 5) == 'file:') {
  23. document.write(
  24. '<p style="color: red;">' +
  25. 'Error: Cannot fetch the example data because of security ' +
  26. 'restrictions in JavaScript. Run the example from a server ' +
  27. 'instead of as a local file to resolve this problem. ' +
  28. 'Alternatively, you can load DOT graphs in ' +
  29. 'the <a href="../15_dot_language_playground.html" ' +
  30. 'style="color:red;">playground</a>.' +
  31. '</p>');
  32. }
  33. </script>
  34. <p>
  35. The following examples are unmodified copies from the
  36. <a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>.
  37. </p>
  38. <p>
  39. Note that some style attributes of Graphviz are not supported by vis.js,
  40. and that vis.js offers options not supported by Graphviz (which could make
  41. some examples look much nicer).
  42. </p>
  43. <p>
  44. <label for="url">Select an example:</label>
  45. <select id="url" onchange="loadData()">
  46. <option value="data/fsm.gv.txt">fsm</option>
  47. <option value="data/hello.gv.txt">hello</option>
  48. <option value="data/process.gv.txt">process</option>
  49. <option value="data/siblings.gv.txt">siblings</option>
  50. <option value="data/softmaint.gv.txt">softmaint</option>
  51. <option value="data/traffic_lights.gv.txt">traffic_lights</option>
  52. <option value="data/transparency.gv.txt">transparency</option>
  53. <option value="data/twopi2.gv.txt">twopi2</option>
  54. <option value="data/unix.gv.txt">unix</option>
  55. <option value="data/world.gv.txt">world</option>
  56. </select>
  57. </p>
  58. <div id="mygraph"></div>
  59. <script type="text/javascript">
  60. var container = document.getElementById('mygraph');
  61. var url = document.getElementById('url');
  62. var network = new vis.Network(container,{},{physics:{barnesHut:{springLength:75,springConstant:0.015}}});
  63. function loadData () {
  64. $.ajax({
  65. type: "GET",
  66. url: url.value
  67. }).done(function(data) {
  68. network.setOptions({
  69. stabilize: false
  70. });
  71. network.setData( {
  72. dot: data
  73. });
  74. });
  75. }
  76. loadData();
  77. </script>
  78. </body>
  79. </html>