diff --git a/docs/graph.html b/docs/graph.html index e4589e77..330059a8 100644 --- a/docs/graph.html +++ b/docs/graph.html @@ -53,8 +53,8 @@

Overview

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. + and edges. The visualization is easy to use and supports custom shapes, + styles, colors, sizes, images, and more.

@@ -88,11 +88,11 @@ <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'} + {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 @@ -203,9 +203,9 @@ var data = {

Nodes

- Nodes typically have an id and text. + Nodes typically have an id and label. A node must contain at least a property id. - Nodes can have extra properties, used to define the type and style the + Nodes can have extra properties, used to define the shape and style of the nodes.

@@ -216,7 +216,7 @@ var data = { var nodes = [ { id: 1, - text: 'Node 1' + label: 'Node 1' }, // ... more nodes ]; @@ -262,21 +262,21 @@ var nodes = [ fontColor String "black" - Font color for text in the node. + Font color for label in the node. fontFace String "sans" - Font face for text in the node, for example "verdana" or "arial". + Font face for label in the node, for example "verdana" or "arial". fontSize Number 14 - Font size in pixels for text in the node. + Font size in pixels for label in the node. @@ -300,7 +300,7 @@ var nodes = [ image string no - Url of an image. Only applicable when the style of the node is + Url of an image. Only applicable when the shape of the node is image. @@ -308,19 +308,19 @@ var nodes = [ radius number no - Radius for the node. Applicable for all styles except rect, + Radius for the node. Applicable for all shapes except rect, circle, and database. The value of radius will override a value in property value. - style + shape string no Define the shape for the node. Choose from rect (default), circle, - database, image, text, + database, image, label, dot, star, triangle, triangleDown, and square.

@@ -335,19 +335,19 @@ var nodes = [ value.

- When a property text is provided, - this text will be displayed inside the shape in case of styles + When a property label is provided, + this label will be displayed inside the shape in case of shapes rect, circle, and database. - For all other shapes, the text will be displayed right below the shape. + For all other shapes, the label will be displayed right below the shape. - text + label string no - Text to be displayed in the node or under the image of the node. + Text label to be displayed in the node or under the image of the node. Multiple lines can be separated by a newline character \n . @@ -366,7 +366,7 @@ var nodes = [ 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 dot. + Only applicable when the shape of the node is dot. If a radius is provided for the node too, it will override the radius calculated from the value. @@ -465,7 +465,7 @@ var edges = [ String "black" Font color for the text label of the edge. - Only applicable when "text" is defined. + Only applicable when property label is defined. @@ -474,7 +474,7 @@ var edges = [ "sans" Font face for the text label of the edge, for example "verdana" or "arial". - Only applicable when "text" is defined. + Only applicable when property label is defined. @@ -482,7 +482,7 @@ var edges = [ Number 14 Font size in pixels for the text label of the edge. - Only applicable when "text" is defined. + Only applicable when property label is defined. @@ -505,17 +505,17 @@ var edges = [ style string no - Define a drawing style for the edge. + Define a line style for the edge. Choose from line (default), arrow, arrow-end, or dash-line. - text + label string no - Text to be displayed halfway the edge. + Text label to be displayed halfway the edge. @@ -737,19 +737,19 @@ var options = { nodes.fontColor String "black" - Default font color for text in the nodes. + Default font color for the text label in the nodes. nodes.fontFace String "sans" - Default font face for text in the nodes, for example "verdana" or "arial". + Default font face for the text label in the nodes, for example "verdana" or "arial". nodes.fontSize Number 14 - Default font size in pixels for text in the nodes. + Default font size in pixels for the text label in the nodes. nodes.group @@ -761,48 +761,48 @@ var options = { nodes.image String none - Default image url for the nodes. only applicable with style image. + Default image url for the nodes. only applicable with shape image. nodes.widthMin Number 16 - The minimum width for a scaled image. Only applicable with style image. + The minimum width for a scaled image. Only applicable with shape image. nodes.widthMax Number 64 - The maximum width for a scaled image. Only applicable with style image. + The maximum width for a scaled image. Only applicable with shape image. - nodes.style + nodes.shape String "rect" - The default style for all nodes. + The default shape for all nodes. Choose from rect (default), circle, - database, image, text, dot. - This style can be overridden by a group style, or by a style of an individual node. + database, image, label, dot. + This shape can be overridden by a group shape, or by a shape of an individual node. nodes.radius Number 5 - The default radius for a node. Only applicable with style dot. + The default radius for a node. Only applicable with shape dot. nodes.radiusMin Number 5 - The minimum radius for a scaled node. Only applicable with style dot. + The minimum radius for a scaled node. Only applicable with shape dot. nodes.radiusMax Number 20 - The maximum radius for a scaled node. Only applicable with style dot. + The maximum radius for a scaled node. Only applicable with shape dot. @@ -851,7 +851,7 @@ var options = { groups: { mygroup: { - style: 'circle', + shape: 'circle', borderColor: 'black', backgroundColor: 'white', fontColor: 'red', @@ -863,8 +863,8 @@ var options = { }; 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' + {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 ]; @@ -903,7 +903,7 @@ var nodes = [ String none Default image for the nodes. Only applicable in combination with - style image. + shape image. @@ -925,11 +925,11 @@ var nodes = [ Font size for the node in pixels. - style + shape String "rect" Choose from rect (default), circle, - database, image, text, + database, image, label, dot. In case of image, a property with name image must be provided, containing image urls. @@ -939,7 +939,7 @@ var nodes = [ Number 5 Default radius for the node. Only applicable in combination with - styles rect and dot. + shapes rect and dot. diff --git a/examples/graph/01_basic_usage.html b/examples/graph/01_basic_usage.html index 8be0741d..926cf1ff 100644 --- a/examples/graph/01_basic_usage.html +++ b/examples/graph/01_basic_usage.html @@ -13,11 +13,11 @@