Graph
The Graph component displays and dynamically updates a graph based on any data which can be expressed as a series of nodes and links between nodes. The following figure shows a network topology displayed as a graph, where servers are displayed as nodes and the physical network connections as links.
Graph Properties
Topology
The power of the Graph component is displaying connections between nodes, which can help users understand a complex system at a glance. The Topology tab of the Graph component contains the parameters necessary for defining the links between the nodes of the graph.
Node and Link Properties
Each graph node and link can be dynamically styled in a number of ways, including with images, text and fonts. The Node Style and the Link Style tabs contain parameters for defining how these elements of the graph will be displayed to the user.
 | Example: On our network topology map, node labels describe each device’s IP address and its type, while color shows the server status. |
Graph Actions
Actions that the user can take while interacting with the graph.
Node and Link Context Menus
In the Basic Properties tab, the properties Canvas Context Menu, Node Context Menu, and Link Context Menu allow you to create menu options to be displayed when opening the context menu for the graph, or a specific node or link. As with the system tree, context menus are opened by right-clicking on either the graph canvas, a node, or a link.
When you open the Node Context Menu property, a data table displays a list of actions to be included in the context menu. In the example below, two options will be displayed in the node context menu, and selecting an item from the menu will trigger the associated expression.
Zooming and Panning the Graph
Pan the graph by clicking and dragging.
Zoom in and out from the current mouse location by holding ctrl and scrolling, either with the mouse wheel or touch-pad gesture.
Moving Nodes
When the Graph Mode is Transform, click and drag nodes to change the layout of the graph.
Hold the shift key to select multiple nodes and move them as a group.
To save the new layout created by moving nodes manually, trigger the saveGraphLayout() function of the graph.
Creating Links or Nodes
When the graph Mode is Edit create a new link by clicking on the source node, and then click on the target node. A link will immediately be created. Create a new node by clicking any empty space on the graph canvas.
To save the new layout created by moving nodes manually, trigger the saveGraphLayout() function of the graph.
Deleting Links or Nodes
When the graph Mode is Edit, double-click any link or node to delete it.
To save the new layout created by moving nodes manually, trigger the saveGraphLayout() function of the graph.
Basic Properties
Common
The Graph component has the following basic properties and property groups that are common to all components:
Name, Advanced Properties, Container Properties, Styles, Preloader, Events, Bindings.
Update Period
Graph update period. This period is used to re-read the topology information from the server and to refresh the graph.
Variable Name: | updatePeriod |
Records: | 1 |
Record Format:
Field Name | Field Type | Description |
updatePeriod | Long | Displayed in the user interface as a unit of time. |
Layout
Indicates which algorithm should be used to generate the spatial distribution of the nodes on the canvas. The behavior of each layout option is defined by the property with the same name. Options include:
Random - the coordinates of each node are randomly generated
Circular - nodes are positioned along the circumference of a circle
Radial - the graph is assumed to be similar to a tree, with the highest level of hierarchy placed at the center, and connections radiating outwards.
Fruchterman - nodes are positioned according to the Fruchterman algorithm
Preset - nodes are positioned according to the coordinates defined in the Node Layout property
Dendrogram - nodes are positioned to indicate hierarchical clustering, with all connections branching from a single root. Only a single link will be displayed in the case of two nodes which have multiple links between them.
Variable Name: | layout |
Records: | 1 |
Record Format:
Field Name | Field Type | Description |
layout | String | Indicates the algorithm to control the node layout. |
Mode
Graph mode: View, Transform or Edit. In the View mode, you can zoom, pan, rotate, and shear the graph. In the Transform mode, you can move graph nodes individually. In the editing mode, you can add and remove nodes as well as add and remove links between nodes.
It is possible to change the graph mode by using a binding. For example, you can add a mode selector Combo Box to a dashboard.
Variable Name: | graphMode |
Records: | 1 |
Record Format:
Field Name | Field Type | Description |
graphMode | Integer | Select editing permissions when viewing the graph. |
Node Tooltip Expression
String to display in tooltip when user mouses over a node. HTML will be rendered in the body of the tooltip.
Layer context (for Geo-Fence Type), device context (for Context type), none (for Node Table Expression type). | |
Node Table Expression result table (for Node Table Expression type), none for other. | |
Points to currently processed row of the default data table, none (for Context type). | |
Standard variables only. |
Variable Name: | nodeTooltipExpression |
Records: | 1 |
Record Format:
Field Name | Field Type | Description |
nodeTooltipExpression | String | Tooltip box renders HTML |
Link Tooltip Expression
String to display in tooltip when user mouses over a link. HTML will be rendered in the body of the tooltip.
None. | |
Row in the Link Table Expression result table. | |
Points to currently processed row of the default data table, none (for Context type). | |
Standard variables only. |
Variable Name: | linkTooltipExpression |
Records: | 1 |
Record Format:
Field Name | Field Type | Description |
linkTooltipExpression | String | Tooltip box will render HTML |
Canvas Context Menu
Table listing the options to display when the context menu is opened for the graph’s canvas.
Variable Name: | canvasContextMenu |
Records: | 0…Unlimited |
Record Format:
Field Name | Field Type | Description | |
name | String | Variable name of option. | |
description | String | Description of option that will be displayed in the context menu. | |
expression | String | Expression to be evaluated when context menu item is chosen. | |
Current Context. | |||
None. | |||
0 | |||
Standard variables only. | |||
Node Context Menu
Table listing the options to display when a context menu is opened for any of the graph’s nodes.
Variable Name: | nodeContextMenu |
Records: | 0…Unlimited |
Record Format:
Field Name | Field Type | Description | |
name | String | Variable name of option. | |
description | String | Description of option which will be displayed in the context menu. | |
expression | String | Expression to be evaluated when context menu item is chosen. | |
Current Context. | |||
Record of the current node. | |||
0 | |||
Standard variables only. | |||
Link Context Menu
Table listing the options to display when a context menu is opened for any of the graph’s links.
Variable Name: | linkContextMenu |
Records: | 0…Unlimited |
Record Format:
Field Name | Field Type | Description | |
name | String | Variable name of option. | |
description | String | Description of option which will be displayed in the context menu. | |
expression | String | Expression to be evaluated when context menu item is chosen. | |
Current Context. | |||
Link Record | |||
0 | |||
Standard variables only. | |||
Node Layout
Data table to indicate custom coordinates for each node which will be used in the case of the Preset option being chosen for the graph Layout.
Variable Name: | nodeLayout |
Records: | 0…Unlimited |
Record Format:
Field Name | Field Type | Description |
id | String | ID of the node for which the coordinate will be applied |
x | Integer | X coordinate for the indicated node ID |
y | Integer | Y coordinate for the indicated node ID |
Display Unlinked Nodes
When true, all nodes will be displayed. When false, nodes without any links will be hidden from the graph view.
Variable Name: | displayUnlinkedNodes |
Records: | 1 |
Record Format:
Field Name | Field Type | Description |
displayUnlinkedNodes | Boolean |
|
Topology
Properties in the Topology Tab define the source data for nodes and links.
Node and Link Style
Properties in the Node Style and Link Style Tabs define the styles which will be applied for nodes and links respectively.
Layout Configuration
Contains variables for configuring layout algorithm parameters. Each layout algorithm has a number of parameters which can be customized for the ideal layout.
Radial Layout Configuration
Nodes are organized in a radial pattern, radiating outwards from the central node. This layout is particularly useful for representing hierarchical relationships within a graph.
Variable Name: | radialLayoutConfig |
Records: | 1 |
Record Format:
Field Name | Field Type | Description |
unitRadius | Integer | Amount to increase radius on each iteration |
linkDistance | Integer | Distance between linked nodes |
nodeSpacing | Integer | Distance between un-linked nodes |
preventOverlap | Boolean | Prevent links from crossing |
strictRadial | Boolean | Strictly enforce radial layout |
focusNode | String | Custom node Id to be defined as the center of the layout |
Circular Layout Configuration
Nodes in this layout are positioned along the circumference of a circle. This arrangement creates a visually appealing circular pattern, facilitating easy visualization and comparison of node relationships.
Variable Name: | circularLayoutConfig |
Records: | 1 |
Record Format:
Field Name | Field Type | Description |
radius | Integer | The radius of the circle. If the radius exists, startRadius and endRadius do not take effect. |
startRadius | Integer | The start radius of spiral layout |
endRadius | Integer | The end radius of spiral layout |
clockwise | Boolean | Indicate that node unfolding will be along a clockwise path |
divisions | Integer | The division number of the nodes on the circle. Takes effect when endRadius minus startRadius does not equal 0. |
angleRatio | Integer | How many 2*PIs between the first node and the last node |
workerEnabled | Boolean | Whether to enable the web-worker in case layout calculation takes too long to block page interaction |
Random Layout Configuration
The positions of nodes are determined through a random generation process. Each node is assigned a set of coordinates without any specific pattern, resulting in an arrangement that lacks order or structure.
Variable Name: | randomLayoutConfig |
Records: | 1 |
Record Format:
Field Name | Field Type | Description |
radius | Integer | Maximum size of circle in which to place nodes |
width | Integer | Maximum width of area in which to place nodes. |
workerEnabled | Boolean | Whether to enable the web-worker in case layout calculation takes too long to block page interaction |
Fruchterman Layout Configuration
Nodes are placed according to the Fruchterman algorithm, which simulates a force-directed layout. The algorithm aims to evenly distribute nodes, minimizing overlap and maximizing space efficiency. This can result in an aesthetically pleasing and balanced arrangement of nodes.
Variable Name: | fruchtermanLayoutConfig |
Records: | 1 |
Record Format:
Field Name | Field Type | Description |
maxIteration | Integer | The maximum iteration number |
gravity | Integer | The gravity, which will affect the compactness of the layout |
speed | Integer | The moving speed of each iteration. Large value of the speed might lead to violent swing. |
clustering | Boolean | Whether to layout by cluster |
clusterGravity | Integer | The gravity of each cluster, which will affect the compactness of each cluster. Takes effect only when clustering is true. |
gpuEnabled | Boolean | Whether to enable the GPU parallel computing. If the machine or browser does not support GPU computing, it will be degraded to CPU computing automatically. |
workerEnabled | Boolean | Whether to enable the web-worker in case layout calculation takes too long to block page interaction |
Dendrogram Configuration
Connections emanate from a single root node, creating a branching pattern that visually represents the hierarchy. In cases where two nodes have multiple links between them, only a single link is displayed. This layout is especially useful for displaying hierarchical relationships between nodes.
Variable Name: | dendrogramLayoutConfig |
Records: | 1 |
Record Format:
Field Name | Field Type | Description |
direction | String | Indicate the orientation of nodes relative to the root node.
|
radial | Boolean | Whether to layout the graph in radial style. If radial is true, we recommend to set direction to |
nodeSep | Integer | Node separation |
rankSep | Integer | Level separation |
Custom Functions
Save Graph Layout
Saves the current node layout as the default layout for the graph.
Function name: saveGraphLayout
This function has no input parameters
Save Image
Saves the current view of the graph as a PNG image. The image can be directly saved via expression, or a prompt can be issued to the user to download via the user interface.
Function name: saveImage
Field Name | Field Type | Field Description | |
saveExpression | String | The string in the saveExpression field is evaluated as an expression. If the download field is The saveExpression string is evaluated in the following Resolution Environment: | |
Table with a single field image, a data block containing the PNG image of the current graph view. | |||
None. | |||
First Row | |||
Standard variables only. | |||
download | Boolean |
| |
Update Dataset
Triggers the graph display to be redrawn with the current information from the dataset. Can be used in cases where the underlying dataset has changed since the graph was displayed to the user.
If the user has edited the graph by moving the nodes, calling the function with the argument saveNodeLayout as True will trigger the Save Node Layout event and ensure that the graph is redrawn with the custom layout the user defined. Otherwise, the nodes of the redrawn graph will be placed according to the algorithm indicated by the Layout property.
Function name: updateDataset
Field Name | Field Type | Field Description | |
saveNodeLayout | Boolean | When When | |
Custom Events
The graph component provides the following events:
Node Clicked
Fires when a node is clicked in the graph.
Event name: nodeClicked
Event fields:
Field Description | Name | Type | Description |
ID | nodeId | String | ID of the relevant node |
Node Context Menu Clicked
Fires when user selects an item from the node context menu.
Event name: nodeContextMenuClicked
Event fields:
Field Description | Name | Type | Description |
ID | nodeId | String | Node ID of the clicked node. |
Item Id | itemId | String | Name of the menu item clicked by user. |
Node Entered
Fires when the cursor hovers over a node.
Event name: nodeHovered
Event fields:
Field Description | Name | Type | Description |
ID | nodeId | String | ID of the relevant node |
Node Left
Fires when the cursor stops hovering over a node.
Event name: nodeUnhovered
Event fields:
Field Description | Name | Type | Description |
ID | nodeId | String | ID of the relevant node |
Node Created
Fires when a node is created.
Event name: nodeCreated
Event fields:
Field Description | Name | Type | Description |
ID | nodeId | String | Node ID of the created node |
X | x | Integer | X coordinate of the created node |
Y | y | Integer | Y coordinate of the created node |
Node Deleted
Fires when a node is deleted.
Event name: nodeDeleted
Event fields:
Field Description | Name | Type | Description |
ID | nodeId | String | Node ID of the deleted node |
Link Clicked
Fires when a link is clicked.
Event name: linkClicked
Event fields:
Field Description | Name | Type | Description |
Source | source | String | Node ID of the link’s source node |
Destination | target | String | Node ID of the link’s target node |
Link ID | linkId | String | ID of the link |
Link Context Menu Clicked
Fires when the user selects an item from the link context menu.
Event name: linkContextMenuClicked
Event fields:
Field Description | Name | Type | Description |
Source | source | String | Node ID of the link’s source node |
Destination | target | String | Node ID of the link’s target node |
Item ID | itemId | String | Name of the menu item clicked by user |
Link ID | linkId | String | ID of the clicked link |
Link Entered
Fires when the cursor hovers over a link.
Event name: linkHovered
Event fields:
Field Description | Name | Type | Description |
Source | source | String | Node ID of the link’s source node |
Destination | target | String | Node ID of the link’s target node |
Link ID | linkId | String | ID of the link |
Link Left
Fires when the cursor stops hovering over a link.
Event name: linkUnhovered
Event fields:
Field Description | Name | Type | Description |
Source | source | String | Node ID of the link’s source node |
Destination | target | String | Node ID of the link’s target node |
Link ID | linkId | String | ID of the link |
Link Created
Fires when a link is created.
Event name: linkCreated
Event fields:
Field Description | Name | Type | Description |
Source | source | String | Node ID of the link’s source node |
Destination | target | String | Node ID of the link’s target node |
Link Deleted
Fires when a link is deleted.
Event name: linkDeleted
Event fields:
Field Description | Name | Type | Description |
Source | source | String | Node ID of the link’s source node |
Destination | target | String | Node ID of the link’s target node |
Canvas Context Menu Clicked
Fires when user selects an item from the Canvas Context Menu.
Event name: canvasContextMenuClicked
Event fields:
Field Description | Name | Type | Description |
Item Id | itemId | String | Name of the menu item clicked by user. |
Node Layout Saved
Fires when the function saveGraphLayout() is called.
Event name: Node Layout Saved
Event fields: none
Was this page helpful?