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.

1112 lines
27 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>vis.js | graph documentation</title>
  5. <link href="css/prettify.css" type="text/css" rel="stylesheet" />
  6. <link href='css/style.css' type='text/css' rel='stylesheet'>
  7. <script type="text/javascript" src="lib/prettify/prettify.js"></script>
  8. </head>
  9. <body onload="prettyPrint();">
  10. <div id="container">
  11. <h1>Graph documentation</h1>
  12. <h2><a name="Contents"></a>Contents</h2>
  13. <ul>
  14. <li><a href="#Overview">Overview</a></li>
  15. <li><a href="#Example">Example</a></li>
  16. <li><a href="#Loading">Loading</a></li>
  17. <li>
  18. <a href="#Data_Format">Data Format</a>
  19. <ul>
  20. <li><a href="#Nodes">Nodes</a></li>
  21. <li><a href="#Edges">Edges</a></li>
  22. <li><a href="#DOT_language">DOT language</a></li>
  23. </ul>
  24. </li>
  25. <li><a href="#Configuration_Options">Configuration Options</a></li>
  26. <li><a href="#Methods">Methods</a></li>
  27. <li><a href="#Events">Events</a></li>
  28. <li><a href="#Data_Policy">Data Policy</a></li>
  29. </ul>
  30. <h2 id="Overview">Overview</h2>
  31. <p>
  32. Graph is a visualization to display graphs and networks consisting of nodes
  33. and edges. The visualization is easy to use and supports custom shapes,
  34. styles, colors, sizes, images, and more.
  35. </p>
  36. <p>
  37. The graph visualization works smooth on any modern browser for up to a
  38. few hundred nodes and edges.
  39. </p>
  40. <p>
  41. To get started with Graph, install or download the
  42. <a href="http://visjs.org" target="_blank">vis.js</a> library.
  43. </p>
  44. <h2 id="Example">Example</h2>
  45. <p>
  46. Here a basic graph example. More examples can be found in the
  47. <a href="../examples" target="_blank">examples directory</a>.
  48. </p>
  49. <pre class="prettyprint lang-html">&lt;!doctype html&gt;
  50. &lt;html&gt;
  51. &lt;head&gt;
  52. &lt;title&gt;Graph | Basic usage&lt;/title&gt;
  53. &lt;script type="text/javascript" src="../../vis.js"&gt;&lt;/script&gt;
  54. &lt;/head&gt;
  55. &lt;body&gt;
  56. &lt;div id="mygraph"&gt;&lt;/div&gt;
  57. &lt;script type="text/javascript"&gt;
  58. // create an array with nodes
  59. var nodes = [
  60. {id: 1, label: 'Node 1'},
  61. {id: 2, label: 'Node 2'},
  62. {id: 3, label: 'Node 3'},
  63. {id: 4, label: 'Node 4'},
  64. {id: 5, label: 'Node 5'}
  65. ];
  66. // create an array with edges
  67. var edges = [
  68. {from: 1, to: 2},
  69. {from: 1, to: 3},
  70. {from: 2, to: 4},
  71. {from: 2, to: 5}
  72. ];
  73. // create a graph
  74. var container = document.getElementById('mygraph');
  75. var data= {
  76. nodes: nodes,
  77. edges: edges,
  78. };
  79. var options = {
  80. width: '400px',
  81. height: '400px'
  82. };
  83. var graph = new vis.Graph(container, data, options);
  84. &lt;/script&gt;
  85. &lt;/body&gt;
  86. &lt;/html&gt;
  87. </pre>
  88. <h2 id="Loading">Loading</h2>
  89. <p>
  90. Install or download the <a href="http://visjs.org" target="_blank">vis.js</a> library.
  91. in a subfolder of your project. Include the library script in the head of your html code:
  92. </p>
  93. <pre class="prettyprint lang-html">
  94. &lt;script type="text/javascript" src="vis/vis.js"&gt;&lt;/script&gt;
  95. </pre>
  96. The constructor of the Graph is <code>vis.Graph</code>.
  97. <pre class="prettyprint lang-js">var graph = new vis.Graph(container, data, options);</pre>
  98. The constructor accepts three parameters:
  99. <ul>
  100. <li>
  101. <code>container</code> is the DOM element in which to create the graph.
  102. </li>
  103. <li>
  104. <code>data</code> is an Object containing properties <code>nodes</code> and
  105. <code>edges</code>, which both contain an array with objects.
  106. Optionally, data may contain an <code>options</code> object.
  107. The parameter <code>data</code> is optional, data can also be set using
  108. the method <code>setData</code>. Section <a href="#Data_Format">Data Format</a>
  109. describes the data object.
  110. </li>
  111. <li>
  112. <code>options</code> is an optional Object containing a name-value map
  113. with options. Options can also be set using the method
  114. <code>setOptions</code>.
  115. Section <a href="#Configuration_Options">Configuration Options</a>
  116. describes the available options.
  117. </li>
  118. </ul>
  119. <h2 id="Data_Format">Data Format</h2>
  120. <p>
  121. The <code>data</code> parameter of the Graph constructor is an object
  122. which can contain different types of data.
  123. The following properties are supported in the <code>data</code> object:
  124. </p>
  125. <ul>
  126. <li>
  127. <span style="font-weight: bold;">A property pair <code>nodes</code> and <code>edges</code></span>,
  128. both containing an Array with objects. The data formats are described
  129. in the sections <a href="#Nodes">Nodes</a> and <a href="#Edges">Edges</a>.
  130. Example:
  131. <pre class="prettyprint lang-js">
  132. var data = {
  133. nodes: [...],
  134. edges: [...]
  135. };
  136. </pre>
  137. </li>
  138. <li>
  139. <span style="font-weight: bold;">A property <code>dot</code></span>,
  140. containing a string with data in the
  141. <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
  142. DOT support is described in section <a href="#DOT_language">DOT_language</a>.
  143. Example:
  144. <pre class="prettyprint lang-js">
  145. var data = {
  146. dot: '...'
  147. };
  148. </pre>
  149. </li>
  150. <li>
  151. <span style="font-weight: bold;">A property <code>options</code></span>,
  152. containing an object with global options.
  153. Options can be provided as third parameter in the graph constructor
  154. as well. Section <a href="#Configuration_Options">Configuration Options</a>
  155. describes the available options.
  156. </li>
  157. </ul>
  158. <h3 id="Nodes">Nodes</h3>
  159. <p>
  160. Nodes typically have an <code>id</code> and <code>label</code>.
  161. A node must contain at least a property <code>id</code>.
  162. Nodes can have extra properties, used to define the shape and style of the
  163. nodes.
  164. </p>
  165. <p>
  166. A JavaScript Array with nodes is constructed like:
  167. </p>
  168. <pre class="prettyprint lang-js">
  169. var nodes = [
  170. {
  171. id: 1,
  172. label: 'Node 1'
  173. },
  174. // ... more nodes
  175. ];
  176. </pre>
  177. <p>
  178. Nodes support the following properties:
  179. </p>
  180. <table>
  181. <tr>
  182. <th>Name</th>
  183. <th>Type</th>
  184. <th>Required</th>
  185. <th>Description</th>
  186. </tr>
  187. <tr>
  188. <td>color</td>
  189. <td>String | Object</td>
  190. <td>no</td>
  191. <td>Color for the node.</td>
  192. </tr>
  193. <tr>
  194. <td>color.background</td>
  195. <td>String</td>
  196. <td>no</td>
  197. <td>Background color for the node.</td>
  198. </tr>
  199. <tr>
  200. <td>color.border</td>
  201. <td>String</td>
  202. <td>no</td>
  203. <td>Border color for the node.</td>
  204. </tr>
  205. <tr>
  206. <td>color.highlight</td>
  207. <td>String | Object</td>
  208. <td>no</td>
  209. <td>Color of the node when selected.</td>
  210. </tr>
  211. <tr>
  212. <td>color.highlight.background</td>
  213. <td>String</td>
  214. <td>no</td>
  215. <td>Background color of the node when selected.</td>
  216. </tr>
  217. <tr>
  218. <td>color.highlight.border</td>
  219. <td>String</td>
  220. <td>no</td>
  221. <td>Border color of the node when selected.</td>
  222. </tr>
  223. <tr>
  224. <td>group</td>
  225. <td>Number | String</td>
  226. <td>no</td>
  227. <td>A group number or name. The type can be <code>number</code>,
  228. <code>string</code>, or an other type. All nodes with the same group get
  229. the same color schema.</td>
  230. </tr>
  231. <tr>
  232. <td>fontColor</td>
  233. <td>String</td>
  234. <td>no</td>
  235. <td>Font color for label in the node.</td>
  236. </tr>
  237. <tr>
  238. <td>fontFace</td>
  239. <td>String</td>
  240. <td>no</td>
  241. <td>Font face for label in the node, for example "verdana" or "arial".</td>
  242. </tr>
  243. <tr>
  244. <td>fontSize</td>
  245. <td>Number</td>
  246. <td>no</td>
  247. <td>Font size in pixels for label in the node.</td>
  248. </tr>
  249. <tr>
  250. <td>id</td>
  251. <td>Number | String</td>
  252. <td>yes</td>
  253. <td>A unique id for this node.
  254. Nodes may not have duplicate id's.
  255. Id's do not need to be consecutive.
  256. An id is normally a number, but may be any type.</td>
  257. </tr>
  258. <tr>
  259. <td>image</td>
  260. <td>string</td>
  261. <td>no</td>
  262. <td>Url of an image. Only applicable when the shape of the node is
  263. <code>image</code>.</td>
  264. </tr>
  265. <tr>
  266. <td>radius</td>
  267. <td>number</td>
  268. <td>no</td>
  269. <td>Radius for the node. Applicable for all shapes except <code>box</code>,
  270. <code>circle</code>, <code>ellipse</code> and <code>database</code>.
  271. The value of <code>radius</code> will override a value in
  272. property <code>value</code>.</td>
  273. </tr>
  274. <tr>
  275. <td>shape</td>
  276. <td>string</td>
  277. <td>no</td>
  278. <td>Define the shape for the node.
  279. Choose from
  280. <code>ellipse</code> (default), <code>circle</code>, <code>box</code>,
  281. <code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>,
  282. <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.
  283. <br><br>
  284. In case of <code>image</code>, a property with name <code>image</code> must
  285. be provided, containing image urls.
  286. <br><br>
  287. The shapes <code>dot</code>, <code>star</code>, <code>triangle</code>,
  288. <code>triangleDown</code>, and <code>square</code>, are scalable.
  289. The size is determined by the properties <code>radius</code> or
  290. <code>value</code>.
  291. <br><br>
  292. When a property <code>label</code> is provided,
  293. this label will be displayed inside the shape in case of shapes
  294. <code>box</code>, <code>circle</code>, <code>ellipse</code>,
  295. and <code>database</code>.
  296. For all other shapes, the label will be displayed right below the shape.
  297. </td>
  298. </tr>
  299. <tr>
  300. <td>label</td>
  301. <td>string</td>
  302. <td>no</td>
  303. <td>Text label to be displayed in the node or under the image of the node.
  304. Multiple lines can be separated by a newline character <code>\n</code> .</td>
  305. </tr>
  306. <tr>
  307. <td>title</td>
  308. <td>string</td>
  309. <td>no</td>
  310. <td>Title to be displayed when the user hovers over the node.
  311. The title can contain HTML code.</td>
  312. </tr>
  313. <tr>
  314. <td>value</td>
  315. <td>number</td>
  316. <td>no</td>
  317. <td>A value for the node.
  318. The radius of the nodes will be scaled automatically from minimum to
  319. maximum value.
  320. Only applicable when the shape of the node is <code>dot</code>.
  321. If a <code>radius</code> is provided for the node too, it will override the
  322. radius calculated from the value.</td>
  323. </tr>
  324. <tr>
  325. <td>x</td>
  326. <td>number</td>
  327. <td>no</td>
  328. <td>Horizontal position in pixels.
  329. The horizontal position of the node will be fixed.
  330. The vertical position y may remain undefined.</td>
  331. </tr>
  332. <tr>
  333. <td>y</td>
  334. <td>number</td>
  335. <td>no</td>
  336. <td>Vertical position in pixels.
  337. The vertical position of the node will be fixed.
  338. The horizontal position x may remain undefined.</td>
  339. </tr>
  340. </table>
  341. <h3 id="Edges">Edges</h3>
  342. <p>
  343. Edges are connections between nodes.
  344. An edge must at least contain properties <code>from</code> and
  345. <code>to</code>, both referring to the <code>id</code> of a node.
  346. Edges can have extra properties, used to define the type and style.
  347. </p>
  348. <p>
  349. A JavaScript Array with edges is constructed as:
  350. </p>
  351. <pre class="prettyprint lang-js">
  352. var edges = [
  353. {
  354. from: 1,
  355. to: 3
  356. },
  357. // ... more edges
  358. ];
  359. </pre>
  360. <p>
  361. Edges support the following properties:
  362. </p>
  363. <table>
  364. <tr>
  365. <th>Name</th>
  366. <th>Type</th>
  367. <th>Required</th>
  368. <th>Description</th>
  369. </tr>
  370. <tr>
  371. <td>color</td>
  372. <td>string</td>
  373. <td>no</td>
  374. <td>A HTML color for the edge.</td>
  375. </tr>
  376. <tr>
  377. <td>dash</td>
  378. <td>Object</td>
  379. <td>no</td>
  380. <td>
  381. Object containing properties for dashed lines.
  382. Available properties: <code>length</code>, <code>gap</code>,
  383. <code>altLength</code>.
  384. </td>
  385. </tr>
  386. <tr>
  387. <td>dash.altLength</td>
  388. <td>number</td>
  389. <td>no</td>
  390. <td>Length of the alternated dash in pixels on a dashed line.
  391. Specifying <code>dash.altLength</code> allows for creating
  392. a dashed line with a dash-dot style, for example when
  393. <code>dash.length=10</code> and <code>dash.altLength=5</code>.
  394. See also the option <code>dahs.length</code>.
  395. Only applicable when the line style is <code>dash-line</code>.</td>
  396. </tr>
  397. <tr>
  398. <td>dash.length</td>
  399. <td>number</td>
  400. <td>no</td>
  401. <td>Length of a dash in pixels on a dashed line.
  402. Only applicable when the line style is <code>dash-line</code>.</td>
  403. </tr>
  404. <tr>
  405. <td>dash.gap</td>
  406. <td>number</td>
  407. <td>no</td>
  408. <td>Length of a gap in pixels on a dashed line.
  409. Only applicable when the line style is <code>dash-line</code>.</td>
  410. </tr>
  411. <tr>
  412. <td>fontColor</td>
  413. <td>String</td>
  414. <td>no</td>
  415. <td>Font color for the text label of the edge.
  416. Only applicable when property <code>label</code> is defined.</td>
  417. </tr>
  418. <tr>
  419. <td>fontFace</td>
  420. <td>String</td>
  421. <td>no</td>
  422. <td>Font face for the text label of the edge,
  423. for example "verdana" or "arial".
  424. Only applicable when property <code>label</code> is defined.</td>
  425. </tr>
  426. <tr>
  427. <td>fontSize</td>
  428. <td>Number</td>
  429. <td>no</td>
  430. <td>Font size in pixels for the text label of the edge.
  431. Only applicable when property <code>label</code> is defined.</td>
  432. </tr>
  433. <tr>
  434. <td>from</td>
  435. <td>Number | String</td>
  436. <td>yes</td>
  437. <td>The id of a node where the edge starts. The type must correspond with
  438. the type of the node id's. This is normally a number, but can be any
  439. type.</td>
  440. </tr>
  441. <tr>
  442. <td>length</td>
  443. <td>number</td>
  444. <td>no</td>
  445. <td>The length of the edge in pixels.</td>
  446. </tr>
  447. <tr>
  448. <td>style</td>
  449. <td>string</td>
  450. <td>no</td>
  451. <td>Define a line style for the edge.
  452. Choose from <code>line</code> (default), <code>arrow</code>,
  453. <code>arrow-center</code>, or <code>dash-line</code>.
  454. </td>
  455. </tr>
  456. <tr>
  457. <td>label</td>
  458. <td>string</td>
  459. <td>no</td>
  460. <td>Text label to be displayed halfway the edge.</td>
  461. </tr>
  462. <tr>
  463. <td>title</td>
  464. <td>string</td>
  465. <td>no</td>
  466. <td>Title to be displayed when the user hovers over the edge.
  467. The title can contain HTML code.</td>
  468. </tr>
  469. <tr>
  470. <td>to</td>
  471. <td>Number | String</td>
  472. <td>yes</td>
  473. <td>The id of a node where the edge ends. The type must correspond with
  474. the type of the node id's. This is normally a number, but can be any
  475. type.</td>
  476. </tr>
  477. <tr>
  478. <td>value</td>
  479. <td>number</td>
  480. <td>no</td>
  481. <td>A value for the edge.
  482. The width of the edges will be scaled automatically from minimum to
  483. maximum value.
  484. If a <code>width</code> is provided for the edge too, it will override the
  485. width calculated from the value.</td>
  486. </tr>
  487. <tr>
  488. <td>width</td>
  489. <td>number</td>
  490. <td>no</td>
  491. <td>Width of the line in pixels. The <code>width</code> will
  492. override a specified <code>value</code>, if a <code>value</code> is
  493. specified too.</td>
  494. </tr>
  495. </table>
  496. <h3 id="DOT_language">DOT language</h3>
  497. <p>
  498. Graph supports data in the
  499. <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
  500. To provide data in the DOT language, the <code>data</code> object must contain
  501. a property <code>dot</code> with a String containing the data.
  502. </p>
  503. <p>
  504. Example usage:
  505. </p>
  506. <pre class="prettyprint lang-js">
  507. // provide data in the DOT language
  508. var data = {
  509. dot: 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
  510. };
  511. // create a graph
  512. var graph = new vis.Graph(container, data);
  513. </pre>
  514. <h2 id="Configuration_Options">Configuration Options</h2>
  515. <p>
  516. Options can be used to customize the graph. Options are defined as a JSON object.
  517. All options are optional.
  518. </p>
  519. <pre class="prettyprint lang-js">
  520. var options = {
  521. width: '100%',
  522. height: '400px',
  523. edges: {
  524. color: 'red',
  525. width: 2
  526. }
  527. };
  528. </pre>
  529. <p>
  530. The following options are available.
  531. </p>
  532. <table>
  533. <tr>
  534. <th>Name</th>
  535. <th>Type</th>
  536. <th>Default</th>
  537. <th>Description</th>
  538. </tr>
  539. <tr>
  540. <td>edges.color</td>
  541. <td>String</td>
  542. <td>"#2B7CE9"</td>
  543. <td>The default color of a edge.</td>
  544. </tr>
  545. <tr>
  546. <td>edges.dash</td>
  547. <td>Object</td>
  548. <td>Object</td>
  549. <td>
  550. Object containing default properties for dashed lines.
  551. Available properties: <code>length</code>, <code>gap</code>,
  552. <code>altLength</code>.
  553. </td>
  554. </tr>
  555. <tr>
  556. <td>edges.dash.altLength</td>
  557. <td>number</td>
  558. <td>none</td>
  559. <td>Default length of the alternated dash in pixels on a dashed line.
  560. Specifying <code>dash.altLength</code> allows for creating
  561. a dashed line with a dash-dot style, for example when
  562. <code>dash.length=10</code> and <code>dash.altLength=5</code>.
  563. See also the option <code>dahs.length</code>.
  564. Only applicable when the line style is <code>dash-line</code>.</td>
  565. </tr>
  566. <tr>
  567. <td>edges.dash.length</td>
  568. <td>number</td>
  569. <td>10</td>
  570. <td>Default length of a dash in pixels on a dashed line.
  571. Only applicable when the line style is <code>dash-line</code>.</td>
  572. </tr>
  573. <tr>
  574. <td>edges.dash.gap</td>
  575. <td>number</td>
  576. <td>5</td>
  577. <td>Default length of a gap in pixels on a dashed line.
  578. Only applicable when the line style is <code>dash-line</code>.</td>
  579. </tr>
  580. <tr>
  581. <td>edges.length</td>
  582. <td>Number</td>
  583. <td>100</td>
  584. <td>The default length of a edge.</td>
  585. </tr>
  586. <tr>
  587. <td>edges.style</td>
  588. <td>String</td>
  589. <td>"line"</td>
  590. <td>The default style of a edge.
  591. Choose from <code>line</code> (default), <code>arrow</code>,
  592. <code>arrow-center</code>, <code>dash-line</code>.</td>
  593. </tr>
  594. <tr>
  595. <td>edges.width</td>
  596. <td>Number</td>
  597. <td>1</td>
  598. <td>The default width of a edge.</td>
  599. </tr>
  600. <tr>
  601. <td>groups</td>
  602. <td>Object</td>
  603. <td>none</td>
  604. <td>It is possible to specify custom styles for groups.
  605. Each node assigned a group gets the specified style.
  606. See <a href="#Groups">Groups</a> for an overview of the available styles
  607. and an example.
  608. </td>
  609. </tr>
  610. <tr>
  611. <td>height</td>
  612. <td>String</td>
  613. <td>"400px"</td>
  614. <td>The height of the graph in pixels or as a percentage.</td>
  615. </tr>
  616. <tr>
  617. <td>nodes.color</td>
  618. <td>String | Object</td>
  619. <td>Object</td>
  620. <td>Default color of the nodes. When color is a string, the color is applied
  621. to both background as well as the border of the node.</td>
  622. </tr>
  623. <tr>
  624. <td>nodes.color.background</td>
  625. <td>String</td>
  626. <td>"#97C2FC"</td>
  627. <td>Default background color of the nodes</td>
  628. </tr>
  629. <tr>
  630. <td>nodes.color.border</td>
  631. <td>String</td>
  632. <td>"#2B7CE9"</td>
  633. <td>Default border color of the nodes</td>
  634. </tr>
  635. <tr>
  636. <td>nodes.color.highlight</td>
  637. <td>String | Object</td>
  638. <td>Object</td>
  639. <td>Default color of the node when the node is selected. Applied to
  640. both border and background of the node.</td>
  641. </tr>
  642. <tr>
  643. <td>nodes.color.highlight.background</td>
  644. <td>String</td>
  645. <td>"#D2E5FF"</td>
  646. <td>Default background color of the node when selected.</td>
  647. </tr>
  648. <tr>
  649. <td>nodes.color.highlight.border</td>
  650. <td>String</td>
  651. <td>"#2B7CE9"</td>
  652. <td>Default border color of the node when selected.</td>
  653. </tr>
  654. <tr>
  655. <td>nodes.fontColor</td>
  656. <td>String</td>
  657. <td>"black"</td>
  658. <td>Default font color for the text label in the nodes.</td>
  659. </tr>
  660. <tr>
  661. <td>nodes.fontFace</td>
  662. <td>String</td>
  663. <td>"sans"</td>
  664. <td>Default font face for the text label in the nodes, for example "verdana" or "arial".</td>
  665. </tr>
  666. <tr>
  667. <td>nodes.fontSize</td>
  668. <td>Number</td>
  669. <td>14</td>
  670. <td>Default font size in pixels for the text label in the nodes.</td>
  671. </tr>
  672. <tr>
  673. <td>nodes.group</td>
  674. <td>String</td>
  675. <td>none</td>
  676. <td>Default group for the nodes.</td>
  677. </tr>
  678. <tr>
  679. <td>nodes.image</td>
  680. <td>String</td>
  681. <td>none</td>
  682. <td>Default image url for the nodes. only applicable with shape <code>image</code>.</td>
  683. </tr>
  684. <tr>
  685. <td>nodes.widthMin</td>
  686. <td>Number</td>
  687. <td>16</td>
  688. <td>The minimum width for a scaled image. Only applicable with shape <code>image</code>.</td>
  689. </tr>
  690. <tr>
  691. <td>nodes.widthMax</td>
  692. <td>Number</td>
  693. <td>64</td>
  694. <td>The maximum width for a scaled image. Only applicable with shape <code>image</code>.</td>
  695. </tr>
  696. <tr>
  697. <td>nodes.shape</td>
  698. <td>String</td>
  699. <td>"ellipse"</td>
  700. <td>The default shape for all nodes.
  701. Choose from
  702. <code>ellipse</code> (default), <code>circle</code>, <code>box</code>,
  703. <code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>,
  704. <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.
  705. This shape can be overridden by a group shape, or by a shape of an individual node.</td>
  706. </tr>
  707. <tr>
  708. <td>nodes.radius</td>
  709. <td>Number</td>
  710. <td>5</td>
  711. <td>The default radius for a node. Only applicable with shape <code>dot</code>.</td>
  712. </tr>
  713. <tr>
  714. <td>nodes.radiusMin</td>
  715. <td>Number</td>
  716. <td>5</td>
  717. <td>The minimum radius for a scaled node. Only applicable with shape <code>dot</code>.</td>
  718. </tr>
  719. <tr>
  720. <td>nodes.radiusMax</td>
  721. <td>Number</td>
  722. <td>20</td>
  723. <td>The maximum radius for a scaled node. Only applicable with shape <code>dot</code>.</td>
  724. </tr>
  725. <tr>
  726. <td>selectable</td>
  727. <td>Boolean</td>
  728. <td>true</td>
  729. <td>If true, nodes in the graph can be selected by clicking them.
  730. Long press can be used to select multiple nodes.</td>
  731. </tr>
  732. <tr>
  733. <td>stabilize</td>
  734. <td>Boolean</td>
  735. <td>true</td>
  736. <td>If true, the graph is stabilized before displaying it. If false,
  737. the nodes move to a stabe position visibly in an animated way.</td>
  738. </tr>
  739. <tr>
  740. <td>width</td>
  741. <td>String</td>
  742. <td>"400px"</td>
  743. <td>The width of the graph in pixels or as a percentage.</td>
  744. </tr>
  745. </table>
  746. <br>
  747. <h3 id="Groups">Groups</h3>
  748. <p>It is possible to specify custom styles for groups of nodes.
  749. Each node having assigned to this group gets the specified style.
  750. The options <code>groups</code> is an object containing one or multiple groups,
  751. identified by a unique string, the groupname.
  752. </p>
  753. <p>
  754. A group can have the following styles:
  755. </p>
  756. <pre class="prettyprint lang-js">
  757. var options = {
  758. // ...
  759. groups: {
  760. mygroup: {
  761. shape: 'circle',
  762. color: {
  763. border: 'black',
  764. background: 'white',
  765. highlight: {
  766. border: 'yellow',
  767. background: 'orange'
  768. }
  769. }
  770. fontColor: 'red',
  771. fontSize: 18
  772. }
  773. // add more groups here
  774. }
  775. };
  776. var nodes = [
  777. {id: 1, label: 'Node 1'}, // will get the default style
  778. {id: 2, label: 'Node 2', group: 'mygroup'}, // will get the style from 'mygroup'
  779. // ... more nodes
  780. ];
  781. </pre>
  782. <p>The following styles are available for groups:</p>
  783. <table>
  784. <tr>
  785. <th>Name</th>
  786. <th>Type</th>
  787. <th>Default</th>
  788. <th>Description</th>
  789. </tr>
  790. <tr>
  791. <td>color</td>
  792. <td>String | Object</td>
  793. <td>Object</td>
  794. <td>Color of the node</td>
  795. </tr>
  796. <tr>
  797. <td>color.border</td>
  798. <td>String</td>
  799. <td>"#2B7CE9"</td>
  800. <td>Border color of the node</td>
  801. </tr>
  802. <tr>
  803. <td>color.background</td>
  804. <td>String</td>
  805. <td>"#97C2FC"</td>
  806. <td>Background color of the node</td>
  807. </tr>
  808. <tr>
  809. <td>color.highlight</td>
  810. <td>String</td>
  811. <td>"#D2E5FF"</td>
  812. <td>Color of the node when selected.</td>
  813. </tr>
  814. <tr>
  815. <td>color.highlight.background</td>
  816. <td>String</td>
  817. <td>"#D2E5FF"</td>
  818. <td>Background color of the node when selected.</td>
  819. </tr>
  820. <tr>
  821. <td>color.highlight.border</td>
  822. <td>String</td>
  823. <td>"#D2E5FF"</td>
  824. <td>Border color of the node when selected.</td>
  825. </tr>
  826. <tr>
  827. <td>image</td>
  828. <td>String</td>
  829. <td>none</td>
  830. <td>Default image for the nodes. Only applicable in combination with
  831. shape <code>image</code>.</td>
  832. </tr>
  833. <tr>
  834. <td>fontColor</td>
  835. <td>String</td>
  836. <td>"black"</td>
  837. <td>Font color of the node.</td>
  838. </tr>
  839. <tr>
  840. <td>fontFace</td>
  841. <td>String</td>
  842. <td>"sans"</td>
  843. <td>Font name of the node, for example "verdana" or "arial".</td>
  844. </tr>
  845. <tr>
  846. <td>fontSize</td>
  847. <td>Number</td>
  848. <td>14</td>
  849. <td>Font size for the node in pixels.</td>
  850. </tr>
  851. <tr>
  852. <td>shape</td>
  853. <td>String</td>
  854. <td>"ellipse"</td>
  855. <td>Choose from
  856. <code>ellipse</code> (default), <code>circle</code>, <code>box</code>,
  857. <code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>,
  858. <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.
  859. In case of image, a property with name image must be provided, containing
  860. image urls.</td>
  861. </tr>
  862. <tr>
  863. <td>radius</td>
  864. <td>Number</td>
  865. <td>5</td>
  866. <td>Default radius for the node. Only applicable in combination with
  867. shapes <code>box</code> and <code>dot</code>.</td>
  868. </tr>
  869. </table>
  870. <h2 id="Methods">Methods</h2>
  871. <p>
  872. Graph supports the following methods.
  873. </p>
  874. <table>
  875. <tr>
  876. <th>Method</th>
  877. <th>Return Type</th>
  878. <th>Description</th>
  879. </tr>
  880. <tr>
  881. <td>setData(data)</td>
  882. <td>none</td>
  883. <td>Loads data. Parameter <code>data</code> is an object containing
  884. nodes, edges, and options. Parameters nodes, edges are an Array.
  885. Options is a name-value map and is optional.
  886. </td>
  887. </tr>
  888. <tr>
  889. <td>setOptions(options)</td>
  890. <td>none</td>
  891. <td>Set options for the graph. The available options are described in
  892. the section <a href="#Configuration_Options">Configuration Options</a>.
  893. </td>
  894. </tr>
  895. <tr>
  896. <td>getSelection()</td>
  897. <td>Array of ids</td>
  898. <td>Returns an array with the ids of the selected nodes.
  899. Returns an empty array if no nodes are selected.
  900. The selections are not ordered.
  901. </td>
  902. </tr>
  903. <tr>
  904. <td>redraw()</td>
  905. <td>none</td>
  906. <td>Redraw the graph. Useful when the layout of the webpage changed.</td>
  907. </tr>
  908. <tr>
  909. <td>setSelection(selection)</td>
  910. <td>none</td>
  911. <td>Select nodes.
  912. <code>selection</code> is an array with ids of nodes to be selected.
  913. The array <code>selection</code> can contain zero or multiple ids.
  914. Example usage: <code>graph.setSelection([3, 5]);</code> will select
  915. nodes with id 3 and 5.
  916. </td>
  917. </tr>
  918. <tr>
  919. <td>setSize(width, height)</td>
  920. <td>none</td>
  921. <td>Parameters <code>width</code> and <code>height</code> are strings,
  922. containing a new size for the visualization. Size can be provided in pixels
  923. or in percentages.</td>
  924. </tr>
  925. </table>
  926. <h2 id="Events">Events</h2>
  927. <p>
  928. Graph fires events after one or multiple nodes are selected.
  929. The event can be catched by creating a listener.
  930. </p>
  931. <p>
  932. Here an example on how to catch a <code>select</code> event.
  933. </p>
  934. <pre class="prettyprint lang-js">
  935. function onSelect() {
  936. alert('selected nodes: ' + graph.getSelection());
  937. }
  938. vis.events.addListener(graph, 'select', onSelect);
  939. </pre>
  940. <p>
  941. The following events are available.
  942. </p>
  943. <table>
  944. <col width="10%">
  945. <col width="60%">
  946. <col width="30%">
  947. <tr>
  948. <th>name</th>
  949. <th>Description</th>
  950. <th>Properties</th>
  951. </tr>
  952. <tr>
  953. <td>select</td>
  954. <td>Fired after the user selects or unselects a node by clicking it,
  955. or when selecting a number of nodes by dragging a selection area
  956. around them. Not fired when the method <code>setSelection</code>
  957. is executed. The ids of the selected nodes can be retrieved via the
  958. method <code>getSelection</code>.
  959. </td>
  960. <td>none</td>
  961. </tr>
  962. </table>
  963. <h2 id="Data_Policy">Data Policy</h2>
  964. <p>
  965. All code and data is processed and rendered in the browser.
  966. No data is sent to any server.
  967. </p>
  968. </div>
  969. </body>
  970. </html>