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.

108 lines
2.4 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Graph | Mobile friendly</title>
  5. <style type="text/css">
  6. html, body {
  7. font: 10pt arial;
  8. padding: 0;
  9. margin: 0;
  10. width: 100%;
  11. height: 100%;
  12. }
  13. #mygraph {
  14. width: 100%;
  15. height: 100%;
  16. }
  17. </style>
  18. <!-- for mobile devices like android and iphone -->
  19. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  20. <script type="text/javascript" src="../../dist/vis.js"></script>
  21. <script type="text/javascript">
  22. var nodes = null;
  23. var edges = null;
  24. var graph = null;
  25. // Called when the Visualization API is loaded.
  26. function draw() {
  27. nodes = [];
  28. edges = [];
  29. var EDGE_LENGTH = 50;
  30. var connectionCount = [];
  31. // randomly create some nodes
  32. var nodeCount = 20;
  33. var cols = parseInt(Math.sqrt(nodeCount));
  34. for (var i = 0; i < nodeCount; i++) {
  35. nodes.push({
  36. id: i,
  37. label: '' + i
  38. });
  39. connectionCount[i] = 0;
  40. // create links in a scale-free-network way
  41. if (i == 1) {
  42. var from = i;
  43. var to = 0;
  44. edges.push({
  45. from: from,
  46. to: to,
  47. length: EDGE_LENGTH
  48. });
  49. connectionCount[from]++;
  50. connectionCount[to]++;
  51. }
  52. else if (i > 1) {
  53. var conn = edges.length * 2;
  54. var rand = Math.floor(Math.random() * conn);
  55. var cum = 0;
  56. var j = 0;
  57. while (j < connectionCount.length && cum < rand) {
  58. cum += connectionCount[j];
  59. j++;
  60. }
  61. var from = i;
  62. var to = j;
  63. edges.push({
  64. from: from,
  65. to: to,
  66. length: EDGE_LENGTH
  67. });
  68. connectionCount[from]++;
  69. connectionCount[to]++;
  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. stabilize: false,
  80. nodes: {
  81. shape: 'dot',
  82. radius: 24,
  83. fontSize: 24
  84. },
  85. edges: {
  86. width: 2
  87. }
  88. };
  89. graph = new vis.Graph(container, data, options);
  90. }
  91. </script>
  92. </head>
  93. <body onload="draw()" onresize="graph.redraw();">
  94. <div id="mygraph"></div>
  95. </body>
  96. </html>