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.

196 lines
4.3 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. <style>
  11. #mynetworkFA,
  12. #mynetworkIO {
  13. height: 300px;
  14. width: 700px;
  15. border:1px solid lightgrey;
  16. }
  17. p {
  18. max-width:700px;
  19. }
  20. </style>
  21. <script language="JavaScript">
  22. function draw() {
  23. /*
  24. * Example for FontAwesome
  25. */
  26. var optionsFA = {
  27. groups: {
  28. usergroups: {
  29. shape: 'icon',
  30. icon: {
  31. face: 'FontAwesome',
  32. code: '\uf0c0',
  33. size: 50,
  34. color: '#57169a'
  35. }
  36. },
  37. users: {
  38. shape: 'icon',
  39. icon: {
  40. face: 'FontAwesome',
  41. code: '\uf007',
  42. size: 50,
  43. color: '#aa00ff'
  44. }
  45. }
  46. }
  47. };
  48. // create an array with nodes
  49. var nodesFA = [{
  50. id: 1,
  51. label: 'User 1',
  52. group: 'users'
  53. }, {
  54. id: 2,
  55. label: 'User 2',
  56. group: 'users'
  57. }, {
  58. id: 3,
  59. label: 'Usergroup 1',
  60. group: 'usergroups'
  61. }, {
  62. id: 4,
  63. label: 'Usergroup 2',
  64. group: 'usergroups'
  65. }, {
  66. id: 5,
  67. label: 'Organisation 1',
  68. shape: 'icon',
  69. icon: {
  70. face: 'FontAwesome',
  71. code: '\uf1ad',
  72. size: 50,
  73. color: '#f0a30a'
  74. }
  75. }];
  76. // create an array with edges
  77. var edges = [{
  78. from: 1,
  79. to: 3
  80. }, {
  81. from: 1,
  82. to: 4
  83. }, {
  84. from: 2,
  85. to: 4
  86. }, {
  87. from: 3,
  88. to: 5
  89. }, {
  90. from: 4,
  91. to: 5
  92. }];
  93. // create a network
  94. var containerFA = document.getElementById('mynetworkFA');
  95. var dataFA = {
  96. nodes: nodesFA,
  97. edges: edges
  98. };
  99. var networkFA = new vis.Network(containerFA, dataFA, optionsFA);
  100. /*
  101. * Example for Ionicons
  102. */
  103. var optionsIO = {
  104. groups: {
  105. usergroups: {
  106. shape: 'icon',
  107. icon: {
  108. face: 'Ionicons',
  109. code: '\uf47c',
  110. size: 50,
  111. color: '#57169a'
  112. }
  113. },
  114. users: {
  115. shape: 'icon',
  116. icon: {
  117. face: 'Ionicons',
  118. code: '\uf47e',
  119. size: 50,
  120. color: '#aa00ff'
  121. }
  122. }
  123. }
  124. };
  125. // create an array with nodes
  126. var nodesIO = [{
  127. id: 1,
  128. label: 'User 1',
  129. group: 'users'
  130. }, {
  131. id: 2,
  132. label: 'User 2',
  133. group: 'users'
  134. }, {
  135. id: 3,
  136. label: 'Usergroup 1',
  137. group: 'usergroups'
  138. }, {
  139. id: 4,
  140. label: 'Usergroup 2',
  141. group: 'usergroups'
  142. }, {
  143. id: 5,
  144. label: 'Organisation 1',
  145. shape: 'icon',
  146. icon: {
  147. face: 'Ionicons',
  148. code: '\uf276',
  149. size: 50,
  150. color: '#f0a30a'
  151. }
  152. }];
  153. // create a network
  154. var containerIO = document.getElementById('mynetworkIO');
  155. var dataIO = {
  156. nodes: nodesIO,
  157. edges: edges
  158. };
  159. var networkIO = new vis.Network(containerIO, dataIO, optionsIO);
  160. }
  161. </script>
  162. <script src="../../googleAnalytics.js"></script>
  163. </head>
  164. <body onload="draw()">
  165. <p>
  166. Icons can be used for nodes as well. This example shows Icons from fontAwesome and Ionicons but it should work with similar packages as well.
  167. It uses unicode and css to define the icons.<br><br> <b>Remember! Unicode in javascript is done like this: \uf274 for the unicode f274.</b>
  168. <br> If a node is shown as a rectangle, it means the css is not loaded (or not yet loaded). A redraw will fix that.
  169. </p>
  170. <h2>
  171. <i class="fa fa-flag"></i> Use FontAwesome-icons for nodes</h2>
  172. <div id="mynetworkFA"></div>
  173. <h2>
  174. <i class="ion ion-ionic"></i> Use Ionicons-icons for nodes</h2>
  175. <div id="mynetworkIO"></div>
  176. </body>
  177. </html>