diff --git a/README.md b/README.md index b9e6ad06..8ade6a9c 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,8 @@ vis.js ================== Vis.js is a dynamic, browser based visualization library. -The library is designed to be easy to use, to handle large amounts -of dynamic data, and to enable manipulation of the data. +The library is designed to be easy to use, handle large amounts +of dynamic data, and enable manipulation of the data. The library consists of the following components: - Timeline. Display different types of data on a timeline. @@ -12,10 +12,9 @@ The library consists of the following components: - Graph. Display a graph of network with nodes and edges. - DataSet and DataView. A flexible key/value based data set. Add, update, and remove items. Subscribe on changes in the data set. - Filter, order, and cast data. + Filter, order, and cast items. -Vis.js Library is part of [CHAP](http://chap.almende.com), -the Common Hybrid Agent Platform, developed by [Almende B.V](http://almende.com). +The vis.js library is developed by [Almende B.V](http://almende.com). ## Install diff --git a/docs/css/prettify.css b/docs/css/prettify.css index a1ad64d3..b4ec4ca0 100644 --- a/docs/css/prettify.css +++ b/docs/css/prettify.css @@ -11,12 +11,17 @@ } .pln { - color: #1C1C1C; + color: #333333; } pre.prettyprint { - border:1px solid lightgray; - padding:2px; + border: 1px solid lightgray; + background-color: #fcfcfc; + padding: 5px; + + font-size: 10pt; + line-height: 1.5em; + font-family: monospace; } ol.linenums { @@ -41,7 +46,7 @@ li.L1,li.L3,li.L5,li.L7,li.L9 { } .typ,.atn,.dec { - color: orange; + color: darkorange; } @media print { diff --git a/docs/css/style.css b/docs/css/style.css index 0a84f645..15554585 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -49,25 +49,7 @@ a:hover { text-decoration: underline; } -hr { - border: none 0; - border-top: 1px solid #abc; - height: 1px; -} - -pre { - display: block; - font-size: 10pt; - line-height: 1.5em; - font-family: monospace; -} - -pre, code { - background-color: #f5f5f5; -} - -table -{ +table { border-collapse: collapse; } diff --git a/docs/graph.html b/docs/graph.html index 29b234d6..e4589e77 100644 --- a/docs/graph.html +++ b/docs/graph.html @@ -36,15 +36,21 @@
Graph is a visualization to display graphs and networks consisting of nodes and edges. The visualization is easy to use and supports custom styles, @@ -61,7 +67,7 @@ vis.js library.
-Here a basic graph example. More examples can be found in the examples directory. @@ -115,7 +121,7 @@ -
Install or download the vis.js library.
in a subfolder of your project. Include the library script in the head of your html code:
@@ -139,22 +145,62 @@ The constructor accepts three parameters:
edges
, which both contain an array with objects.
Optionally, data may contain an options
object.
The parameter data
is optional, data can also be set using
- the method setData
.
+ the method setData
. Section Data Format
+ describes the data object.
options
is an optional Object containing a name-value map
with options. Options can also be set using the method
setOptions
.
+ Section Configuration Options
+ describes the available options.
- The Graph draws nodes and edges, which are both an Array with objects.
- This section describes the data format of nodes and edges.
+ The data
parameter of the Graph constructor is an object
+ which can contain different types of data.
+ The following properties are supported in the data
object:
nodes
and edges
,
+ both containing an Array with objects. The data formats are described
+ in the sections Nodes and Edges.
+ Example:
++var data = { + nodes: [...], + edges: [...] +}; ++
dot
,
+ containing a string with data in the
+ DOT language.
+ DOT support is described in section DOT_language.
+
+ Example:
++var data = { + dot: '...' +}; ++
options
,
+ containing an object with global options.
+ Options can be provided as third parameter in the graph constructor
+ as well. Section Configuration Options
+ describes the available options.
+
+
Nodes typically have an id
and text
.
@@ -169,8 +215,8 @@ The constructor accepts three parameters:
var nodes = [ { - 'id': 1, - 'text': 'Node 1' + id: 1, + text: 'Node 1' }, // ... more nodes ]; @@ -205,7 +251,7 @@ var nodes = [group -* +Number | String no A group number or name. The type can be number
,string
, or an other type. All nodes with the same group get @@ -242,7 +288,7 @@ var nodes = [id -* +Number | String yes A unique id for this node. Nodes may not have duplicate id's. @@ -345,7 +391,7 @@ var nodes = [ - Edges
+Edges
Edges are connections between nodes. @@ -360,8 +406,8 @@ var nodes = [
var edges = [ { - 'from': 1, - 'to': 3 + from: 1, + to: 3 }, // ... more edges ]; @@ -395,7 +441,7 @@ var edges = [color string no -A HTML color for the link. +A HTML color for the edge. @@ -418,7 +464,7 @@ var edges = [ @@ -426,7 +472,7 @@ var edges = [fontColor String "black" -Font color for the text label of the link. + Font color for the text label of the edge. Only applicable when "text" is defined. fontFace String "sans" -Font face for the text label of the link, + Font face for the text label of the edge, for example "verdana" or "arial". Only applicable when "text" is defined. @@ -435,15 +481,15 @@ var edges = [fontSize Number 14 -Font size in pixels for the text label of the link. + Font size in pixels for the text label of the edge. Only applicable when "text" is defined. @@ -452,14 +498,14 @@ var edges = [ from -* +Number | String yes -The id of a node where the link starts. The type must correspond with + 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. length number no -The length of the link in pixels. +The length of the edge in pixels. style string no -Define a drawing style for the link. + Define a drawing style for the edge. Choose from @@ -469,22 +515,22 @@ var edges = [line
(default),arrow
,arrow-end
, ordash-line
.text string no -Text to be displayed halfway the link. +Text to be displayed halfway the edge. title string no -Title to be displayed when the user hovers over the link. + Title to be displayed when the user hovers over the edge. The title can contain HTML code. @@ -492,10 +538,10 @@ var edges = [ to -* +Number | String yes -The id of a node where the link ends. The type must correspond with + 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. value number no -A value for the link. + A value for the edge. The width of the edges will be scaled automatically from minimum to maximum value. - If a @@ -510,58 +556,33 @@ var edges = [ -width
is provided for the link too, it will override the + If awidth
is provided for the edge too, it will override the width calculated from the value.Data Import
+ +DOT language
- Graph contains parser to import data in the + Graph supports data in the DOT language. - There following methods are available: + To provide data in the DOT language, the
- -data
object must contain + a propertydot
with a String containing the data.
Method | -Return Type | -Description | -
---|---|---|
vis.util.parseDOT(data) | -Object | -
- Parse a string containing data in DOT language into a JSON object.
- The returned object contains two arrays, nodes ,
- edges , containing the parsed nodes and edges.
- |
-
vis.util.DOTToGraph(data) | -Object | -
- 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 nodes ,
- edges , and options , which can be used
- directly to draw a graph using setData(data) .
- |
-
Example usage:
- // parse data in DOT-notation - var dot = 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'; - var data = vis.util.DOTToGraph(dot); +// 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); +// create a graph +var graph = new vis.Graph(container, data);-
Options can be used to customize the graph. Options are defined as a JSON object. @@ -570,11 +591,11 @@ var edges = [
var options = { - 'width': '100%', - 'height': '400px', - 'edges': { - 'color': 'red', - 'width': 2 + width: '100%', + height: '400px', + edges: { + color: 'red', + width: 2 } };@@ -652,7 +673,7 @@ var options = {
line
(default), arrow
,
arrow-end
, dash-line
.It is possible to specify custom styles for groups of nodes. Each node having assigned to this group gets the specified style. @@ -924,7 +945,7 @@ var nodes = [ -
Graph supports the following methods.
@@ -988,7 +1009,7 @@ var nodes = [ -Graph fires events after one or multiple nodes are selected. The event can be catched by creating a listener. @@ -1042,7 +1063,7 @@ vis.events.addListener(graph, 'select', onselect); -
All code and data are processed and rendered in the browser. No data is sent to any server.
diff --git a/docs/index.html b/docs/index.html index ade9e9f3..c5b6d327 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16,12 +16,12 @@The following pages are available:
+Vis.js contains the following components:
diff --git a/docs/timeline.html b/docs/timeline.html index 4f3cdb21..bf90aa42 100644 --- a/docs/timeline.html +++ b/docs/timeline.html @@ -183,6 +183,12 @@ var items = [