Radar

Functional reference for the Radar object, including its runtime role, the axis scaling rules, and the supported settings available in the design environment.

Updated 6 min read
On this page (9 sections)
  1. Functional explanation
  2. Object name
  3. Settings
  4. Data
  5. Colors
  6. Text
  7. Position / Size
  8. Access Control
  9. Visibility

Functional explanation

The Radar object plots several values around a circular web. Each axis, drawn as a spoke, represents one measurement, and each series is drawn as one closed polygon over all the axes. It suits comparisons over a fixed set of measurements, for example a setpoint against the actual value, two pumps over the same set of readings, or a machine profile against its reference profile.

The Radar object uses the same data structure as the Bar Graph object: the categories become the axes and the series become the polygons. A radar shows the shape of a profile rather than exact magnitudes, so keep the number of series small. Three or four polygons on one web are already hard to read.

Axis scaling is per axis by default. Every spoke is scaled from its own values, which keeps spokes with different units and different value ranges comparable in shape. Enable Shared Scale to place every spoke on one common range instead, which is what is needed when all spokes share the same unit and their magnitudes must be compared directly.

A value outside the range of its axis is drawn on the outer ring rather than outside the object, so a bad reading cannot push the graphic over the surrounding page content.

Object name

Set the object name shown in the radar decorator context.

SettingDescriptionExampleUnits
Object NameName used to identify the Radar object.PumpComparisonText

Settings

Configure the chart behavior, the axis scaling, and the appearance of the web and the series polygons.

14 rows
SettingDescriptionExampleUnits
Animation SpeedDuration of the animation that grows the polygons from the centre when the chart is drawn.1500ms
Legend PositionPosition of the legend. Supported values are Top and Bottom.BottomEnum
Value UnitUnit suffix appended to tooltip values.barText
Value FormatNumber format of the tooltip value, the same patterns as the Format of a variable: 0 shows no decimals, 0.00 always shows two decimals, 0.0## shows one to three decimals and #,##0.00 adds a thousands separator. Empty shows three significant digits, for example 1234.5 as 1.23e+3. The axis values keep their own formatting.#,##0.0Text
Shared ScalePlaces every axis on one common value range when enabled. When disabled, each axis is scaled from its own values.falseBoolean
Axis MinimumMinimum value of every axis. Empty means automatic.0Number
Axis MaximumMaximum value of every axis. Empty means automatic.100Number
Show GridShows the web rings when enabled.trueBoolean
Grid LevelsNumber of web rings drawn between the centre and the outer edge. Range 1 to 10.5Number
Show Ring ValuesShows the ring value labels. On a shared scale these are absolute values. With per axis scaling they are a percentage of each axis range.trueBoolean
Show PointsDraws a marker on every polygon corner. The tooltip works whether or not the markers are drawn.trueBoolean
Point RadiusRadius of the polygon corner markers.3px
Line WidthWidth of the polygon outline.2px
Fill OpacityOpacity of the polygon fill, between 0 and 1. A value of 0 leaves the polygon as an outline.0.25Number

Axis Minimum and Axis Maximum apply to every axis. Leave them empty for automatic scaling. A Min or Max entered on a single axis in the Data section takes precedence over these two settings, and these two settings take precedence over the automatic range.

Data

The Data section defines the axes and the series. Add one Axes row per spoke and one Series row per polygon, then add one value per axis inside each series. Axis names, series names and values are all expressions, so a value can be a fixed number or a variable that is read at runtime.

SettingDescriptionExampleUnits
ExpressionVariable or expression that provides the complete data set as JSON. Takes precedence over the Axes and Series rows.PLC1.RadarDataExpression
AxesOne row per spoke. Holds the axis name and, optionally, the Min and Max of that spoke.FlowExpression
MinMinimum value of this axis only. Empty means the object wide setting or automatic.0Number
MaxMaximum value of this axis only. Empty means the object wide setting or automatic.250Number
SeriesOne row per polygon. Holds the series name, the series color, and one value per axis.Pump 1Expression
ColorColor of the polygon outline and fill.#87ceebColor
ValuesOne value per axis, in the same order as the Axes rows.PLC1.P1_FlowExpression

Min and Max on an axis row are optional. Fill them in when that spoke needs its own range, for example when one spoke is a flow in m3/h and another is a temperature in degrees Celsius. Leave them empty to fall back to Axis Minimum and Axis Maximum, or to automatic scaling when those are empty as well.

The Expression field above the Axes list is an alternative to the two lists. Point it at a variable or expression that returns the complete data set as JSON and it takes precedence over the Axes and Series rows. Use it when the number of axes or series is decided at runtime rather than at design time.

Data set returned by the Expression field
{
  "categories": [
    { "name": "Flow", "min": 0, "max": 250 },
    { "name": "Head", "min": 0, "max": 60 },
    { "name": "Power", "min": 0, "max": 75 }
  ],
  "series": [
    { "name": "Pump 1", "color": "#87ceeb", "values": [180, 42, 55] },
    { "name": "Pump 2", "color": "#e9969b", "values": [165, 47, 61] }
  ]
}

A radar always draws at least three axes. If fewer axis names are entered than there are values in a series, the missing names are generated. If a series holds fewer values than there are axes, the missing values are drawn as 0.

Colors

Configure the color scheme for the radar elements. The polygon colors are set per series in the Data section.

SettingDescriptionExampleUnits
BackgroundBackground color of the chart area.#f5f5f5Color
Grid ColorColor of the web rings.#e0e0e0Color
Axis Line ColorColor of the spokes running from the centre to each axis.#333333Color
Text ColorText color used for the axis labels, the ring values and the legend.#333333Color
Tooltip BackgroundBackground color of the tooltip.rgba(0,0,0,0.8)Color
Tooltip Text ColorText color of the tooltip.#ffffffColor

Text

Configure the font settings for the legend, the axis labels around the web, and the ring value labels.

SettingDescriptionExampleUnits
Legend Font FamilyFont family used for the legend text.ArialFont family name
Legend Font SizeFont size used for the legend text.12pxpx
Legend Font WeightFont weight used for the legend text.400CSS font weight
Axis Labels Font FamilyFont family used for the axis labels around the web.ArialFont family name
Axis Labels Font SizeFont size used for the axis labels around the web.12pxpx
Axis Labels Font WeightFont weight used for the axis labels around the web.700CSS font weight
Ring Value Labels Font FamilyFont family used for the ring value labels.ArialFont family name
Ring Value Labels Font SizeFont size used for the ring value labels.9pxpx
Ring Value Labels Font WeightFont weight used for the ring value labels.400CSS font weight

Position / Size

Configure the position and size of the Radar object. The web is sized from the smaller of the width and the height, so a square object uses the available area best.

SettingDescriptionExampleUnits
TopTop position of the object.100px
LeftLeft position of the object.220px
WidthWidth of the object.420px
HeightHeight of the object.380px
Z-indexLayer order of the object. Higher values appear in front of lower values.10Number

Access Control

Configure access control for the Radar object.

SettingDescriptionExampleUnits
Access Control EnableEnables access control evaluation for the object.trueBoolean
Access ControlExpression controlling who can use or see the object.SYSTEM.UserGroups == "Operators"Expression
Access Control FilterCSS filter applied when access control is used to alter the object appearance.blur(0px) contrast(30%)CSS filter

Visibility

Configure the runtime visibility and blinking behavior for the Radar object.

SettingDescriptionExampleUnits
VisibilityExpression controlling whether the object is visible.PLC1.RadarVisibleExpression
BlinkExpression or boolean controlling blinking.PLC1.AlarmActiveBoolean or expression
Blink SpeedBlink speed used during runtime.500ms
Blink OffsetBlink offset used to stagger blinking between objects.falseBoolean
Something missing or wrong in this article? Contact us