<!doctype html>
<html>
<head>
<title>vis.js | graph documentation</title>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
</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>
<ul>
<li><a href="#Nodes">Nodes</a></li>
<li><a href="#Edges">Edges</a></li>
<li><a href="#DOT_language">DOT language</a></li>
</ul>
</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 id="Overview">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 shapes,
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 id="Example">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"><!doctype html>
<html>
<head>
<title>Graph | Basic usage</title>
<script type="text/javascript" src="../../vis.js"></script>
</head>
<body>
<div id="mygraph"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: '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);
</script>
</body>
</html>
</pre>
<h2 id="Loading">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">
<script type="text/javascript" src="vis/vis.js"></script>
</pre>
The constructor 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>. Section <a href="#Data_Format">Data Format</a>
describes the data object.
</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>.
Section <a href="#Configuration_Options">Configuration Options</a>
describes the available options.
</li>
</ul>
<h2 id="Data_Format">Data Format</h2>
<p>
The <code>data</code> parameter of the Graph constructor is an object
which can contain different types of data.
The following properties are supported in the <code>data</code> object:
</p>
<ul>
<li>
<span style="font-weight: bold;">A property pair <code>nodes</code> and <code>edges</code></span>,
both containing an Array with objects. The data formats are described
in the sections <a href="#Nodes">Nodes</a> and <a href="#Edges">Edges</a>.
Example:
<pre class="prettyprint lang-js">
var data = {
nodes: [...],
edges: [...]
};
</pre>
</li>
<li>
<span style="font-weight: bold;">A property <code>dot</code></span>,
containing a string with data in the
<a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
DOT support is described in section <a href="#DOT_language">DOT_language</a>.
Example:
<pre class="prettyprint lang-js">
var data = {
dot: '...'
};
</pre>
</li>
<li>
<span style="font-weight: bold;">A property <code>options</code></span>,
containing an object with global options.
Options can be provided as third parameter in the graph constructor
as well. Section <a href="#Configuration_Options">Configuration Options</a>
describes the available options.
</li>
</ul>
<h3 id="Nodes">Nodes</h3>
<p>
Nodes typically have an <code>id</code> and <code>label</code>.
A node must contain at least a property <code>id</code>.
Nodes can have extra properties, used to define the shape and style of the
nodes.
</p>
<p>
A JavaScript Array with nodes is constructed like:
</p>
<pre class="prettyprint lang-js">
var nodes = [
{
id: 1,
label: 'Node 1'
},
// ... more nodes
];
</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>color</td>
<td>String | Object</td>
<td>no</td>
<td>Color for the node.</td>
</tr>
<tr>
<td>color.background</td>
<td>String</td>
<td>no</td>
<td>Background color for the node.</td>
</tr>
<tr>
<td>color.border</td>
<td>String</td>
<td>no</td>
<td>Border color for the node.</td>
</tr>
<tr>
<td>color.highlight</td>
<td>String | Object</td>
<td>no</td>
<td>Color of the node when selected.</td>
</tr>
<tr>
<td>color.highlight.background</td>
<td>String</td>
<td>no</td>
<td>Background color of the node when selected.</td>
</tr>
<tr>
<td>color.highlight.border</td>
<td>String</td>
<td>no</td>
<td>Border color of the node when selected.</td>
</tr>
<tr>
<td>group</td>
<td>Number | String</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>no</td>
<td>Font color for label in the node.</td>
</tr>
<tr>
<td>fontFace</td>
<td>String</td>
<td>no</td>
<td>Font face for label in the node, for example "verdana" or "arial".</td>
</tr>
<tr>
<td>fontSize</td>
<td>Number</td>
<td>no</td>
<td>Font size in pixels for label in the node.</td>
</tr>
<tr>
<td>id</td>
<td>Number | String</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 shape 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 shapes except <code>box</code>,
<code>circle</code>, <code>ellipse</code> and <code>database</code>.
The value of <code>radius</code> will override a value in
property <code>value</code>.</td>
</tr>
<tr>
<td>shape</td>
<td>string</td>
<td>no</td>
<td>Define the shape for the node.
Choose from
<code>ellipse</code> (default), <code>circle</code>, <code>box</code>,
<code>database</code>, <code>image</code>, <code>label</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>label</code> is provided,
this label will be displayed inside the shape in case of shapes
<code>box</code>, <code>circle</code>, <code>ellipse</code>,
and <code>database</code>.
For all other shapes, the label will be displayed right below the shape.
</td>
</tr>
<tr>
<td>label</td>
<td>string</td>
<td>no</td>
<td>Text label 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>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 shape 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 id="Edges">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 edges
];
</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>color</td>
<td>string</td>
<td>no</td>
<td>A HTML color for the edge.</td>
</tr>
<tr>
<td>dash</td>
<td>Object</td>
<td>no</td>
<td>
Object containing properties for dashed lines.
Available properties: <code>length</code>, <code>gap</code>,
<code>altLength</code>.
</td>
</tr>
<tr>
<td>dash.altLength</td>
<td>number</td>
<td>no</td>
<td>Length of the alternated dash in pixels on a dashed line.
Specifying <code>dash.altLength</code> allows for creating
a dashed line with a dash-dot style, for example when
<code>dash.length=10</code> and <code>dash.altLength=5</code>.
See also the option <code>dahs.length</code>.
Only applicable when the line style is <code>dash-line</code>.</td>
</tr>
<tr>
<td>dash.length</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>dash.gap</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>no</td>
<td>Font color for the text label of the edge.
Only applicable when property <code>label</code> is defined.</td>
</tr>
<tr>
<td>fontFace</td>
<td>String</td>
<td>no</td>
<td>Font face for the text label of the edge,
for example "verdana" or "arial".
Only applicable when property <code>label</code> is defined.</td>
</tr>
<tr>
<td>fontSize</td>
<td>Number</td>
<td>no</td>
<td>Font size in pixels for the text label of the edge.
Only applicable when property <code>label</code> is defined.</td>
</tr>
<tr>
<td>from</td>
<td>Number | String</td>
<td>yes</td>
<td>The id of a node where the edge 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 edge in pixels.</td>
</tr>
<tr>
<td>style</td>
<td>string</td>
<td>no</td>
<td>Define a line style for the edge.
Choose from <code>line</code> (default), <code>arrow</code>,
<code>arrow-center</code>, or <code>dash-line</code>.
</td>
</tr>
<tr>
<td>label</td>
<td>string</td>
<td>no</td>
<td>Text label to be displayed halfway the edge.</td>
</tr>
<tr>
<td>title</td>
<td>string</td>
<td>no</td>
<td>Title to be displayed when the user hovers over the edge.
The title can contain HTML code.</td>
</tr>
<tr>
<td>to</td>
<td>Number | String</td>
<td>yes</td>
<td>The id of a node where the edge 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 edge.
The width of the edges will be scaled automatically from minimum to
maximum value.
If a <code>width</code> is provided for the edge 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>
<h3 id="DOT_language">DOT language</h3>
<p>
Graph supports data in the
<a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
To provide data in the DOT language, the <code>data</code> object must contain
a property <code>dot</code> with a String containing the data.
</p>
<p>
Example usage:
</p>
<pre class="prettyprint lang-js">
// provide data in the DOT language
var data = {
dot: 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
};
// create a graph
var graph = new vis.Graph(container, data);
</pre>
<h2 id="Configuration_Options">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>edges.color</td>
<td>String</td>
<td>"#2B7CE9"</td>
<td>The default color of a edge.</td>
</tr>
<tr>
<td>edges.dash</td>
<td>Object</td>
<td>Object</td>
<td>
Object containing default properties for dashed lines.
Available properties: <code>length</code>, <code>gap</code>,
<code>altLength</code>.
</td>
</tr>
<tr>
<td>edges.dash.altLength</td>
<td>number</td>
<td>none</td>
<td>Default length of the alternated dash in pixels on a dashed line.
Specifying <code>dash.altLength</code> allows for creating
a dashed line with a dash-dot style, for example when
<code>dash.length=10</code> and <code>dash.altLength=5</code>.
See also the option <code>dahs.length</code>.
Only applicable when the line style is <code>dash-line</code>.</td>
</tr>
<tr>
<td>edges.dash.length</td>
<td>number</td>
<td>10</td>
<td>Default 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.dash.gap</td>
<td>number</td>
<td>5</td>
<td>Default 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 edge.</td>
</tr>
<tr>
<td>edges.style</td>
<td>String</td>
<td>"line"</td>
<td>The default style of a edge.
Choose from <code>line</code> (default), <code>arrow</code>,
<code>arrow-center</code>, <code>dash-line</code>.</td>
</tr>
<tr>
<td>edges.width</td>
<td>Number</td>
<td>1</td>
<td>The default width of a edge.</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>nodes.color</td>
<td>String | Object</td>
<td>Object</td>
<td>Default color of the nodes. When color is a string, the color is applied
to both background as well as the border of the node.</td>
</tr>
<tr>
<td>nodes.color.background</td>
<td>String</td>
<td>"#97C2FC"</td>
<td>Default background color of the nodes</td>
</tr>
<tr>
<td>nodes.color.border</td>
<td>String</td>
<td>"#2B7CE9"</td>
<td>Default border color of the nodes</td>
</tr>
<tr>
<td>nodes.color.highlight</td>
<td>String | Object</td>
<td>Object</td>
<td>Default color of the node when the node is selected. Applied to
both border and background of the node.</td>
</tr>
<tr>
<td>nodes.color.highlight.background</td>
<td>String</td>
<td>"#D2E5FF"</td>
<td>Default background color of the node when selected.</td>
</tr>
<tr>
<td>nodes.color.highlight.border</td>
<td>String</td>
<td>"#2B7CE9"</td>
<td>Default border color of the node when selected.</td>
</tr>
<tr>
<td>nodes.fontColor</td>
<td>String</td>
<td>"black"</td>
<td>Default font color for the text label in the nodes.</td>
</tr>
<tr>
<td>nodes.fontFace</td>
<td>String</td>
<td>"sans"</td>
<td>Default font face for the text label 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 the text label 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 shape <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 shape <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 shape <code>image</code>.</td>
</tr>
<tr>
<td>nodes.shape</td>
<td>String</td>
<td>"ellipse"</td>
<td>The default shape for all nodes.
Choose from
<code>ellipse</code> (default), <code>circle</code>, <code>box</code>,
<code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>,
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.
This shape can be overridden by a group shape, or by a shape 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 shape <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 shape <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 shape <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 id="Groups">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: {
shape: 'circle',
color: {
border: 'black',
background: 'white',
highlight: {
border: 'yellow',
background: 'orange'
}
}
fontColor: 'red',
fontSize: 18
}
// add more groups here
}
};
var nodes = [
{id: 1, label: 'Node 1'}, // will get the default style
{id: 2, label: 'Node 2', group: 'mygroup'}, // will get the style from 'mygroup'
// ... more nodes
];
</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>color</td>
<td>String | Object</td>
<td>Object</td>
<td>Color of the node</td>
</tr>
<tr>
<td>color.border</td>
<td>String</td>
<td>"#2B7CE9"</td>
<td>Border color of the node</td>
</tr>
<tr>
<td>color.background</td>
<td>String</td>
<td>"#97C2FC"</td>
<td>Background color of the node</td>
</tr>
<tr>
<td>color.highlight</td>
<td>String</td>
<td>"#D2E5FF"</td>
<td>Color of the node when selected.</td>
</tr>
<tr>
<td>color.highlight.background</td>
<td>String</td>
<td>"#D2E5FF"</td>
<td>Background color of the node when selected.</td>
</tr>
<tr>
<td>color.highlight.border</td>
<td>String</td>
<td>"#D2E5FF"</td>
<td>Border color of the node when selected.</td>
</tr>
<tr>
<td>image</td>
<td>String</td>
<td>none</td>
<td>Default image for the nodes. Only applicable in combination with
shape <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>shape</td>
<td>String</td>
<td>"ellipse"</td>
<td>Choose from
<code>ellipse</code> (default), <code>circle</code>, <code>box</code>,
<code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>,
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</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
shapes <code>box</code> and <code>dot</code>.</td>
</tr>
</table>
<h2 id="Methods">Methods</h2>
<p>
Graph supports the following methods.
</p>
<table>
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</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>
</table>
<h2 id="Events">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 < 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>
</table>
<h2 id="Data_Policy">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>