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.

114 lines
2.8 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Graph | Really Random nodes</title>
  5. <style type="text/css">
  6. body {
  7. font: 10pt sans;
  8. }
  9. #mygraph {
  10. width: 600px;
  11. height: 600px;
  12. border: 1px solid lightgray;
  13. }
  14. </style>
  15. <script type="text/javascript" src="../../dist/vis.js"></script>
  16. <script type="text/javascript">
  17. var nodes = null;
  18. var edges = null;
  19. var graph = null;
  20. function draw() {
  21. nodes = [];
  22. edges = [];
  23. // randomly create some nodes and edges
  24. var nodeCount = parseInt(document.getElementById('nodeCount').value);
  25. for (var i = 0; i < nodeCount; i++) {
  26. nodes.push({
  27. id: i,
  28. label: String(i)
  29. });
  30. }
  31. for (var i = 0; i < nodeCount; i++) {
  32. var from = i;
  33. var to = i;
  34. to = i;
  35. while (to == i) {
  36. to = Math.floor(Math.random() * (nodeCount));
  37. }
  38. edges.push({
  39. from: from,
  40. to: to
  41. });
  42. }
  43. /*
  44. // Loop:
  45. for (var i = 0; i < 5; i++) {
  46. nodes.push({
  47. id: i,
  48. label: String(i)
  49. });
  50. }
  51. edges.push({
  52. from: 1,
  53. to: 0
  54. });
  55. edges.push({
  56. from: 1,
  57. to: 2
  58. });
  59. edges.push({
  60. from: 4,
  61. to: 0
  62. });
  63. edges.push({
  64. from: 2,
  65. to: 3
  66. });
  67. edges.push({
  68. from: 3,
  69. to: 4
  70. });
  71. */
  72. // create a graph
  73. var container = document.getElementById('mygraph');
  74. var data = {
  75. nodes: nodes,
  76. edges: edges
  77. };
  78. var options = {
  79. edges: {
  80. length: 80
  81. },
  82. stabilize: false
  83. };
  84. graph = new vis.Graph(container, data, options);
  85. // add event listeners
  86. vis.events.addListener(graph, 'select', function(params) {
  87. document.getElementById('selection').innerHTML =
  88. 'Selection: ' + graph.getSelection();
  89. });
  90. }
  91. </script>
  92. </head>
  93. <body onload="draw();">
  94. <form onsubmit="draw(); return false;">
  95. <label for="nodeCount">Number of nodes:</label>
  96. <input id="nodeCount" type="text" value="25" style="width: 50px;">
  97. <input type="submit" value="Go">
  98. </form>
  99. <br>
  100. <div id="mygraph"></div>
  101. <p id="selection"></p>
  102. </body>
  103. </html>