Graph Widget

The graph widget displays the topology and relationships of servers, virtual machines, and managers with their corresponding status.

Series Mappings

graph_itm_topology

Chart Lab: View

Structure

The structure of the graph is given by the description of its vertices and edges. The [node] tag is used to describe each vertex, and the hierarchy of vertices is determined by the parent parameter, which sets the predecessor. The [link] tag is used to describe the edges. Adjacent edges, with vertices, are determined by the [node] tag.

Time Series can be linked to edges or vertices by indicating the alias in the series parameter of [link] or [node] tags. Also, you can list the loaded edges or vertices in the links or nodes of the [series] parameter.

Example:
[widget]
type = graph
title = Channel_Graph
alert-expression = value > 100000
alert-style = stroke: red
bundle = false
circle = false
tension = 0
[node]
id = queue_1
 
[node]
id = queue_2
 
[node]
id = queue_3
 
[link]
id = channel_1
nodes = queue_1-queue_2
series = ch1
 
[link]
id = channel_2
nodes = queue_2->queue_3
 
[link]
id = channel_3
nodes = queue_1<-queue_3
 
[series]
entity = gr01
metric = message_count
links = channel_2
 
[tag]
name = channel_name
value = channel2
 
[series]
alias = ch1
entity = gr01
metric = message_count
 
[tag]
name = channel_name
value = channel1

Hierarchical Mode

To activate the hierarchical mode use the mode setting:

mode = hierarchy

Alert-expression

In the event of an alert-expression response on the time series of the vertex or edge to which the time series is tied. Value of alert-style can be either string or script. If alert-style is script, the variable alert is available, and it is equal to the value that the alert returns. The following styles are applied (in a specified order) in the parameters below:

  • [widget] alert-style
  • [widget] node(link)-alert-style
  • [link(node)] alert-style
  • [series] alert-style
  • [series] link(node)-alert-style

For example:

link-alert-style = if (alert > 99) return 'stroke-width:3px';
node-alert-style = if (alert > 99) return 'fill:red';
Example:
[widget]
type = graph
title = Channel_Graph
alert-expression = value > 100000
node-alert-style = fill: red
link-alert-style = stroke: red
bundle = false
mode = hierarchy
[node]
id = manager_1
 
[node]
id = manager_2
alert-style = fill: yellow
 
[node]
id = manager_3
 
[node]
id = alpha.queue
parent = manager_1
 
[node]
id = beta.queue
parent = manager_1
 
[node]
id = lambda.queue
parent = manager_2
 
[node]
id = foo.queue
parent = manager_3
 
[link]
nodes = alpha.queue - foo.queue
 
[link]
nodes = lambda.queue -> foo.queue
 
[link]
nodes = beta.queue <- alpha.queue
 
[series]
entity = gr02
metric = message_count
links = lambda.queue - foo.queue
nodes = lambda.queue, manager_2
 
[tag]
name = channel_name
value = THE.BEST.CH
 
[series]
entity = gr02
metric = message_count
links = alpha.queue - foo.queue
 
[tag]
name = channel_name
value = ALPHA.FOO.CH
 
[series]
entity = gr02
metric = message_count
links = alpha.queue - beta.queue
nodes = beta.queue
 
[tag]
name = channel_name
value = ALPHA.BETA.CH

Thresholds

Thresholds for time series tied to vertices or edges are set using the link-threshold or node-threshold parameters under the [widget] tag. In this case, color and width parameters are applied to the edge and vertices based on link-widths and link-colors (node-radiuses and node-colors) under the [widget] tag.

Styles of alert-expression are superimposed over the styles defined by thresholds.

Example:
[widget]
mode = hierarchy
type = graph
title = Channel_Graph
bundle = false
data = true
depth = 3
max-ring-width = .3
link-thresholds = 1000
link-thresholds = Math.max(percentile(25), 50000)
link-thresholds = percentile(90)
link-widths = 1, 1, 2, 3
link-colors = blue, green, orange, red
[node]
id = manager_1
[node]
id = manager_2
alert-style = fill: yellow
[node]
id = manager_3
 
[node]
id = alpha.queue
parent = manager_1
 
[node]
id = beta.queue
parent = manager_1
 
[node]
id = lambda.queue
parent = manager_2
 
[node]
id = foo.queue
parent = manager_3
 
[link]
nodes = alpha.queue - foo.queue
 
[link]
nodes = lambda.queue -> foo.queue
 
[link]
nodes = beta.queue <- alpha.queue
 
[series]
entity = gr02
metric = message_count
links = lambda.queue - foo.queue
 
[tag]
name = channel_name
value = THE.BEST.CH
 
[series]
entity = gr02
metric = message_count
links = alpha.queue - foo.queue
 
[tag]
name = channel_name
value = ALPHA.FOO.CH
 
[series]
entity = gr02
metric = message_count
links = alpha.queue - beta.queue
 
nodes = beta.queue
 
[tag]
name = channel_name
value = ALPHA.BETA.CH

Settings

[widget] settings:
SettingDescription
modeDetermines the overall look of the widget, possible values: hierarchy or non-hierarchy (non-hierarchy by default).
layoutForm of the widget in non-hierarchy mode, possible values: circle or rectangle (circle by default).
depthDepth of the displayed vertex hierarchy from 1 to the maximum depth of the vertex hierarchy plus 1 (final level corresponds to edges) (maximal dept of the hierarchy be default).
tensionThe degree curvature of the edges; corresponds to the parameter C in the formula for the cardinal spline; varies from 0 to 1 (0 corresponds to straight edges) (0.9 be default).
bundledHierarchical contraction of edges (Danny Holten algorithm) (true by default).
effectsAnimation when changing the geometry of the graph (false by default).
durationThe duration of the transaction when changing the geometry of the graph in milliseconds (1000 by default).
min-ring-widthThe minimum allowed width of the vertex ring. The value is from 0 to a maximum permissible value of the ring width (0.3 by default).
max-ring-widthThe maximum allowed width of the vertex ring from the current minimal value of the ring width to (0.5 by default).
arrowsArrows on the directed edges (false by default).
node-connectConnect vertices on the perimeter (true by default).
dataInformation about the last time series value next to the image of the corresponding vertex (false by default).
node-collapseCollapse vertex sectors when clicked (true by default).
node-alert-styleStyle of vertices, in the event of an alert-expression being triggered tied to the time series.
link-alert-styleStyle of edges in the event of an alert-expression being triggered and tied to the time series.
link-thresholdsThreshold for time series attached to the edges. Can use javascript and percentile functions.
link-colorsColor to indicate the threshold of time series. It is attached to the edges and separated by commas.
link-widthsWidth to indicate the thresholds of the time series tied to the edges and separated by commas or spaces.
node-thresholdsThreshold for time series tied to vertices. Can use javascript, percentile functions, or can be set as an array.
node-colorsColor to indicate the threshold of time series that are bound to vertices and separated by commas.
node-radiusesRadii of the lighting for the display of the time series thresholds linked to the vertices and separated by commas or spaces.
node-radiusRadius of the vertex in pixels (not valid in hierarchy mode).
paddingOffset from the edge of the container in pixels.
link-animateAnimation of directed vertices (false by default).
disconnected-node-displayShow vertices without edges, values: true or false (true by default).
node-labelsDisplay vertex labels; possible values: true or false.
link-labelsDisplay edge labels; possible values: true or false.
link-dataSeries last value next to the link-label.
link-color-rangeColor scheme for link-threshold.
link-label-zoom-thresholdParameter value is a value of scale when labels appear based on edge threshold; value <1 - labels disappear on zoom out, value >1 – labels appear on zoom in.
node-label-zoom-thresholdParameter value is a value of scale when labels appear based on vertex threshold; value <1 - labels disappear on zoom out, value >1 – labels appear on zoom in.
auto-paddingAdd padding if labels overflow container, possible values: true or false (true by default).
link-width-orderSort links according to their width, possible values: top, bottom or undefined (undefined by default).
Vertex settings, [node]:
SettingDescription
idUnique name of the vertex, a required setting.
parentid of parent vertex.
seriesAlias of the time series associated with the vertex.
alert-styleVertex style, in the event of an alert-expression for the associated time series triggering.
tooltipAdd custom string to tooltip.
labelText on label; element id by default.

You can use [properties] to specify any values divided by an equal sign (if the value contains an equal sign = or \, then they should be written with a backslash: \= or \\).

Chart Lab Example for [properties]View

SettingDescription
idUnique edge name.
nodesVertices connected by an edge; id of vertices, separated by a comma or a hyphen for undirected edges, -} or {- for directed edges; if vertex id contains a hyphen, it must be shielded using the “” symbol.
seriesAlias of time series associated with the edge.
alert-styleEdge style, in the event of an alert-expression of the associated time series triggering.
tooltipAdd custom string to tooltip.
labelText on label; element id by default.

You can use [properties] to specify any values divided by an equal sign (if the value contains an equal sign = or \, then they should be written with a backslash: \= or \\).

Chart Lab Example for [properties]View

[series] settings, associating time series to the graph:
SettingDescription
nodesList of vertices associated with this series; when the vertex id contains a hyphen, it must be shielded with symbol.
linksList of edges associated with this series is defined by an id or edge id of the corresponding vertices with a hyphen; when the edge id contains a hyphen, it must be shielded with a symbol.
link-alerts-styleEdge style to which a time series is bound in the event of an alert-expression being triggered.
node-alert-styleVertex style to which a time series is bound in the event of an alert-expression being triggered.

It is possible to create an expanded mouse over tool-tip containing contextual information. Settings are used under the [series] tag.  It is possible to prescribe the [properties] tag which specifies any values divided by an equal sign (if the value contains an equal sign = or \, then they should be written with a backslash – \ = \\). They are displayed in a table within the tool-tip. Also in these tags, you can use the context setting value which is displayed in the tool-tip before the [properties] tool-tip table. Within the context setting, you can create a table using standard html parameters: table class, tbody, tr, td.

Controls

The graph appearance can be adjusted by the controls located in the top corners of the widget:

SettingDescription
dataShow or hide information about the last value of a time series next to the corresponding image of the vertices (by default, the information is hidden).
depthSet the depth of the displayed vertex hierarchy; allows a value of 1 to a maximum height of the vertex tree plus 1 (the last level corresponds to the edges); by default, the depth is equal to the height of the vertex tree displayed.
widthMaximum and minimum allowed width of the vertex ring is the percent from the radius of the circle (by default, a minimum 30%, maximum 50%).
tensionThe degree of edge curvature. Corresponds to the parameter C in the formula for the cardinal spline. Varies from 0 to 1 (0 corresponds to direct edges) (default value is 0.9).
bundleHierarchical contraction of edges (the Danny Holten algorithm); used by default.
effectsAnimation when changing the geometry of the graph; used by default.
node-collapseCollapse sector peaks when clicked; true by default.
link-animateAnimation of directed edges; false by default.