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.

178 lines
5.0 KiB

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Network | node as icon</title>
  6. <script type="text/javascript" src="../../dist/vis.js"></script>
  7. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  8. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  9. <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  10. <script language="JavaScript">
  11. function draw() {
  12. /*
  13. * Example for FontAwesome
  14. */
  15. var optionsFA = {
  16. height: '300px',
  17. groups: {
  18. usergroups: {
  19. shape: 'icon',
  20. icon: {
  21. fontFace: 'FontAwesome',
  22. code: '\uf0c0',
  23. size: 50,
  24. color: '#57169a'
  25. }
  26. },
  27. users: {
  28. shape: 'icon',
  29. icon: {
  30. fontFace: 'FontAwesome',
  31. code: '\uf007',
  32. size: 50,
  33. color: '#aa00ff'
  34. }
  35. }
  36. }
  37. };
  38. // create an array with nodes
  39. var nodesFA = [{
  40. id: 1,
  41. label: 'User 1',
  42. group: 'users'
  43. }, {
  44. id: 2,
  45. label: 'User 2',
  46. group: 'users'
  47. }, {
  48. id: 3,
  49. label: 'Usergroup 1',
  50. group: 'usergroups'
  51. }, {
  52. id: 4,
  53. label: 'Usergroup 2',
  54. group: 'usergroups'
  55. }, {
  56. id: 5,
  57. label: 'Organisation 1',
  58. shape: 'icon',
  59. icon: {
  60. fontFace: 'FontAwesome',
  61. code: '\uf1ad',
  62. size: 50,
  63. color: '#f0a30a'
  64. }
  65. }];
  66. // create an array with edges
  67. var edges = [{
  68. from: 1,
  69. to: 3
  70. }, {
  71. from: 1,
  72. to: 4
  73. }, {
  74. from: 2,
  75. to: 4
  76. }, {
  77. from: 3,
  78. to: 5
  79. }, {
  80. from: 4,
  81. to: 5
  82. }];
  83. // create a network
  84. var containerFA = document.getElementById('mynetworkFA');
  85. var dataFA = {
  86. nodes: nodesFA,
  87. edges: edges
  88. };
  89. var networkFA = new vis.Network(containerFA, dataFA, optionsFA);
  90. /*
  91. * Example for Ionicons
  92. */
  93. var optionsIO = {
  94. height: '300px',
  95. groups: {
  96. usergroups: {
  97. shape: 'icon',
  98. icon: {
  99. fontFace: 'Ionicons',
  100. code: '\uf47c',
  101. size: 50,
  102. color: '#57169a'
  103. }
  104. },
  105. users: {
  106. shape: 'icon',
  107. icon: {
  108. fontFace: 'Ionicons',
  109. code: '\uf47e',
  110. size: 50,
  111. color: '#aa00ff'
  112. }
  113. }
  114. }
  115. };
  116. // create an array with nodes
  117. var nodesIO = [{
  118. id: 1,
  119. label: 'User 1',
  120. group: 'users'
  121. }, {
  122. id: 2,
  123. label: 'User 2',
  124. group: 'users'
  125. }, {
  126. id: 3,
  127. label: 'Usergroup 1',
  128. group: 'usergroups'
  129. }, {
  130. id: 4,
  131. label: 'Usergroup 2',
  132. group: 'usergroups'
  133. }, {
  134. id: 5,
  135. label: 'Organisation 1',
  136. shape: 'icon',
  137. icon: {
  138. fontFace: 'Ionicons',
  139. code: '\uf276',
  140. size: 50,
  141. color: '#f0a30a'
  142. }
  143. }];
  144. // create a network
  145. var containerIO = document.getElementById('mynetworkIO');
  146. var dataIO = {
  147. nodes: nodesIO,
  148. edges: edges
  149. };
  150. var networkIO = new vis.Network(containerIO, dataIO, optionsIO);
  151. }
  152. </script>
  153. </head>
  154. <body onload="draw()">
  155. <h2>
  156. <i class="fa fa-flag"></i> Use FontAwesome-icons for node</h2>
  157. <div id="mynetworkFA"></div>
  158. <h2>
  159. <i class="ion ion-ionic"></i> Use Ionicons-icons for node</h2>
  160. <div id="mynetworkIO"></div>
  161. </body>
  162. </html>