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.

1066 lines
28 KiB

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