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.

1522 lines
40 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 id="Overview">Overview</h2>
  13. <p>
  14. Graph is a visualization to display graphs and networks consisting of nodes
  15. and edges. The visualization is easy to use and supports custom shapes,
  16. styles, colors, sizes, images, and more.
  17. </p>
  18. <p>
  19. The graph visualization works smooth on any modern browser for up to a
  20. few hundred nodes and edges.
  21. </p>
  22. <p>
  23. To get started with Graph, install or download the
  24. <a href="http://visjs.org" target="_blank">vis.js</a> library.
  25. </p>
  26. <h2><a name="Contents"></a>Contents</h2>
  27. <ul>
  28. <li><a href="#Overview">Overview</a></li>
  29. <li><a href="#Example">Example</a></li>
  30. <li><a href="#Loading">Loading</a></li>
  31. <li>
  32. <a href="#Data_format">Data format</a>
  33. <ul>
  34. <li><a href="#Nodes">Nodes</a></li>
  35. <li><a href="#Edges">Edges</a></li>
  36. <li><a href="#DOT_language">DOT language</a></li>
  37. </ul>
  38. </li>
  39. <li>
  40. <a href="#Configuration_options">Configuration options</a>
  41. <ul>
  42. <li><a href="#Nodes_configuration">Nodes</a></li>
  43. <li><a href="#Edges_configuration">Edges</a></li>
  44. <li><a href="#Groups_configuration">Groups</a></li>
  45. <li><a href="#Clustering">Clustering</a></li>
  46. <li><a href="#Navigation_controls">Navigation controls</a></li>
  47. <li><a href="#Keyboard_navigation">Keyboard navigation</a></li>
  48. </ul>
  49. </li>
  50. <li><a href="#Methods">Methods</a></li>
  51. <li><a href="#Events">Events</a></li>
  52. <li><a href="#Data_policy">Data policy</a></li>
  53. </ul>
  54. <h2 id="Example">Example</h2>
  55. <p>
  56. Here a basic graph example. Note that unlike the
  57. <a href="timeline.html">Timeline</a>, the Graph does not need the vis.css
  58. file.
  59. </p>
  60. <p>
  61. More examples can be found in the
  62. <a href="../examples" target="_blank">examples directory</a>.
  63. </p>
  64. <pre class="prettyprint lang-html">&lt;!doctype html&gt;
  65. &lt;html&gt;
  66. &lt;head&gt;
  67. &lt;title&gt;Graph | Basic usage&lt;/title&gt;
  68. &lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
  69. &lt;/head&gt;
  70. &lt;body&gt;
  71. &lt;div id="mygraph"&gt;&lt;/div&gt;
  72. &lt;script type="text/javascript"&gt;
  73. // create an array with nodes
  74. var nodes = [
  75. {id: 1, label: 'Node 1'},
  76. {id: 2, label: 'Node 2'},
  77. {id: 3, label: 'Node 3'},
  78. {id: 4, label: 'Node 4'},
  79. {id: 5, label: 'Node 5'}
  80. ];
  81. // create an array with edges
  82. var edges = [
  83. {from: 1, to: 2},
  84. {from: 1, to: 3},
  85. {from: 2, to: 4},
  86. {from: 2, to: 5}
  87. ];
  88. // create a graph
  89. var container = document.getElementById('mygraph');
  90. var data= {
  91. nodes: nodes,
  92. edges: edges,
  93. };
  94. var options = {
  95. width: '400px',
  96. height: '400px'
  97. };
  98. var graph = new vis.Graph(container, data, options);
  99. &lt;/script&gt;
  100. &lt;/body&gt;
  101. &lt;/html&gt;
  102. </pre>
  103. <h2 id="Loading">Loading</h2>
  104. <p>
  105. Install or download the <a href="http://visjs.org" target="_blank">vis.js</a> library.
  106. in a subfolder of your project. Include the library script in the head of your html code:
  107. </p>
  108. <pre class="prettyprint lang-html">
  109. &lt;script type="text/javascript" src="vis/dist/vis.js"&gt;&lt;/script&gt;
  110. </pre>
  111. The constructor of the Graph is <code>vis.Graph</code>.
  112. <pre class="prettyprint lang-js">var graph = new vis.Graph(container, data, options);</pre>
  113. The constructor accepts three parameters:
  114. <ul>
  115. <li>
  116. <code>container</code> is the DOM element in which to create the graph.
  117. </li>
  118. <li>
  119. <code>data</code> is an Object containing properties <code>nodes</code> and
  120. <code>edges</code>, which both contain an array with objects.
  121. Optionally, data may contain an <code>options</code> object.
  122. The parameter <code>data</code> is optional, data can also be set using
  123. the method <code>setData</code>. Section <a href="#Data_Format">Data Format</a>
  124. describes the data object.
  125. </li>
  126. <li>
  127. <code>options</code> is an optional Object containing a name-value map
  128. with options. Options can also be set using the method
  129. <code>setOptions</code>.
  130. Section <a href="#Configuration_Options">Configuration Options</a>
  131. describes the available options.
  132. </li>
  133. </ul>
  134. <h2 id="Data_format">Data format</h2>
  135. <p>
  136. The <code>data</code> parameter of the Graph constructor is an object
  137. which can contain different types of data.
  138. The following properties are supported in the <code>data</code> object:
  139. </p>
  140. <ul>
  141. <li>
  142. <span style="font-weight: bold;">A property pair <code>nodes</code> and <code>edges</code></span>,
  143. both containing an Array with objects. The data formats are described
  144. in the sections <a href="#Nodes">Nodes</a> and <a href="#Edges">Edges</a>.
  145. Example:
  146. <pre class="prettyprint lang-js">
  147. var data = {
  148. nodes: [...],
  149. edges: [...]
  150. };
  151. </pre>
  152. </li>
  153. <li>
  154. <span style="font-weight: bold;">A property <code>dot</code></span>,
  155. containing a string with data in the
  156. <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
  157. DOT support is described in section <a href="#DOT_language">DOT_language</a>.
  158. Example:
  159. <pre class="prettyprint lang-js">
  160. var data = {
  161. dot: '...'
  162. };
  163. </pre>
  164. </li>
  165. <li>
  166. <span style="font-weight: bold;">A property <code>options</code></span>,
  167. containing an object with global options.
  168. Options can be provided as third parameter in the graph constructor
  169. as well. Section <a href="#Configuration_Options">Configuration Options</a>
  170. describes the available options.
  171. </li>
  172. </ul>
  173. <h3 id="Nodes">Nodes</h3>
  174. <p>
  175. Nodes typically have an <code>id</code> and <code>label</code>.
  176. A node must contain at least a property <code>id</code>.
  177. Nodes can have extra properties, used to define the shape and style of the
  178. nodes.
  179. </p>
  180. <p>
  181. A JavaScript Array with nodes is constructed like:
  182. </p>
  183. <pre class="prettyprint lang-js">
  184. var nodes = [
  185. {
  186. id: 1,
  187. label: 'Node 1'
  188. },
  189. // ... more nodes
  190. ];
  191. </pre>
  192. <p>
  193. Nodes support the following properties:
  194. </p>
  195. <table>
  196. <tr>
  197. <th>Name</th>
  198. <th>Type</th>
  199. <th>Required</th>
  200. <th>Description</th>
  201. </tr>
  202. <tr>
  203. <td>color</td>
  204. <td>String | Object</td>
  205. <td>no</td>
  206. <td>Color for the node.</td>
  207. </tr>
  208. <tr>
  209. <td>color.background</td>
  210. <td>String</td>
  211. <td>no</td>
  212. <td>Background color for the node.</td>
  213. </tr>
  214. <tr>
  215. <td>color.border</td>
  216. <td>String</td>
  217. <td>no</td>
  218. <td>Border color for the node.</td>
  219. </tr>
  220. <tr>
  221. <td>color.highlight</td>
  222. <td>String | Object</td>
  223. <td>no</td>
  224. <td>Color of the node when selected.</td>
  225. </tr>
  226. <tr>
  227. <td>color.highlight.background</td>
  228. <td>String</td>
  229. <td>no</td>
  230. <td>Background color of the node when selected.</td>
  231. </tr>
  232. <tr>
  233. <td>color.highlight.border</td>
  234. <td>String</td>
  235. <td>no</td>
  236. <td>Border color of the node when selected.</td>
  237. </tr>
  238. <tr>
  239. <td>group</td>
  240. <td>Number | String</td>
  241. <td>no</td>
  242. <td>A group number or name. The type can be <code>number</code>,
  243. <code>string</code>, or an other type. All nodes with the same group get
  244. the same color schema.</td>
  245. </tr>
  246. <tr>
  247. <td>fontColor</td>
  248. <td>String</td>
  249. <td>no</td>
  250. <td>Font color for label in the node.</td>
  251. </tr>
  252. <tr>
  253. <td>fontFace</td>
  254. <td>String</td>
  255. <td>no</td>
  256. <td>Font face for label in the node, for example "verdana" or "arial".</td>
  257. </tr>
  258. <tr>
  259. <td>fontSize</td>
  260. <td>Number</td>
  261. <td>no</td>
  262. <td>Font size in pixels for label in the node.</td>
  263. </tr>
  264. <tr>
  265. <td>id</td>
  266. <td>Number | String</td>
  267. <td>yes</td>
  268. <td>A unique id for this node.
  269. Nodes may not have duplicate id's.
  270. Id's do not need to be consecutive.
  271. An id is normally a number, but may be any type.</td>
  272. </tr>
  273. <tr>
  274. <td>image</td>
  275. <td>string</td>
  276. <td>no</td>
  277. <td>Url of an image. Only applicable when the shape of the node is
  278. <code>image</code>.</td>
  279. </tr>
  280. <tr>
  281. <td>radius</td>
  282. <td>number</td>
  283. <td>no</td>
  284. <td>Radius for the node. Applicable for all shapes except <code>box</code>,
  285. <code>circle</code>, <code>ellipse</code> and <code>database</code>.
  286. The value of <code>radius</code> will override a value in
  287. property <code>value</code>.</td>
  288. </tr>
  289. <tr>
  290. <td>shape</td>
  291. <td>string</td>
  292. <td>no</td>
  293. <td>Define the shape for the node.
  294. Choose from
  295. <code>ellipse</code> (default), <code>circle</code>, <code>box</code>,
  296. <code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>,
  297. <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.
  298. <br><br>
  299. In case of <code>image</code>, a property with name <code>image</code> must
  300. be provided, containing image urls.
  301. <br><br>
  302. The shapes <code>dot</code>, <code>star</code>, <code>triangle</code>,
  303. <code>triangleDown</code>, and <code>square</code>, are scalable.
  304. The size is determined by the properties <code>radius</code> or
  305. <code>value</code>.
  306. <br><br>
  307. When a property <code>label</code> is provided,
  308. this label will be displayed inside the shape in case of shapes
  309. <code>box</code>, <code>circle</code>, <code>ellipse</code>,
  310. and <code>database</code>.
  311. For all other shapes, the label will be displayed right below the shape.
  312. </td>
  313. </tr>
  314. <tr>
  315. <td>label</td>
  316. <td>string</td>
  317. <td>no</td>
  318. <td>Text label to be displayed in the node or under the image of the node.
  319. Multiple lines can be separated by a newline character <code>\n</code> .</td>
  320. </tr>
  321. <tr>
  322. <td>title</td>
  323. <td>string</td>
  324. <td>no</td>
  325. <td>Title to be displayed when the user hovers over the node.
  326. The title can contain HTML code.</td>
  327. </tr>
  328. <tr>
  329. <td>value</td>
  330. <td>number</td>
  331. <td>no</td>
  332. <td>A value for the node.
  333. The radius of the nodes will be scaled automatically from minimum to
  334. maximum value.
  335. Only applicable when the shape of the node is <code>dot</code>.
  336. If a <code>radius</code> is provided for the node too, it will override the
  337. radius calculated from the value.</td>
  338. </tr>
  339. <tr>
  340. <td>x</td>
  341. <td>number</td>
  342. <td>no</td>
  343. <td>Horizontal position in pixels.
  344. The horizontal position of the node will be fixed.
  345. The vertical position y may remain undefined.</td>
  346. </tr>
  347. <tr>
  348. <td>y</td>
  349. <td>number</td>
  350. <td>no</td>
  351. <td>Vertical position in pixels.
  352. The vertical position of the node will be fixed.
  353. The horizontal position x may remain undefined.</td>
  354. </tr>
  355. </table>
  356. <h3 id="Edges">Edges</h3>
  357. <p>
  358. Edges are connections between nodes.
  359. An edge must at least contain properties <code>from</code> and
  360. <code>to</code>, both referring to the <code>id</code> of a node.
  361. Edges can have extra properties, used to define the type and style.
  362. </p>
  363. <p>
  364. A JavaScript Array with edges is constructed as:
  365. </p>
  366. <pre class="prettyprint lang-js">
  367. var edges = [
  368. {
  369. from: 1,
  370. to: 3
  371. },
  372. // ... more edges
  373. ];
  374. </pre>
  375. <p>
  376. Edges support the following properties:
  377. </p>
  378. <table>
  379. <tr>
  380. <th>Name</th>
  381. <th>Type</th>
  382. <th>Required</th>
  383. <th>Description</th>
  384. </tr>
  385. <tr>
  386. <td>color</td>
  387. <td>string</td>
  388. <td>no</td>
  389. <td>A HTML color for the edge.</td>
  390. </tr>
  391. <tr>
  392. <td>dash</td>
  393. <td>Object</td>
  394. <td>no</td>
  395. <td>
  396. Object containing properties for dashed lines.
  397. Available properties: <code>length</code>, <code>gap</code>,
  398. <code>altLength</code>.
  399. </td>
  400. </tr>
  401. <tr>
  402. <td>dash.altLength</td>
  403. <td>number</td>
  404. <td>no</td>
  405. <td>Length of the alternated dash in pixels on a dashed line.
  406. Specifying <code>dash.altLength</code> allows for creating
  407. a dashed line with a dash-dot style, for example when
  408. <code>dash.length=10</code> and <code>dash.altLength=5</code>.
  409. See also the option <code>dahs.length</code>.
  410. Only applicable when the line style is <code>dash-line</code>.</td>
  411. </tr>
  412. <tr>
  413. <td>dash.length</td>
  414. <td>number</td>
  415. <td>no</td>
  416. <td>Length of a dash in pixels on a dashed line.
  417. Only applicable when the line style is <code>dash-line</code>.</td>
  418. </tr>
  419. <tr>
  420. <td>dash.gap</td>
  421. <td>number</td>
  422. <td>no</td>
  423. <td>Length of a gap in pixels on a dashed line.
  424. Only applicable when the line style is <code>dash-line</code>.</td>
  425. </tr>
  426. <tr>
  427. <td>fontColor</td>
  428. <td>String</td>
  429. <td>no</td>
  430. <td>Font color for the text label of the edge.
  431. Only applicable when property <code>label</code> is defined.</td>
  432. </tr>
  433. <tr>
  434. <td>fontFace</td>
  435. <td>String</td>
  436. <td>no</td>
  437. <td>Font face for the text label of the edge,
  438. for example "verdana" or "arial".
  439. Only applicable when property <code>label</code> is defined.</td>
  440. </tr>
  441. <tr>
  442. <td>fontSize</td>
  443. <td>Number</td>
  444. <td>no</td>
  445. <td>Font size in pixels for the text label of the edge.
  446. Only applicable when property <code>label</code> is defined.</td>
  447. </tr>
  448. <tr>
  449. <td>from</td>
  450. <td>Number | String</td>
  451. <td>yes</td>
  452. <td>The id of a node where the edge starts. The type must correspond with
  453. the type of the node id's. This is normally a number, but can be any
  454. type.</td>
  455. </tr>
  456. <tr>
  457. <td>length</td>
  458. <td>number</td>
  459. <td>no</td>
  460. <td>The length of the edge in pixels.</td>
  461. </tr>
  462. <tr>
  463. <td>style</td>
  464. <td>string</td>
  465. <td>no</td>
  466. <td>Define a line style for the edge.
  467. Choose from <code>line</code> (default), <code>arrow</code>,
  468. <code>arrow-center</code>, or <code>dash-line</code>.
  469. </td>
  470. </tr>
  471. <tr>
  472. <td>label</td>
  473. <td>string</td>
  474. <td>no</td>
  475. <td>Text label to be displayed halfway the edge.</td>
  476. </tr>
  477. <tr>
  478. <td>title</td>
  479. <td>string</td>
  480. <td>no</td>
  481. <td>Title to be displayed when the user hovers over the edge.
  482. The title can contain HTML code.</td>
  483. </tr>
  484. <tr>
  485. <td>to</td>
  486. <td>Number | String</td>
  487. <td>yes</td>
  488. <td>The id of a node where the edge ends. The type must correspond with
  489. the type of the node id's. This is normally a number, but can be any
  490. type.</td>
  491. </tr>
  492. <tr>
  493. <td>value</td>
  494. <td>number</td>
  495. <td>no</td>
  496. <td>A value for the edge.
  497. The width of the edges will be scaled automatically from minimum to
  498. maximum value.
  499. If a <code>width</code> is provided for the edge too, it will override the
  500. width calculated from the value.</td>
  501. </tr>
  502. <tr>
  503. <td>width</td>
  504. <td>number</td>
  505. <td>no</td>
  506. <td>Width of the line in pixels. The <code>width</code> will
  507. override a specified <code>value</code>, if a <code>value</code> is
  508. specified too.</td>
  509. </tr>
  510. </table>
  511. <h3 id="DOT_language">DOT language</h3>
  512. <p>
  513. Graph supports data in the
  514. <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
  515. To provide data in the DOT language, the <code>data</code> object must contain
  516. a property <code>dot</code> with a String containing the data.
  517. </p>
  518. <p>
  519. Example usage:
  520. </p>
  521. <pre class="prettyprint lang-js">
  522. // provide data in the DOT language
  523. var data = {
  524. dot: 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
  525. };
  526. // create a graph
  527. var graph = new vis.Graph(container, data);
  528. </pre>
  529. <h2 id="Configuration_options">Configuration options</h2>
  530. <p>
  531. Options can be used to customize the graph. Options are defined as a JSON object.
  532. All options are optional.
  533. </p>
  534. <pre class="prettyprint lang-js">
  535. var options = {
  536. width: '100%',
  537. height: '400px',
  538. edges: {
  539. color: 'red',
  540. width: 2
  541. }
  542. };
  543. </pre>
  544. <p>
  545. The following options are available.
  546. </p>
  547. <table>
  548. <tr>
  549. <th>Name</th>
  550. <th>Type</th>
  551. <th>Default</th>
  552. <th>Description</th>
  553. </tr>
  554. <tr>
  555. <td><a href="#Clustering">clustering</a></td>
  556. <td>Object</td>
  557. <td>none</td>
  558. <td>
  559. Clustering configuration. Clustering is turned off by default. See section <a href="#Clustering">Clustering</a> for an overview of the available options.
  560. </td>
  561. </tr>
  562. <tr>
  563. <td><a href="#Edges_configuration">edges</a></td>
  564. <td>Object</td>
  565. <td>none</td>
  566. <td>
  567. Configuration options applied to all edges. See section <a href="#Edges_configuration">Edges configuration</a> for an overview of the available options.
  568. </td>
  569. </tr>
  570. <tr>
  571. <td><a href="#Groups_configuration">groups</a></td>
  572. <td>Object</td>
  573. <td>none</td>
  574. <td>It is possible to specify custom styles for groups.
  575. Each node assigned a group gets the specified style.
  576. See <a href="#Groups_configuration">Groups configuration</a> for an overview of the available styles
  577. and an example.
  578. </td>
  579. </tr>
  580. <tr>
  581. <td>height</td>
  582. <td>String</td>
  583. <td>"400px"</td>
  584. <td>The height of the graph in pixels or as a percentage.</td>
  585. </tr>
  586. <tr>
  587. <td><a href="#Keyboard_navigation">keyboard</a></td>
  588. <td>Object</td>
  589. <td>none</td>
  590. <td>
  591. Configuration options for shortcuts keys. Sortcut keys are turned off by default. See section <a href="#Keyboard_navigation">Keyboard navigation</a> for an overview of the available options.
  592. </td>
  593. </tr>
  594. <tr>
  595. <td><a href="#Navigation_controls">navigation</a></td>
  596. <td>Object</td>
  597. <td>none</td>
  598. <td>
  599. Configuration options for the navigation controls. See section <a href="#Navigation_controls">Navigation controls</a> for an overview of the available options.
  600. </td>
  601. </tr>
  602. <tr>
  603. <td><a href="#Nodes_configuration">nodes</a></td>
  604. <td>Object</td>
  605. <td>none</td>
  606. <td>
  607. Configuration options applied to all nodes. See section <a href="#Nodes_configuration">Nodes configuration</a> for an overview of the available options.
  608. </td>
  609. </tr>
  610. <tr>
  611. <td>selectable</td>
  612. <td>Boolean</td>
  613. <td>true</td>
  614. <td>If true, nodes in the graph can be selected by clicking them.
  615. Long press can be used to select multiple nodes.</td>
  616. </tr>
  617. <tr>
  618. <td>stabilize</td>
  619. <td>Boolean</td>
  620. <td>true</td>
  621. <td>If true, the graph is stabilized before displaying it. If false,
  622. the nodes move to a stabe position visibly in an animated way.</td>
  623. </tr>
  624. <tr>
  625. <td>width</td>
  626. <td>String</td>
  627. <td>"400px"</td>
  628. <td>The width of the graph in pixels or as a percentage.</td>
  629. </tr>
  630. </table>
  631. <br>
  632. <h3 id="Nodes_configuration">Nodes configuration</h3>
  633. <p>
  634. Nodes can be configured with different styles and shapes. To configure nodes, provide an object named <code>nodes</code> in the <code>options</code> for the Graph.
  635. </p>
  636. <p>
  637. For example to give the nodes a custom color, shape, and size:
  638. </p>
  639. <pre class="prettyprint lang-js">
  640. var options = {
  641. // ...
  642. nodes: {
  643. color: {
  644. background: 'white',
  645. border: 'red',
  646. highlight: {
  647. background: 'pink',
  648. border: 'red'
  649. }
  650. },
  651. shape: 'star',
  652. radius: 24
  653. }
  654. };
  655. </pre>
  656. <p>
  657. The following options are available for nodes. These options must be created
  658. inside an object <code>nodes</code> in the graphs options object.</p>
  659. <table>
  660. <tr>
  661. <td>color</td>
  662. <td>String | Object</td>
  663. <td>Object</td>
  664. <td>Default color of the nodes. When color is a string, the color is applied
  665. to both background as well as the border of the node.</td>
  666. </tr>
  667. <tr>
  668. <td>color.background</td>
  669. <td>String</td>
  670. <td>"#97C2FC"</td>
  671. <td>Default background color of the nodes</td>
  672. </tr>
  673. <tr>
  674. <td>color.border</td>
  675. <td>String</td>
  676. <td>"#2B7CE9"</td>
  677. <td>Default border color of the nodes</td>
  678. </tr>
  679. <tr>
  680. <td>color.highlight</td>
  681. <td>String | Object</td>
  682. <td>Object</td>
  683. <td>Default color of the node when the node is selected. In case of a string, the color is applied to
  684. both border and background of the node.</td>
  685. </tr>
  686. <tr>
  687. <td>color.highlight.background</td>
  688. <td>String</td>
  689. <td>"#D2E5FF"</td>
  690. <td>Default background color of the node when selected.</td>
  691. </tr>
  692. <tr>
  693. <td>color.highlight.border</td>
  694. <td>String</td>
  695. <td>"#2B7CE9"</td>
  696. <td>Default border color of the node when selected.</td>
  697. </tr>
  698. <tr>
  699. <td>fontColor</td>
  700. <td>String</td>
  701. <td>"black"</td>
  702. <td>Default font color for the text label in the nodes.</td>
  703. </tr>
  704. <tr>
  705. <td>fontFace</td>
  706. <td>String</td>
  707. <td>"sans"</td>
  708. <td>Default font face for the text label in the nodes, for example "verdana" or "arial".</td>
  709. </tr>
  710. <tr>
  711. <td>fontSize</td>
  712. <td>Number</td>
  713. <td>14</td>
  714. <td>Default font size in pixels for the text label in the nodes.</td>
  715. </tr>
  716. <tr>
  717. <td>group</td>
  718. <td>String</td>
  719. <td>none</td>
  720. <td>Default group for the nodes.</td>
  721. </tr>
  722. <tr>
  723. <td>image</td>
  724. <td>String</td>
  725. <td>none</td>
  726. <td>Default image url for the nodes. only applicable to shape <code>image</code>.</td>
  727. </tr>
  728. <tr>
  729. <td>widthMin</td>
  730. <td>Number</td>
  731. <td>16</td>
  732. <td>The minimum width for a scaled image. Only applicable to shape <code>image</code>.</td>
  733. </tr>
  734. <tr>
  735. <td>widthMax</td>
  736. <td>Number</td>
  737. <td>64</td>
  738. <td>The maximum width for a scaled image. Only applicable to shape <code>image</code>.</td>
  739. </tr>
  740. <tr>
  741. <td>shape</td>
  742. <td>String</td>
  743. <td>"ellipse"</td>
  744. <td>The default shape for all nodes.
  745. Choose from
  746. <code>ellipse</code> (default), <code>circle</code>, <code>box</code>,
  747. <code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>,
  748. <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.
  749. This shape can be overridden by a group shape, or by a shape of an individual node.</td>
  750. </tr>
  751. <tr>
  752. <td>radius</td>
  753. <td>Number</td>
  754. <td>5</td>
  755. <td>The default radius for a node. Only applicable to shapes <code>dot</code>,
  756. <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.</td>
  757. </tr>
  758. <tr>
  759. <td>radiusMin</td>
  760. <td>Number</td>
  761. <td>5</td>
  762. <td>The minimum radius for a scaled node. Only applicable to shapes <code>dot</code>,
  763. <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.</td>
  764. </tr>
  765. <tr>
  766. <td>radiusMax</td>
  767. <td>Number</td>
  768. <td>20</td>
  769. <td>The maximum radius for a scaled node. Only applicable to shapes <code>dot</code>,
  770. <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.</td>
  771. </tr>
  772. </table>
  773. <h3 id="Edges_configuration">Edges configuration</h3>
  774. <p>
  775. Edges can be configured with different length and styling. To configure edges, provide an object named <code>edges</code> in the <code>options</code> for the Graph.
  776. </p>
  777. <p>
  778. For example to set the width of all edges to 2 pixels and give them a red color:
  779. </p>
  780. <pre class="prettyprint lang-js">
  781. var options = {
  782. // ...
  783. edges: {
  784. color: 'red',
  785. width: 2
  786. }
  787. };
  788. </pre>
  789. <p>
  790. The following options are available for edges. These options must be created
  791. inside an object <code>edges</code> in the graphs options object.
  792. </p>
  793. <table>
  794. <tr>
  795. <th>Name</th>
  796. <th>Type</th>
  797. <th>Default</th>
  798. <th>Description</th>
  799. </tr>
  800. <tr>
  801. <td>color</td>
  802. <td>String</td>
  803. <td>"#2B7CE9"</td>
  804. <td>The default color of a edge.</td>
  805. </tr>
  806. <tr>
  807. <td>dash</td>
  808. <td>Object</td>
  809. <td>Object</td>
  810. <td>
  811. Object containing default properties for dashed lines.
  812. Available properties: <code>length</code>, <code>gap</code>,
  813. <code>altLength</code>.
  814. </td>
  815. </tr>
  816. <tr>
  817. <td>dash.altLength</td>
  818. <td>number</td>
  819. <td>none</td>
  820. <td>Default length of the alternated dash in pixels on a dashed line.
  821. Specifying <code>dash.altLength</code> allows for creating
  822. a dashed line with a dash-dot style, for example when
  823. <code>dash.length=10</code> and <code>dash.altLength=5</code>.
  824. See also the option <code>dahs.length</code>.
  825. Only applicable when the line style is <code>dash-line</code>.</td>
  826. </tr>
  827. <tr>
  828. <td>dash.length</td>
  829. <td>number</td>
  830. <td>10</td>
  831. <td>Default length of a dash in pixels on a dashed line.
  832. Only applicable when the line style is <code>dash-line</code>.</td>
  833. </tr>
  834. <tr>
  835. <td>dash.gap</td>
  836. <td>number</td>
  837. <td>5</td>
  838. <td>Default length of a gap in pixels on a dashed line.
  839. Only applicable when the line style is <code>dash-line</code>.</td>
  840. </tr>
  841. <tr>
  842. <td>length</td>
  843. <td>Number</td>
  844. <td>100</td>
  845. <td>The default length of a edge.</td>
  846. </tr>
  847. <tr>
  848. <td>style</td>
  849. <td>String</td>
  850. <td>"line"</td>
  851. <td>The default style of a edge.
  852. Choose from <code>line</code> (default), <code>arrow</code>,
  853. <code>arrow-center</code>, <code>dash-line</code>.</td>
  854. </tr>
  855. <tr>
  856. <td>width</td>
  857. <td>Number</td>
  858. <td>1</td>
  859. <td>The default width of a edge.</td>
  860. </tr>
  861. </table>
  862. <h3 id="Groups_configuration">Groups configuration</h3>
  863. <p>It is possible to specify custom styles for groups of nodes.
  864. Each node having assigned to this group gets the specified style.
  865. The options <code>groups</code> is an object containing one or multiple groups,
  866. identified by a unique string, the groupname.
  867. </p>
  868. <p>
  869. A group can have the following styles:
  870. </p>
  871. <pre class="prettyprint lang-js">
  872. var options = {
  873. // ...
  874. groups: {
  875. mygroup: {
  876. shape: 'circle',
  877. color: {
  878. border: 'black',
  879. background: 'white',
  880. highlight: {
  881. border: 'yellow',
  882. background: 'orange'
  883. }
  884. }
  885. fontColor: 'red',
  886. fontSize: 18
  887. }
  888. // add more groups here
  889. }
  890. };
  891. var nodes = [
  892. {id: 1, label: 'Node 1'}, // will get the default style
  893. {id: 2, label: 'Node 2', group: 'mygroup'}, // will get the style from 'mygroup'
  894. // ... more nodes
  895. ];
  896. </pre>
  897. <p>The following styles are available for groups:</p>
  898. <table>
  899. <tr>
  900. <th>Name</th>
  901. <th>Type</th>
  902. <th>Default</th>
  903. <th>Description</th>
  904. </tr>
  905. <tr>
  906. <td>color</td>
  907. <td>String | Object</td>
  908. <td>Object</td>
  909. <td>Color of the node</td>
  910. </tr>
  911. <tr>
  912. <td>color.border</td>
  913. <td>String</td>
  914. <td>"#2B7CE9"</td>
  915. <td>Border color of the node</td>
  916. </tr>
  917. <tr>
  918. <td>color.background</td>
  919. <td>String</td>
  920. <td>"#97C2FC"</td>
  921. <td>Background color of the node</td>
  922. </tr>
  923. <tr>
  924. <td>color.highlight</td>
  925. <td>String | Object</td>
  926. <td>"#D2E5FF"</td>
  927. <td>Default color of the node when the node is selected. In case of a string, the color is applied to
  928. both border and background of the node.</td>
  929. </tr>
  930. <tr>
  931. <td>color.highlight.background</td>
  932. <td>String</td>
  933. <td>"#D2E5FF"</td>
  934. <td>Background color of the node when selected.</td>
  935. </tr>
  936. <tr>
  937. <td>color.highlight.border</td>
  938. <td>String</td>
  939. <td>"#D2E5FF"</td>
  940. <td>Border color of the node when selected.</td>
  941. </tr>
  942. <tr>
  943. <td>image</td>
  944. <td>String</td>
  945. <td>none</td>
  946. <td>Default image for the nodes. Only applicable in combination with
  947. shape <code>image</code>.</td>
  948. </tr>
  949. <tr>
  950. <td>fontColor</td>
  951. <td>String</td>
  952. <td>"black"</td>
  953. <td>Font color of the node.</td>
  954. </tr>
  955. <tr>
  956. <td>fontFace</td>
  957. <td>String</td>
  958. <td>"sans"</td>
  959. <td>Font name of the node, for example "verdana" or "arial".</td>
  960. </tr>
  961. <tr>
  962. <td>fontSize</td>
  963. <td>Number</td>
  964. <td>14</td>
  965. <td>Font size for the node in pixels.</td>
  966. </tr>
  967. <tr>
  968. <td>shape</td>
  969. <td>String</td>
  970. <td>"ellipse"</td>
  971. <td>Choose from
  972. <code>ellipse</code> (default), <code>circle</code>, <code>box</code>,
  973. <code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>,
  974. <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.
  975. In case of image, a property with name image must be provided, containing
  976. image urls.</td>
  977. </tr>
  978. <tr>
  979. <td>radius</td>
  980. <td>Number</td>
  981. <td>5</td>
  982. <td>Default radius for the node. Only applicable in combination with
  983. shapes <code>box</code> and <code>dot</code>.</td>
  984. </tr>
  985. </table>
  986. <h3 id="Clustering">Clustering</h3>
  987. <p>
  988. The graph now supports dynamic clustering of nodes. This allows a user to view a very large dataset (> 50.000 nodes) without
  989. sacrificing performance. When loading a large dataset, the nodes are clustered initially (this may take a small while) to have a
  990. responsive visualization to work with. The clustering is both outside-in and inside-out. Outside-in means that nodes with only one
  991. connection will be contained, or clustered, in the node it is connected to. Inside-out clustering first determines which nodes are hubs.
  992. Hubs are defined as the nodes with the top 3% highest amount of connections (assuming normal distribution). These hubs then "grow", meaning
  993. they contain the nodes they are connected to within themselves. The edges that were connected to the nodes that are absorbed will be reconnected to the cluster.
  994. <br />
  995. <br />
  996. A cluster is just a node that has references to the nodes and edges it contains. It has an internal counter to keep track of its size, which is then used
  997. to calculate the required forces. The contained nodes are removed from the global nodes index, greatly speeding up the system.
  998. <br />
  999. <br />
  1000. The clustering has the following user-configurable settings. The default values have been tested with the Graph examples and work well.
  1001. The default state for clustering is <b>off</b>.
  1002. </p>
  1003. <pre class="prettyprint">
  1004. // These variables must be defined in an options object named clustering.
  1005. // If a variable is not supplied, the default value is used.
  1006. var options = {
  1007. clustering: {
  1008. initialMaxNodes: 100,
  1009. clusterThreshold:500,
  1010. reduceToNodes:300,
  1011. chainThreshold: 0.4,
  1012. clusterEdgeThreshold: 20,
  1013. sectorThreshold: 50,
  1014. screenSizeThreshold: 0.2,
  1015. fontSizeMultiplier: 4.0,
  1016. forceAmplification: 0.6,
  1017. distanceAmplification: 0.2,
  1018. edgeGrowth: 11,
  1019. nodeScaling: {width: 10,
  1020. height: 10,
  1021. radius: 10},
  1022. activeAreaBoxSize: 100
  1023. }
  1024. }
  1025. // OR to just load the module with default values:
  1026. var options: {
  1027. clustering: true
  1028. }
  1029. </pre>
  1030. <table>
  1031. <tr>
  1032. <th>Name</th>
  1033. <th>Type</th>
  1034. <th>Default</th>
  1035. <th>Description</th>
  1036. </tr>
  1037. <tr>
  1038. <td>initialMaxNodes</td>
  1039. <td>Number</td>
  1040. <td>100</td>
  1041. <td>If the initial amount of nodes is larger than this value, clustering starts until the total number of nodes is less than this value.</td>
  1042. </tr>
  1043. <tr>
  1044. <td>clusterThreshold</td>
  1045. <td>Number</td>
  1046. <td>500</td>
  1047. <td>While zooming in and out, clusters can open up. Once there are more than <code>absoluteMaxNumberOfNodes</code> nodes,
  1048. clustering starts until <code>reduceToMaxNumberOfNodes</code> nodes are left. This is done to ensure performance is continuously fluid.</td>
  1049. </tr>
  1050. <tr>
  1051. <td>reduceToNodes</td>
  1052. <td>Number</td>
  1053. <td>300</td>
  1054. <td>While zooming in and out, clusters can open up. Once there are more than <code>absoluteMaxNumberOfNodes</code> nodes,
  1055. clustering starts until <code>reduceToMaxNumberOfNodes</code> nodes are left. This is done to ensure performance is continiously fluid.</td>
  1056. </tr>
  1057. <tr>
  1058. <td>chainThreshold</td>
  1059. <td>Number</td>
  1060. <td>0.4</td>
  1061. <td>Because of the clustering methods used, long chains of nodes can be formed. To reduce these chains, this threshold is used.
  1062. A <code>chainThreshold</code> of 0.4 means that no more than 40% of all nodes are allowed to be a chain node (two connections).
  1063. If there are more, they are clustered together.</td>
  1064. </tr>
  1065. <tr>
  1066. <td>clusterEdgeThreshold</td>
  1067. <td>Number</td>
  1068. <td>20</td>
  1069. <td>This is the absolute edge length threshold in pixels. If the edge is smaller on screen (that means zooming out reduces this length)
  1070. the node will be clustered. This is triggered when zooming out.</td>
  1071. </tr>
  1072. <tr>
  1073. <td>sectorThreshold</td>
  1074. <td>Integer</td>
  1075. <td>50</td>
  1076. <td>If a cluster larger than <code>sectorThreshold</code> is opened, a seperate instance called a sector, will be created. All the simulation of
  1077. nodes outside of this instance will be paused. This is to maintain performance and clarity when examining large clusters.
  1078. A sector is collapsed when zooming out far enough. Also, when opening a cluster, if this cluster is smaller than this value, it is fully unpacked.</td>
  1079. </tr>
  1080. <tr>
  1081. <td>screenSizeThreshold</td>
  1082. <td>Number</td>
  1083. <td>0.2</td>
  1084. <td>When zooming in, the clusters become bigger. A <code>screenSizeThreshold</code> of 0.2 means that if the width or height of this cluster
  1085. becomes bigger than 20% of the width or height of the canvas, the cluster is opened. If a sector has been created, if the sector is smaller than
  1086. 20%, we collapse this sector.</td>
  1087. </tr>
  1088. <tr>
  1089. <td>fontSizeMultiplier</td>
  1090. <td>Number</td>
  1091. <td>4.0</td>
  1092. <td>This parameter denotes the increase in fontSize of the cluster when a single node is added to it.</td>
  1093. </tr>
  1094. <tr>
  1095. <td>forceAmplification</td>
  1096. <td>Number</td>
  1097. <td>0.6</td>
  1098. <td>This factor is used to calculate the increase of the repulsive force of a cluster. It is calculated by the following
  1099. formula: <code>repulsingForce *= 1 + (clusterSize * forceAmplification)</code>.</td>
  1100. </tr>
  1101. <tr>
  1102. <td>distanceAmplification</td>
  1103. <td>Number</td>
  1104. <td>0.2</td>
  1105. <td>This factor is used to calculate the increase in effective range of the repulsive force of the cluster.
  1106. A larger cluster has a longer range. It is calculated by the following
  1107. formula: <code>minDistance *= 1 + (clusterSize * distanceAmplification)</code>.</td>
  1108. </tr>
  1109. <tr>
  1110. <td>edgeGrowth</td>
  1111. <td>Number</td>
  1112. <td>11</td>
  1113. <td>This factor determines the elongation of edges connected to a cluster.</td>
  1114. </tr>
  1115. <tr>
  1116. <td>nodeScaling.width</td>
  1117. <td>Number</td>
  1118. <td>10</td>
  1119. <td>This factor determines how much the width of a cluster increases in pixels per added node.</td>
  1120. </tr>
  1121. <tr>
  1122. <td>nodeScaling.height</td>
  1123. <td>Number</td>
  1124. <td>10</td>
  1125. <td>This factor determines how much the height of a cluster increases in pixels per added node.</td>
  1126. </tr>
  1127. <tr>
  1128. <td>nodeScaling.radius</td>
  1129. <td>Number</td>
  1130. <td>10</td>
  1131. <td>This factor determines how much the radius of a cluster increases in pixels per added node.</td>
  1132. </tr>
  1133. <tr>
  1134. <td>activeAreaBoxSize</td>
  1135. <td>Number</td>
  1136. <td>100</td>
  1137. <td>Imagine a square with an edge length of <code>activeAreaBoxSize</code> pixels around your cursor.
  1138. If a cluster is in this box as you zoom in, the cluster can be opened in a seperate sector.
  1139. This is regardless of the zoom level.</td>
  1140. </tr>
  1141. </table>
  1142. <h3 id="Navigation_controls">Navigation controls</h3>
  1143. <p>
  1144. Graph has a menu with navigation controls, which is disabled by default.
  1145. It can be configured with the following settings.
  1146. </p>
  1147. <pre class="prettyprint">
  1148. // simple use of navigation controls
  1149. var options: {
  1150. navigation: true
  1151. }
  1152. // advanced use of navigation controls
  1153. var options: {
  1154. navigation: {
  1155. iconPath: '/path/to/navigation/icons/'
  1156. }
  1157. }
  1158. </pre>
  1159. <table>
  1160. <tr>
  1161. <th>Name</th>
  1162. <th>Type</th>
  1163. <th>Default</th>
  1164. <th>Description</th>
  1165. </tr>
  1166. <tr>
  1167. <td>iconPath</td>
  1168. <td>string</td>
  1169. <td>"/img"</td>
  1170. <td>The path to the icon images can be defined here. If custom icons are used, they have to have the same filename as the ones originally packaged with vis.js.</td>
  1171. </tr>
  1172. </table>
  1173. <h3 id="Keyboard_navigation">Keyboard navigation</h3>
  1174. <p>
  1175. The graph can be navigated using shortcut keys.
  1176. It can be configured with the following user-configurable settings.
  1177. The default state for the keyboard navigation is <b>off</b>. The predefined keys can be found in the example <a href="../examples/graph/20_navigation.html">20_navigation.html</a>.
  1178. </p>
  1179. <pre class="prettyprint">
  1180. // simple use of keyboard controls
  1181. var options: {
  1182. keyboard: true
  1183. }
  1184. // advanced configuration for keyboard controls
  1185. var options: {
  1186. keyboard: {
  1187. speed: {
  1188. x: 10,
  1189. y: 10,
  1190. zoom: 0.02
  1191. }
  1192. }
  1193. }
  1194. </pre>
  1195. <table>
  1196. <tr>
  1197. <th>Name</th>
  1198. <th>Type</th>
  1199. <th>Default</th>
  1200. <th>Description</th>
  1201. </tr>
  1202. <tr>
  1203. <td>speed.x</td>
  1204. <td>Number</td>
  1205. <td>10</td>
  1206. <td>This defines the speed of the camera movement in the x direction when using the keyboard navigation.
  1207. </td>
  1208. </tr>
  1209. <tr>
  1210. <td>speed.y</td>
  1211. <td>Number</td>
  1212. <td>10</td>
  1213. <td>This defines the speed of the camera movement in the y direction when using the keyboard navigation.</td>
  1214. </tr>
  1215. <tr>
  1216. <td>speed.zoom</td>
  1217. <td>Number</td>
  1218. <td>0.02</td>
  1219. <td>This defines the zoomspeed when using the keyboard navigation.</td>
  1220. </tr>
  1221. </table>
  1222. <h2 id="Methods">Methods</h2>
  1223. <p>
  1224. Graph supports the following methods.
  1225. </p>
  1226. <table>
  1227. <tr>
  1228. <th>Method</th>
  1229. <th>Return Type</th>
  1230. <th>Description</th>
  1231. </tr>
  1232. <tr>
  1233. <td>getSelection()</td>
  1234. <td>Array of ids</td>
  1235. <td>Returns an array with the ids of the selected nodes.
  1236. Returns an empty array if no nodes are selected.
  1237. The selections are not ordered.
  1238. </td>
  1239. </tr>
  1240. <tr>
  1241. <td>on(event, callback)</td>
  1242. <td>none</td>
  1243. <td>Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: <code>select</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events</a> for more information.</td>
  1244. </tr>
  1245. <tr>
  1246. <td>off(event, callback)</td>
  1247. <td>none</td>
  1248. <td>Remove an event listener created before via function <code>on(event, callback)</code>. See section <a href="#Events">Events</a> for more information.</td>
  1249. </tr>
  1250. <tr>
  1251. <td>redraw()</td>
  1252. <td>none</td>
  1253. <td>Redraw the graph. Useful when the layout of the webpage changed.</td>
  1254. </tr>
  1255. <tr>
  1256. <td>setData(data,[disableStart])</td>
  1257. <td>none</td>
  1258. <td>Loads data. Parameter <code>data</code> is an object containing
  1259. nodes, edges, and options. Parameters nodes, edges are an Array.
  1260. Options is a name-value map and is optional. Parameter <code>disableStart</code> is
  1261. an optional Boolean and can disable the start of the simulation that would begin at the end
  1262. of this function by default.
  1263. </td>
  1264. </tr>
  1265. <tr>
  1266. <td>setOptions(options)</td>
  1267. <td>none</td>
  1268. <td>Set options for the graph. The available options are described in
  1269. the section <a href="#Configuration_options">Configuration Options</a>.
  1270. </td>
  1271. </tr>
  1272. <tr>
  1273. <td>setSelection(selection)</td>
  1274. <td>none</td>
  1275. <td>Select nodes.
  1276. <code>selection</code> is an array with ids of nodes to be selected.
  1277. The array <code>selection</code> can contain zero or multiple ids.
  1278. Example usage: <code>graph.setSelection([3, 5]);</code> will select
  1279. nodes with id 3 and 5.
  1280. </td>
  1281. </tr>
  1282. <tr>
  1283. <td>setSize(width, height)</td>
  1284. <td>none</td>
  1285. <td>Parameters <code>width</code> and <code>height</code> are strings,
  1286. containing a new size for the visualization. Size can be provided in pixels
  1287. or in percentages.</td>
  1288. </tr>
  1289. </table>
  1290. <h2 id="Events">Events</h2>
  1291. <p>
  1292. Graph fires events after one or multiple nodes are selected or deselected.
  1293. The event can be catched by creating a listener.
  1294. </p>
  1295. <p>
  1296. Here an example on how to catch a <code>select</code> event.
  1297. </p>
  1298. <pre class="prettyprint lang-js">
  1299. graph.on('select', function (properties) {
  1300. alert('selected nodes: ' + properties.nodes);
  1301. });
  1302. </pre>
  1303. <p>
  1304. A listener can be removed via the function <code>off</code>:
  1305. </p>
  1306. <pre class="prettyprint lang-js">
  1307. function onSelect (properties) {
  1308. alert('selected nodes: ' + properties.nodes);
  1309. }
  1310. // add event listener
  1311. graph.on('select', onSelect);
  1312. // do stuff...
  1313. // remove event listener
  1314. graph.off('select', onSelect);
  1315. </pre>
  1316. <p>
  1317. The following events are available.
  1318. </p>
  1319. <table>
  1320. <tr>
  1321. <th>name</th>
  1322. <th>Description</th>
  1323. <th>Properties</th>
  1324. </tr>
  1325. <tr>
  1326. <td>select</td>
  1327. <td>Fired after the user selects or deselects a node by clicking it.
  1328. Not fired when the method <code>setSelection</code>is executed.
  1329. </td>
  1330. <td>
  1331. <ul>
  1332. <li><code>nodes</code>: an array with the ids of the selected nodes</li>
  1333. </ul>
  1334. </td>
  1335. </tr>
  1336. </table>
  1337. <h2 id="Data_policy">Data policy</h2>
  1338. <p>
  1339. All code and data is processed and rendered in the browser.
  1340. No data is sent to any server.
  1341. </p>
  1342. </div>
  1343. </body>
  1344. </html>