jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git

<!doctype html><html>
<head>    <title>Graph documentation</title>    <link rel='stylesheet' href='css/style.css' type='text/css' />
    <link href="prettify/prettify.css" type="text/css" rel="stylesheet" />    <script type="text/javascript" src="prettify/prettify.js"></script>
    <style>        pre.prettyprint {            border-color: lightgray;        }    </style></head>
<body onload="prettyPrint();"><div id="container">
<h1>Graph documentation</h1>
<table>    <tr>        <td>Author</td>        <td>Jos de Jong, <a href="http://www.almende.com" target="_blank">Almende B.V.</a></td>    </tr>    <tr>        <td>Webpage</td>        <td><a href="http://visjs.org" target="_blank">http://visjs.org</a></td>    </tr>    <tr>        <td>License</td>        <td> <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a></td>    </tr></table>

<h2><a name="Contents"></a>Contents</h2><ul>    <li><a href="#Overview">Overview</a></li>    <li><a href="#Example">Example</a></li>    <li><a href="#Loading">Loading</a></li>    <li><a href="#Data_Format">Data Format</a></li>    <li><a href="#Data_Import">Data Import</a></li>    <li><a href="#Configuration_Options">Configuration Options</a></li>    <li><a href="#Methods">Methods</a></li>    <li><a href="#Events">Events</a></li>    <li><a href="#Data_Policy">Data Policy</a></li></ul>
<h2><a name="Overview"></a>Overview</h2><p>    Graph is a visualization to display graphs and networks consisting of nodes    and edges. The visualization is easy to use and supports custom styles,    colors, sizes, images, and more.</p>
<p>    The graph visualization works smooth on any modern browser for up to a    few hundred nodes and edges.</p>
<p>    To get started with Graph, install or download the    <a href="http://visjs.org" target="_blank">vis.js</a> library.</p>
<h2><a name="Example"></a>Example</h2><p>    Here a basic graph example. More examples can be found in the    <a href="../examples" target="_blank">examples directory</a>.</p>
<pre class="prettyprint lang-html">&lt;!doctype html&gt;    &lt;html&gt;    &lt;head&gt;        &lt;title&gt;Graph | Basic usage&lt;/title&gt;
        &lt;script type="text/javascript" src="../../vis.js"&gt;&lt;/script&gt;    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id="mygraph"&gt;&lt;/div&gt;
    &lt;script type="text/javascript"&gt;        // create an array with nodes        var nodes = [            {id: 1, text: 'Node 1'},            {id: 2, text: 'Node 2'},            {id: 3, text: 'Node 3'},            {id: 4, text: 'Node 4'},            {id: 5, text: 'Node 5'}        ];
        // create an array with edges        var edges = [            {from: 1, to: 2},            {from: 1, to: 3},            {from: 2, to: 4},            {from: 2, to: 5}        ];
        // create a graph        var container = document.getElementById('mygraph');        var data= {            nodes: nodes,            edges: edges,        };        var options = {            width: '400px',            height: '400px'        };        var graph = new vis.Graph(container, data, options);    &lt;/script&gt;
    &lt;/body&gt;    &lt;/html&gt;</pre>

<h2><a name="Loading"></a>Loading</h2><p>    Install or download the <a href="http://visjs.org" target="_blank">vis.js</a> library.    in a subfolder of your project. Include the library script in the head of your html code:</p>
<pre class="prettyprint lang-html">&lt;script type="text/javascript" src="vis/vis.js"&gt;&lt;/script&gt;</pre>

The class name of the Graph is <code>vis.Graph</code>.<pre class="prettyprint lang-js">var graph = new vis.Graph(container, data, options);</pre>
The constructor accepts three parameters:<ul>    <li>        <code>container</code> is the DOM element in which to create the graph.    </li>    <li>        <code>data</code> is an Object containing properties <code>nodes</code> and        <code>edges</code>, which both contain an array with objects.        Optionally, data may contain an <code>options</code> object.        The parameter <code>data</code> is optional, data can also be set using        the method <code>setData</code>.    </li>    <li>        <code>options</code> is an optional Object containing a name-value map        with options. Options can also be set using the method        <code>setOptions</code>.    </li></ul>
<h2><a name="Data_Format"></a>Data Format</h2><p>    The Graph draws nodes and edges, which are both an Array with objects.    This section describes the data format of nodes and edges.</p>
<h3>Nodes</h3>
<p>    Nodes typically have an <code>id</code> and <code>text</code>.    A node must contain at least a property <code>id</code>.    Nodes can have extra properties, used to define the type and style the    nodes.</p>
<p>    A JavaScript Array with nodes is constructed like:</p><pre class="prettyprint lang-js">var nodes = [    {      'id': 1,      'text': 'Node 1'    },    // ... more data];</pre>

<p>    Nodes support the following properties:</p>
<table>    <tr>        <th>Name</th>        <th>Type</th>        <th>Required</th>        <th>Description</th>    </tr>
    <tr>        <td>action</td>        <td>string</td>        <td>no</td>        <td>By specifying <code>action</code>, a node can be created, updated,            or deleted. This is useful in combination with <code>timestamp</code>            to animate history, or for dynamically updating the graph.
            Available values are: <code>create</code>,            <code>update</code> (default), or <code>delete</code>.        </td>    </tr>
    <tr>        <td>backgroundColor</td>        <td>String</td>        <td>"#97C2FC"</td>        <td>Background color for the node.</td>    </tr>
    <tr>        <td>borderColor</td>        <td>String</td>        <td>"#2B7CE9"</td>        <td>Border color for the node.</td>    </tr>
    <tr>        <td>group</td>        <td>*</td>        <td>no</td>        <td>A group number or name. The type can be <code>number</code>,            <code>string</code>, or an other type. All nodes with the same group get            the same color schema.</td>    </tr>
    <tr>        <td>fontColor</td>        <td>String</td>        <td>"black"</td>        <td>Font color for text in the node.</td>    </tr>
    <tr>        <td>fontFace</td>        <td>String</td>        <td>"sans"</td>        <td>Font face for text in the node, for example "verdana" or "arial".</td>    </tr>
    <tr>        <td>fontSize</td>        <td>Number</td>        <td>14</td>        <td>Font size in pixels for text in the node.</td>    </tr>
    <tr>        <td>highlightColor</td>        <td>String</td>        <td>"#D2E5FF"</td>        <td>Background color of the node when selected.</td>    </tr>
    <tr>        <td>id</td>        <td>*</td>        <td>yes</td>        <td>A unique id for this node.            Nodes may not have duplicate id's.            Id's do not need to be consecutive.            An id is normally a number, but may be any type.</td>    </tr>
    <tr>        <td>image</td>        <td>string</td>        <td>no</td>        <td>Url of an image. Only applicable when the style of the node is            <code>image</code>.</td>    </tr>
    <tr>        <td>radius</td>        <td>number</td>        <td>no</td>        <td>Radius for the node. Applicable for all styles except <code>rect</code>,            <code>circle</code>, and <code>database</code>.            The value of <code>radius</code> will override a value in            property <code>value</code>.</td>    </tr>
    <tr>        <td>style</td>        <td>string</td>        <td>no</td>        <td>Define the shape for the node.            Choose from <code>rect</code> (default), <code>circle</code>,            <code>database</code>, <code>image</code>, <code>text</code>,            <code>dot</code>, <code>star</code>, <code>triangle</code>,            <code>triangleDown</code>, and <code>square</code>.            <br><br>
            In case of <code>image</code>, a property with name <code>image</code> must            be provided, containing image urls.            <br><br>
            The shapes <code>dot</code>, <code>star</code>, <code>triangle</code>,            <code>triangleDown</code>, and <code>square</code>, are scalable.            The size is determined by the properties <code>radius</code> or            <code>value</code>.            <br><br>
            When a property <code>text</code> is provided,            this text will be displayed inside the shape in case of styles            <code>rect</code>, <code>circle</code>, and <code>database</code>.            For all other shapes, the text will be displayed right below the shape.
        </td>    </tr>
    <tr>        <td>text</td>        <td>string</td>        <td>no</td>        <td>Text to be displayed in the node or under the image of the node.            Multiple lines can be separated by a newline character <code>\n</code> .</td>    </tr>
    <tr>        <td>timestamp</td>        <td>Date | Number</td>        <td>no</td>        <td>Timestamp used for filtering nodes when animating.            See section <a href="#Animation">Animation</a> for more information.</td>    </tr>
    <tr>        <td>title</td>        <td>string</td>        <td>no</td>        <td>Title to be displayed when the user hovers over the node.            The title can contain HTML code.</td>    </tr>
    <tr>        <td>value</td>        <td>number</td>        <td>no</td>        <td>A value for the node.            The radius of the nodes will be scaled automatically from minimum to            maximum value.            Only applicable when the style of the node is <code>dot</code>.            If a <code>radius</code> is provided for the node too, it will override the            radius calculated from the value.</td>    </tr>
    <tr>        <td>x</td>        <td>number</td>        <td>no</td>        <td>Horizontal position in pixels.            The horizontal position of the node will be fixed.            The vertical position y may remain undefined.</td>    </tr>    <tr>        <td>y</td>        <td>number</td>        <td>no</td>        <td>Vertical position in pixels.            The vertical position of the node will be fixed.            The horizontal position x may remain undefined.</td>    </tr>
</table>

<h3>Edges</h3>
<p>    Edges are connections between nodes.    An edge must at least contain properties <code>from</code> and    <code>to</code>, both referring to the <code>id</code> of a node.    Edges can have extra properties, used to define the type and style.</p>
<p>    A JavaScript Array with edges is constructed as:</p><pre class="prettyprint lang-js">var edges= [    {      'from': 1,      'to': 3    },    // ... more data];</pre>
<p>    Edges support the following properties:</p>
<table>    <tr>        <th>Name</th>        <th>Type</th>        <th>Required</th>        <th>Description</th>    </tr>
    <tr>        <td>action</td>        <td>string</td>        <td>no</td>        <td>By specifying <code>action</code>, a link can be created, updated,            or deleted. This is useful in combination with <code>timestamp</code>            to animate history, or for dynamically updating the graph.
            An action on a link can only be used when the link has an id.
            Available values are: <code>create</code> (default),            <code>update</code>, or <code>delete</code>.
        </td>    </tr>
    <tr>        <td>altdashlength</td>        <td>number</td>        <td>no</td>        <td>Length of the alternated dash in pixels on a dashed line.            Specifying <code>altdashlength</code> allows for creating            a dashed line with a dash-dot style, for example when            <code>dashlength=10</code> and <code>altdashlength=5</code>.            See also the option <code>dashlength</code>.            Only applicable when the line style is <code>dash-line</code>.</td>    </tr>
    <tr>        <td>color</td>        <td>string</td>        <td>no</td>        <td>A HTML color for the link.</td>    </tr>
    <tr>        <td>dashlength</td>        <td>number</td>        <td>no</td>        <td>Length of a dash in pixels on a dashed line.            Only applicable when the line style is <code>dash-line</code>.</td>    </tr>
    <tr>        <td>dashgap</td>        <td>number</td>        <td>no</td>        <td>Length of a gap in pixels on a dashed line.            Only applicable when the line style is <code>dash-line</code>.</td>    </tr>
    <tr>        <td>fontColor</td>        <td>String</td>        <td>"black"</td>        <td>Font color for the text label of the link.        Only applicable when "text" is defined.</td>    </tr>
    <tr>        <td>fontFace</td>        <td>String</td>        <td>"sans"</td>        <td>Font face for the text label of the link,            for example "verdana" or "arial".            Only applicable when "text" is defined.</td>    </tr>
    <tr>        <td>fontSize</td>        <td>Number</td>        <td>14</td>        <td>Font size in pixels for the text label of the link.            Only applicable when "text" is defined.</td>    </tr>
    <tr>        <td>from</td>        <td>*</td>        <td>yes</td>        <td>The id of a node where the link starts. The type must correspond with            the type of the node id's. This is normally a number, but can be any            type.</td>    </tr>
    <tr>        <td>length</td>        <td>number</td>        <td>no</td>        <td>The length of the link in pixels.</td>    </tr>
    <tr>        <td>style</td>        <td>string</td>        <td>no</td>        <td>Define a drawing style for the link.            Choose from <code>line</code> (default), <code>arrow</code>,            <code>arrow-end</code>, or <code>dash-line</code>.        </td>    </tr>
    <tr>        <td>text</td>        <td>string</td>        <td>no</td>        <td>Text to be displayed halfway the link.</td>    </tr>
    <tr>        <td>timestamp</td>        <td>Date | Number</td>        <td>no</td>        <td>Timestamp used for filtering edges when animating.            See section <a href="#Animation">Animation</a> for more information.</td>    </tr>
    <tr>        <td>title</td>        <td>string</td>        <td>no</td>        <td>Title to be displayed when the user hovers over the link.            The title can contain HTML code.</td>    </tr>
    <tr>        <td>to</td>        <td>*</td>        <td>yes</td>        <td>The id of a node where the link ends. The type must correspond with            the type of the node id's. This is normally a number, but can be any            type.</td>    </tr>    <tr>        <td>value</td>        <td>number</td>        <td>no</td>        <td>A value for the link.            The width of the edges will be scaled automatically from minimum to            maximum value.            If a <code>width</code> is provided for the link too, it will override the            width calculated from the value.</td>    </tr>
    <tr>        <td>width</td>        <td>number</td>        <td>no</td>        <td>Width of the line in pixels. The <code>width</code> will            override a specified <code>value</code>, if a <code>value</code> is            specified too.</td>    </tr></table>

<h2><a name="Data_Import"></a>Data Import</h2>
<p>    Graph contains parser to import data in the    <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.    There following methods are available:</p>

<table><tr>    <th>Method</th>    <th>Return Type</th>    <th>Description</th></tr><tr>    <td>vis.Graph.util.parseDOT(data)</td>    <td>Object</td>    <td>        Parse a string containing data in DOT language into a JSON object.        The returned object contains two arrays, <code>nodes</code>,        <code>edges</code>, containing the parsed nodes and edges.    </td></tr>    <tr>        <td>vis.Graph.util.DOTToGraph(data)</td>        <td>Object</td>        <td>            Convert a string containing a graph in DOT language into a map            containing with nodes and edges in the format of Graph.            The returned object contains parameters <code>nodes</code>,            <code>edges</code>, and <code>options</code>, which can be used            directly to draw a graph using <code>setData(data)</code>.        </td>    </tr></table>
<p>Example usage:</p>
<pre class="prettyprint lang-js">    // parse data in DOT-notation    var dot = 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';    var data = vis.Graph.util.DOTToGraph(dot);
    // create a graph    var graph = new vis.Graph(container, data);</pre>

<h2><a name="Configuration_Options"></a>Configuration Options</h2>
<p>    Options can be used to customize the graph. Options are defined as a JSON object.    All options are optional.</p>
<pre class="prettyprint lang-js">var options = {    'width':  '100%',    'height': '400px',    'edges': {        'color': 'red',        'width': 2    }};</pre>
<p>    The following options are available.</p>
<table><tr>    <th>Name</th>    <th>Type</th>    <th>Default</th>    <th>Description</th></tr>
<tr>    <td>backgroundColor</td>    <td>String or Object</td>    <td>"white"</td>    <td>The background color for the main area of the chart.        Can be either a simple HTML color string, for example: 'red' or '#00cc00',        or an object with optional properties stroke, strokeWidth, and fill.</td></tr><tr>    <td>backgroundColor.stroke</td>    <td>String</td>    <td>"#666"</td>    <td>The color of the chart border, as an HTML color string.</td></tr><tr>    <td>backgroundColor.strokeWidth</td>    <td>Number</td>    <td>1</td>    <td>The border width, in pixels.</td></tr><tr>    <td>backgroundColor.fill</td>    <td>String</td>    <td>"white"</td>    <td>The chart fill color, as an HTML color string.</td></tr>
<tr>    <td>groups</td>    <td>Object</td>    <td>none</td>    <td>It is possible to specify custom styles for groups.        Each node assigned a group gets the specified style.        See <a href="#Groups">Groups</a> for an overview of the available styles        and an example.    </td></tr>
<tr>    <td>height</td>    <td>String</td>    <td>"400px"</td>    <td>The height of the graph in pixels or as a percentage.</td></tr>
<tr>    <td>edges.altdashlength</td>    <td>number</td>    <td>none</td>    <td>Length of the alternated dash in pixels on a dashed line.        Specifying <code>altdashlength</code> allows for creating        a dashed line with a dash-dot style, for example when        <code>dashlength=10</code> and <code>altdashlength=5</code>.        See also the option <code>dashlength</code>.        Only applicable when the line style is <code>dash-line</code>.</td></tr>
<tr>    <td>edges.color</td>    <td>String</td>    <td>"#2B7CE9"</td>    <td>The default color of a link.</td></tr>
<tr>    <td>edges.dashlength</td>    <td>number</td>    <td>10</td>    <td>Length of a dash in pixels on a dashed line.        Only applicable when the line style is <code>dash-line</code>.</td></tr>
<tr>    <td>edges.dashgap</td>    <td>number</td>    <td>5</td>    <td>Length of a gap in pixels on a dashed line.        Only applicable when the line style is <code>dash-line</code>.</td></tr>
<tr>    <td>edges.length</td>    <td>Number</td>    <td>100</td>    <td>The default length of a link.</td></tr><tr>    <td>edges.style</td>    <td>String</td>    <td>"line"</td>    <td>The default style of a link.        Choose from <code>line</code> (default), <code>arrow</code>,        <code>arrow-end</code>, <code>dash-line</code>.</td></tr><tr>    <td>edges.width</td>    <td>Number</td>    <td>1</td>    <td>The default width of a link.</td></tr>
<tr>    <td>nodes.borderColor</td>    <td>String</td>    <td>"#2B7CE9"</td>    <td>Default border color of the nodes</td></tr>
<tr>    <td>nodes.backgroundColor</td>    <td>String</td>    <td>"#97C2FC"</td>    <td>Default background color of the nodes</td></tr><tr>    <td>nodes.highlightColor</td>    <td>String</td>    <td>"#D2E5FF"</td>    <td>Default background color of the node when the node is selected.</td></tr>
<tr>    <td>nodes.fontColor</td>    <td>String</td>    <td>"black"</td>    <td>Default font color for text in the nodes.</td></tr><tr>    <td>nodes.fontFace</td>    <td>String</td>    <td>"sans"</td>    <td>Default font face for text in the nodes, for example "verdana" or "arial".</td></tr><tr>    <td>nodes.fontSize</td>    <td>Number</td>    <td>14</td>    <td>Default font size in pixels for text in the nodes.</td></tr><tr>    <td>nodes.group</td>    <td>String</td>    <td>none</td>    <td>Default group for the nodes.</td></tr><tr>    <td>nodes.image</td>    <td>String</td>    <td>none</td>    <td>Default image url for the nodes. only applicable with style <code>image</code>.</td></tr>
<tr>    <td>nodes.widthMin</td>    <td>Number</td>    <td>16</td>    <td>The minimum width for a scaled image. Only applicable with style <code>image</code>.</td></tr><tr>    <td>nodes.widthMax</td>    <td>Number</td>    <td>64</td>    <td>The maximum width for a scaled image. Only applicable with style <code>image</code>.</td></tr>
<tr>    <td>nodes.style</td>    <td>String</td>    <td>"rect"</td>    <td>The default style for all nodes.        Choose from <code>rect</code> (default), <code>circle</code>,        <code>database</code>, <code>image</code>, <code>text</code>, <code>dot</code>.        This style can be overridden by a group style, or by a style of an individual node.</td></tr><tr>    <td>nodes.radius</td>    <td>Number</td>    <td>5</td>    <td>The default radius for a node. Only applicable with style <code>dot</code>.</td></tr><tr>    <td>nodes.radiusMin</td>    <td>Number</td>    <td>5</td>    <td>The minimum radius for a scaled node. Only applicable with style <code>dot</code>.</td></tr><tr>    <td>nodes.radiusMax</td>    <td>Number</td>    <td>20</td>    <td>The maximum radius for a scaled node. Only applicable with style <code>dot</code>.</td></tr>
<tr>    <td>selectable</td>    <td>Boolean</td>    <td>true</td>    <td>If true, nodes in the graph can be selected by clicking them, or        by keeping the <code>Shift</code> key down and dragging a selection area around them.        When the <code>Ctrl</code> key is down, the new selection is appended to the        previous selection. If not, the new selection replaces the previous selection.</td></tr>
<tr>    <td>stabilize</td>    <td>Boolean</td>    <td>true</td>    <td>If true, the graph is stabilized before displaying it. If false,        the nodes move to a stabe position visibly in an animated way.</td></tr>
<tr>    <td>width</td>    <td>String</td>    <td>"400px"</td>    <td>The width of the graph in pixels or as a percentage.</td></tr>
</table>
<br>
<h3><a name="Groups"></a>Groups</h3>
<p>It is possible to specify custom styles for groups of nodes.    Each node having assigned to this group gets the specified style.    The options <code>groups</code> is an object containing one or multiple groups,    identified by a unique string, the groupname.</p><p>    A group can have the following styles:</p>
<pre class="prettyprint lang-js">var options = {  // ...
  'groups': {    'mygroup': {      'style': 'circle',      'borderColor': 'black',      'backgroundColor': 'white',      'fontColor': 'red',      'fontSize': 18,      'highlightColor': 'yellow'    }    // add more groups here  }};
var nodes = [    {id: 1, text: 'Node 1'},                    // will get the default style    {id: 2, text: 'Node 2', group: 'mygroup'},  // will get the style from 'mygroup'    // ... more data];</pre>

<p>The following styles are available for groups:</p><table>    <tr>        <th>Name</th>        <th>Type</th>        <th>Default</th>        <th>Description</th>    </tr>
    <tr>        <td>borderColor</td>        <td>String</td>        <td>"#2B7CE9"</td>        <td>Border color of the node</td>    </tr>
    <tr>        <td>backgroundColor</td>        <td>String</td>        <td>"#97C2FC"</td>        <td>Background color of the node</td>    </tr>    <tr>        <td>highlightColor</td>        <td>String</td>        <td>"#D2E5FF"</td>        <td>Background color of the node when the node is selected.</td>    </tr>    <tr>        <td>image</td>        <td>String</td>        <td>none</td>        <td>Default image for the nodes. Only applicable in combination with            style <code>image</code>.</td>    </tr>
    <tr>        <td>fontColor</td>        <td>String</td>        <td>"black"</td>        <td>Font color of the node.</td>    </tr>    <tr>        <td>fontFace</td>        <td>String</td>        <td>"sans"</td>        <td>Font name of the node, for example "verdana" or "arial".</td>    </tr>    <tr>        <td>fontSize</td>        <td>Number</td>        <td>14</td>        <td>Font size for the node in pixels.</td>    </tr>    <tr>        <td>style</td>        <td>String</td>        <td>"rect"</td>        <td>Choose from <code>rect</code> (default), <code>circle</code>,            <code>database</code>, <code>image</code>, <code>text</code>,            <code>dot</code>.            In case of image, a property with name image must be provided, containing            image urls.</td>    </tr>    <tr>        <td>radius</td>        <td>Number</td>        <td>5</td>        <td>Default radius for the node. Only applicable in combination with            styles <code>rect</code> and <code>dot</code>.</td>    </tr>
</table>

<h2><a name="Methods"></a>Methods</h2><p>    Graph supports the following methods.</p>
<table>    <tr>        <th>Method</th>        <th>Return Type</th>        <th>Description</th>    </tr>
    <tr>        <td>animationSetAcceleration(acceleration)</td>        <td>none</td>        <td>Set the time acceleration for animation of history.            Only applicable when packages with a timestamp are available.            When acceleration is 1, history is played in real time.            And for example acceleration of 10 will play history then times the speed of            real time.</td>    </tr>    <tr>        <td>animationSetDuration(duration)</td>        <td>none</td>        <td>Duration of the animation in seconds.            Only applicable when packages with a timestamp are available.            The animation speed is scaled such that the total duration of playing the            history equals the set duration.</td>    </tr>    <tr>        <td>animationSetFramerate(framerate)</td>        <td>none</td>        <td>Set the framerate in frames per second for animation of history.            Only applicable when packages with a timestamp are available.        </td>    </tr>    <tr>        <td>animationStart()</td>        <td>none</td>        <td>Start animation of history.            Only applicable when packages with a timestamp are available.        </td>    </tr>    <tr>        <td>animationStop()</td>        <td>none</td>        <td>Stop animation of history.            Only applicable when packages with a timestamp are available.        </td>    </tr>
    <tr>        <td>setData(data)</td>        <td>none</td>        <td>Loads data. Parameter <code>data</code> is an object containing            nodes, edges, and options. Parameters nodes, edges are an Array.            Options is a name-value map and is optional.        </td>    </tr>
    <tr>        <td>setOptions(options)</td>        <td>none</td>        <td>Set options for the graph. The available options are described in            the section <a href="#Configuration_Options">Configuration Options</a>.        </td>    </tr>
    <tr>        <td>getSelection()</td>        <td>Array of selection elements</td>        <td>Standard <code>getSelection()</code> implementation.            Returns an array with one or multiple selections. Each selection contains            the property <code>row</code>. The selections are not ordered.        </td>    </tr>
    <tr>        <td>redraw()</td>        <td>none</td>        <td>Redraw the graph. Useful when the layout of the webpage changed.</td>    </tr>
    <tr>        <td>setSelection(selection)</td>        <td>none</td>        <td>Standard <code>setSelection(selection)</code> implementation.            <code>selection</code> is an array with selection elements. The visualization            accepts one or multiple selection elements, which must have the property <code>row</code>.            Example usage: <code>graph.setSelection([{"row": 3}]);</code>.        </td>    </tr>
    <tr>        <td>setSize(width, height)</td>        <td>none</td>        <td>Parameters <code>width</code> and <code>height</code> are strings,            containing a new size for the visualization. Size can be provided in pixels            or in percentages.</td>    </tr>
    <tr>        <td>start()</td>        <td>none</td>        <td>Start animation.            Only applicable when there are animated edges or nodes,            or when the nodes are not yet moved to a stable position.</td>    </tr>
    <tr>        <td>stop()</td>        <td>none</td>        <td>Stop animation.            Only applicable when there are animated edges or nodes.</td>    </tr>
</table>
<h2><a name="Events"></a>Events</h2><p>    Graph fires events after one or multiple nodes are selected.    The event can be catched by creating a listener.</p>
<p>    Here an example on how to catch a <code>select</code> event.</p>
<pre class="prettyprint lang-js">function onselect() {  var sel = graph.getSelection();
  var info = 'selected row(s): ';  for (var i = 0; i &lt; sel.length; i++) {    info += sel[i].row + ' ';  }
  alert(info);}
vis.events.addListener(graph, 'select', onselect);</pre>
<p>    The following events are available.</p>
<table>    <col width="10%">    <col width="60%">    <col width="30%">
    <tr>        <th>name</th>        <th>Description</th>        <th>Properties</th>    </tr>
    <tr>        <td>select</td>        <td>Fired after the user selects or unselects a node by clicking it,            or when selecting a number of nodes by dragging a selection area            around them. Not fired when the method <code>setSelection</code>            is executed. The corresponding rows in the Array are selected.            <br>            The selected rows can be retrieved via the method <code>getSelection</code>.        </td>        <td>none</td>    </tr>
    <tr>        <td>ready</td>        <td>The graph is loaded and ready for external method calls.            If you want to interact with the graph, and call methods after you draw it,            you should set up a listener for this event before you call the setData method,            and call them only after the event was fired.</td>        <td>none</td>    </tr></table>

<h2><a name="Data_Policy"></a>Data Policy</h2><p>    All code and data are processed and rendered in the browser. No data is sent to any server.</p>
</div></body></html>