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.
1405 lines
38 KiB
1405 lines
38 KiB
<!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"><!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, 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);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
</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">
|
|
<script type="text/javascript" src="vis/vis.js"></script>
|
|
</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>, <code>moving-arrows</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>
|
|
|
|
|
|
|
|
<h3>Packages</h3>
|
|
<p>
|
|
The array with packages must at least contain properties <code>from</code> and
|
|
<code>to</code>.
|
|
The array can have extra properties, used to define the type and style of
|
|
individual packages.
|
|
</p>
|
|
|
|
<p>
|
|
There are two types of packages:
|
|
</p>
|
|
|
|
<ul>
|
|
<li><b>Automatic</b>. When no value for the <code>progress</code> is provided,
|
|
the package is automatically moved from start node to end node, and deleted
|
|
once it has reached the end node. The duration can be customized by setting
|
|
a value for <code>duration</code>.</li>
|
|
<li><b>Manual</b>. When a value for the <code>progress</code> is provided,
|
|
the package is positioned at the given progress between start and end node.
|
|
The progress can be updated dynamically via the method <code>addPackages</code>,
|
|
and can be deleted via the method <code>deletePackage</code>. Manual packages
|
|
must have an id specified, in order to be able to update and delete them lateron.
|
|
</ul>
|
|
|
|
<p>
|
|
A JavaScript Array with packages is constructed as:
|
|
</p>
|
|
<pre class="prettyprint lang-js">
|
|
var packages = [
|
|
{
|
|
'from': 1,
|
|
'to': 3
|
|
}
|
|
// ... more data
|
|
];
|
|
</pre>
|
|
|
|
|
|
<p>
|
|
The package properties are defined as:
|
|
</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 package can be created or deleted.
|
|
|
|
Available values are: <code>create</code> (default),
|
|
<code>update</code>, or <code>delete</code>.
|
|
|
|
When a package is created with an id which already exists, the existing
|
|
package will be updated. The <code>action</code> property can be used in
|
|
combination with <code>timestamp</code> to animate history.
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>color</td>
|
|
<td>string</td>
|
|
<td>no</td>
|
|
<td>A HTML color for the package.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>duration</td>
|
|
<td>number</td>
|
|
<td>no</td>
|
|
<td>Duration in seconds the animation of the package moving from start to
|
|
end node. Only applicable when progress is not provided.
|
|
</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>id</td>
|
|
<td>*</td>
|
|
<td>yes</td>
|
|
<td>A unique id for the package. Packages cannot have duplicate id's.
|
|
An id is required for packages with manually defined progress,
|
|
in order to be able to update or delete them lateron.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>image</td>
|
|
<td>string</td>
|
|
<td>no</td>
|
|
<td>Url of an image. Only applicable when style is <code>image</code>.</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>progress</td>
|
|
<td>number</td>
|
|
<td>no</td>
|
|
<td>A number between 0 and 1 which determines the progress of the package
|
|
between the start and end node. If progress is defined, the package must
|
|
also have an id defined.
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>radius</td>
|
|
<td>number</td>
|
|
<td>no</td>
|
|
<td>The radius of the package. Only applicable when style is <code>dot</code>.</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>style</td>
|
|
<td>string</td>
|
|
<td>no</td>
|
|
<td>Define a drawing style for the package.
|
|
Choose from <code>dot</code> (default), <code>image</code>,
|
|
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, or
|
|
<code>square</code>.
|
|
|
|
In case of an image, a property with image url must be provided in the package.
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>title</td>
|
|
<td>string</td>
|
|
<td>no</td>
|
|
<td>Title to be displayed when the user hovers over the package.
|
|
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>timestamp</td>
|
|
<td>Date or number</td>
|
|
<td>no</td>
|
|
<td>The time on which this package is added or removed.
|
|
Only applicable in combination with the property <code>action</code>.
|
|
When timestamp is provided, a slider with start and stop button is created
|
|
to enable playing history.
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>value</td>
|
|
<td>number</td>
|
|
<td>no</td>
|
|
<td>A value for the package.
|
|
The radius of the packages will be scaled automatically from minimum to
|
|
maximum value.
|
|
Only applicable when the style of the node is <code>dot</code>.
|
|
If a parameter <code>radius</code> is provided for the node too,
|
|
this will override the radius calculated from the value.</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>moving-arrows</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>packages.color</td>
|
|
<td>String</td>
|
|
<td>"#2B7CE9"</td>
|
|
<td>Default color for all packages</td>
|
|
</tr>
|
|
<tr>
|
|
<td>packages.duration</td>
|
|
<td>Number</td>
|
|
<td>1.0</td>
|
|
<td>Default duration of animated packages in seconds.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>packages.image</td>
|
|
<td>String</td>
|
|
<td>none</td>
|
|
<td>Default image for all packages.
|
|
Style of the packages must be set to <code>image</code></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>packages.widthMin</td>
|
|
<td>Number</td>
|
|
<td>16</td>
|
|
<td>The minimum width for a scaled package. Only applicable with style <code>image</code>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>packages.widthMax</td>
|
|
<td>Number</td>
|
|
<td>64</td>
|
|
<td>The maximum width for a scaled package. Only applicable with style <code>image</code>.</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>packages.radius</td>
|
|
<td>Number</td>
|
|
<td>5</td>
|
|
<td>Default radius for all packages.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>packages.radiusMin</td>
|
|
<td>Number</td>
|
|
<td>5</td>
|
|
<td>The minimum radius for a scaled package. Only applicable with style <code>dot</code>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>packages.radiusMax</td>
|
|
<td>Number</td>
|
|
<td>20</td>
|
|
<td>The maximum radius for a scaled package. Only applicable with style <code>dot</code>.</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>packages.style</td>
|
|
<td>String</td>
|
|
<td>"dot"</td>
|
|
<td>Default style for all packages.
|
|
Choose from <code>dot</code> (default) or <code>image</code>.
|
|
In case of an image, a property with image url must be provided in the package.</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 < 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>
|