Radar Chart

- PI Vision Widget -

Revision History

Revision No.	Date	Author	Document ID	Description of changes
9.2	June 2025	RS	EW_RadarChart_v9.2.doc	Added select REST provider
9.1	May 2025	RS	EW_RadarChart_v9.1.doc	Added feature Get Support
9.0	March 2025	ID	EW_RadarChart_v9.0.doc	Compatibility PIVision 2024 and introduced new widget style
8.0	August 2023	DC	EW_RadarChart_v8.0.doc	Compatibility PIVision 2023
7.2	October 2022	MDC	EW_RadarChart_v7.2.doc	New managed languages: English - American Spanish – Spain Spanish – Mexico French – Canadian
7.1	September 2022	MDC	EW_RadarChart_v7.1.doc	New managed language: English - Australia
7.0	August 2022	AM	EW_RadarChart_v7.0.doc	Compatibility PIVision 2022
6.2	June 2022	MDC	EW_RadarChart_v6.2.doc	Addition of "en-IN" location
6.1	December 2021	MDC	EW_RadarChart_v6.1.doc	BugFix
6.0	October 2021	MDC	EW_RadarChart_v6.0.doc	Compatibility PIVision 2021
4.4	February 2021	MDC	EW_RadarChart_v4.4.doc	iOS support
4.3	December 2020	MDC	EW_RadarChart_v4.3.doc	Added curve legend in comparison mode by selecting min/max mode by axis
4.2	October 2020	MDC	EW_RadarChart_v4.2.doc	Added the functionality to retrieve Max and Min from PI
4.1	October 2020	MDC	EW_RadarChart_v4.1.doc	Added the following functionalities: Ability to change the line style and its width; Ability to change the scale of a single axis; Possibility to change the axis order
4.0	October 2020	OS	EW_RadarChart_v4.0.doc	Compatibility PIVision 2020
3.1	October 2020	MDV	EW_RadarChart_v3.1.doc	Bug Fixes
3.0	September 2020	MDV	EW_RadarChart_v3.0.doc	Revision of documentation and version update: widget version update; added new functionalities and modalities (Multiple Element Comparison, Multiple Element (Attribute) Comparison); description of new graphic solutions;
2.6	July 2020	PC	EW_RadarChart_v2.6.doc	Bug Fixes
2.5	February 2020	PC	EW_RadarChart_v2.5.doc	Expiration date support
2.4	June 2019	PC	EW_RadarChart_v2.4.doc	Bug Fixes
2.3	April 2019	GI	EW_RadarChart_v2.3.doc	Bug Fixes
2.2	March 2019	GI	EW_RadarChart_v2.2.doc	Review and restyle
1.0	November 2017	PC	TQ_Radar_v2.0.doc	First review

Document References

Document	Description
PI Vision Installation and Administration Guide	PI Vision™ user manual from AVEVA

Introduction

The EW Radar Chart widget allows, through different modes, to use a radar graph in order to:

• It allows visualizing the historical trend of a quantity associated with a tag. The data used are sampled at regular time intervals.
• Compare the same attribute common to several elements;
• View multiple attributes of a single element;
• Compare several common attributes of different elements (in two different ways, see the following paragraphs for more information about how to use the EW Radar Chart).

The PI Vision of AVEVA is available from 2017 and allows viewing real-time data from PI Data Archive and data organized in assets from the AVEVA Asset Framework (PI AF). In order to achieve PI Vision displays, simply access to https://webServer/PIVision (indicating the correct name of the webserver machine).

The most recent versions of most HTML5 compatible browsers are supported on computers, tablets and phones running Android and iOS.

In PI Vision the configuration of the elements is quite intuitive and is characterized by a simple drag-and-drop of the control into the display.

Definitions, Acronyms And Abbreviations

Acronyms and definitions that are used in the current manual are listed below.

Term	Definition
AF	Asset Framework
UOM	Units of Measure

Operating Principles And Use

To insert the Radar Chart widget in a PI Vision display, depending on the mode of use, first select the icon relative to the control and then the elements to be displayed, holding down the CTRL key for a multiple selection, and then drag them on the display.

Figure 1 - PI Vision Menu

Once the mouse button is released, the radar is displayed with pre-set axis according to selected elements.

Figure 2 - Widget insert

In order to access the configuration menu of the widget, right click on the control and select Configure Radar Chart.

Figure 3 - Contextual Menu

Functionality and use

Once the widget has been placed and correctly configured, it is possible to see the radar into the display (Figure 4).

Figure 4 - Widget EW Radar Chart

The maximum number of plottable curves is five. The minimum number of axes is always three.

To be able to display the widget correctly, if multiple AF elements are used, they must all have a common attribute and/or common AF categories.

The chart of the EW Radar Chart widget consists of labels that identify references to attributes or elements or values over time (depending on the radar modes selected), curves that identify attributes (or elements or values over time), and concentric circumferences. Each radius, as in Figure 4, corresponds to an attribute (or to an element or to a value over time) and on each one a point referring to the specific value is drawn; the graph is formed by joining the points with curves, each colored as decided during the specific configuration.

To view the value of a point, simply approach it with the mouse. The widget will display a tooltip, which will contain information related to value, time and plotted attribute.

Figure 5 - Tooltip

There is a display mode (Single history (*), see next paragraph), among the five that the widget offers, which allows to analyse the trend of a single variable over time, whose values are sampled at regular time intervals. Here is an example.

Figure 6 - Single history(*) modality

Customization and configuration

The widget configuration allows to change the appearance in terms of colours, text size and language visualization.

Language

The section Language allows the user to choose the language with which the user visualizes labels and configuration parameters.

Figure 7 - Language visualization

Sizes

In the Appearance Settings section, it is possible to select the following parameters:

• Axis width: thickness of the axes on which the points of the single measurements are displayed;
• Main axes width: main chart axis size;
• Circumferences: number of equidistant concentric circumferences which allow to highlight values intervals;
• Label Dist: distance between the radar chart and labels;
• Dot radius: size of the dots related to the quantities visualized in the plot;

By setting the values to zero, elements of the graph can be removed (e.g. by setting Main Axis Width = 0 the main axes are removed from the display).

• SVG Margins: they indicate the top, bottom, left and right margins. By changing these values, the graph is moved down / up, right and left, with a resizing in relation to the widget window.
• Legend Position: it modifies the position of the legend. It is possible to place it top right/left, bottom right/left;
• Axis label: axes labels sizes;
• Circ. label: circumferences labels sizes;
• Tooltip: tootltip font size.

Figure 8 - Appearance Settings

Modality

In the Modality section, it is possible to select the following parameters:

• Radar modality: there are five modalities (each time you change modality, save and reload the page to see the changes):

  • Single history (*): the trend of the values over time of a single attribute selected from a single element is displayed, through sampled intervals.

  The axis on the zero angle is the first data of the series in question. It is possible to change the time interval of the widget by changing that of the display (if you set the time interval of the display with the button , the last clockwise axis will indicate the most recent data).

  To choose the attribute, configure the parameter Monitored Attribute that identifies the name of the attribute to be displayed in the graph. It is mandatory to enter the attribute name for the Multiple and Single history (*) modalities. In the case of using the Single history mode (*), if the attribute name is not indicated, the following error message will be displayed as in Figure 9:

  

  Figure 9 - Monitored Attribute configuration failure error

  In Multiple mode, the attribute must be common to all selected elements.This configuration is not necessary when using the Multiple Attrs, Multi Element Comparison and Multi Element (Attribute) Comparison modalities.

  For this modality, there is no the need to select and drag attributes: select the chosen element, drag it to the display, then configure the widget specifically for Single history mode (*);

  

  Figure 10 - Example of Single history (*) modality use

  In the case of Single history (*) radar modality, the following

  • Multiple: the trends of the measures of a single attribute from different elements can be shown on the graph. The chosen attribute must be common to all the elements selected and dragged to the display.
    To choose the attribute, configure the parameter Monitored Attribute (see the previous Single history (*)).
    For this mode there is no need to select and drag attributes: select the chosen elements (via CTRL + mouse click), drag them on the display, then configure the widget specifically for the Multiple modality;
    

  Figure 11 - Example of Multiple modality use

  • Multiple Attrs: it allows to graphically display the measures of several attributes of the same element.
    To identify the element in question, its name is shown under the title.
    To choose the attributes to be inserted in the EW Radar Chart, make a multiple selection of the attributes of a single element, drag them on the display and configure the widget specifically for Multiple Attrs modality;
    

  Figure 12 - Example of Multiple Attrs modality use

  • Multi Element Comparison: it allows to view multiple attributes from different elements. The attributes will be displayed on the axis labels, while the graph curves describe the chosen elements. An example in Figure 15: as it is possible to see from the legend at the top left, each element has a predefined color (editable), which allows to identify the corresponding curve. The attributes (Livello, Temperatura, Portata IN) are labelled on the axes.
    The legends show the minimum and maximum of the axes for that element
    It requires the configuration of the Attributes category mod. Comparison that indicate the AF category to which the attributes to be displayed belong. The category (and the attributes present under it) must be common to all the elements in study in order to display the data on the graph. Once the category has been indicated, it is not possible to specify the attributes, but all those below the chosen category will be available in the graph. An example of AF categorization is shown in Figure 14.
    

    Figure 13 – Example of an AF environment with attributes listed under a category

    For this modality there is no need to select and drag attributes: select the chosen elements (via CTRL + mouse click), drag them on the display, then configure the widget specifically for the Multi Element Comparison modality;
    

Figure 14 - Example of Multi Element Comparison modality use

• Multi Element (Attribute) Comparison: it allows to view the attributes of different elements, the elements are shown on the axes and the curves represent the individual attributes. An example in Figure 17, where the attributes chosen for displaying are indicated in the legend, while the elements are shown in the label.
  In this case, the legends show the minimum and maximum of the axes for that attribute
  It requires the configuration of the Attributes category mod. Comparison in order to view the data on the EW Radar Chart (see previous Multi Element Comparison).
  For this modality there is no need to select and drag attributes: select the chosen elements (via CTRL + mouse click), drag them on the display, then configure the widget specifically for the Multi Element (Attribute) Comparison modality;
  

Figure 15 - Example of Multi Element (Attribute) Comparison modality use

• Date format: indicates the date-time format for the Single history mode (*);

Thus, the Modality section appears in these modes for each of the Radar Modalities:

• Single history (*)

Figure 16 - Single history (*) Modality

• Multiple
  

Figure 17 - Multiple Modality

• Multiple Attrs
  

Figure 18 - Multiple Attrs Modality

• Multi Element Comparison
  

Figure 19 - Multi Element Comparison Modality

• Multi Element (Attribute) Comparison
  

Figure 20 - Multi Element (Attribute) Comparison Modality

Configuration section

In the Configuration section, it is possible to select the following parameters:

• Sampling Interval (s): if Single history (*) mode is used on the radar, it corresponds to the data sampling time in seconds;

• Update interval (s): radar refresh time, in seconds, in order to update new values.

• UOM: if a UOM is indicated, it is inserted in the labels. Multiple UOMs cannot be entered;

• Number of Decimals: it indicates how many decimal places to display for the values;

• Tooltip event: it is possible to choose between Hoover (to view the tooltip simply move the cursor over a point) and Click (to view the tooltip you have to click a point, double click to close the tooltip).

• Min / Max mode: allows to choose whether to set (in the "Curve Settings" section) the maximum and minimum of the plotted curves (By curves) or of the axis (By axis).

• Min/Max from PI: allows to retrieve the maximum and minimum of the curve or of the axis (depending on the Min / Max mode field) from the PI. When you activate this function, save and reload the page to see the changes.

  • If the maximum and minimum are at element level, two attributes called "Min" and "Max" (as written in the widget configuration, but the names can be changed) must be added to the model.

  Figure 21 - Max/Min attributes at element level

  • If the maximum and minimum are at attribute level, two child-attributes must be added to the considered attribute.

  Figure 22 - Max/Min child-attributes at attribute level

In the case one of the Multi Element Comparison and Multi Element (Attribute) Comparison modes are used, the following Settings tab will be displayed:

Figure 23 - Configuration section

Axis Configuration

In the Axis Configuration section, it is possible to order and to remove the axis.

• With the button the axis is ordered as first.
• With the button the axis is ordered one level above
• With the button the axis is ordered as last
• With the button the axis is ordered one level below
• With the button the axis is removed from the list

Figure 24 - Axis Configuration section

Curves settings

Curves settings section is dynamic according to the selected “Min / Max mode” parameter (By curves or By axis).

By selecting "By curves", for each curve plotted in the widget it is possible to configure:

• Maximum and minimum value of the curve scale;
• Line style (linear, dotted, dashed, dash-dot);
• Graph line width.

It is also possible to view Under min values: if selected, it shows the values which are lower than the minimum set, otherwise it considers them equal to the minimum (e.g. if on Min value is equal to 5, and the option is not selected, all the values lower than it will be considered equal to 5).

Figure 25 – Curve settings with "By curves" mode

By selecting "By axis", for each curve plotted in the widget it is possible to configure:

• Line style (linear, dotted, dashed, dash-dot);
• Graph line width.

Figure 26 – Curve settings with "By axis" mode

By clicking on the symbol next to Min / Max, it is possible to change the scale of each axis of the radar chart (Figure 26).

Figure 27 – Change axis scale

REST Provider

Allows the user to select between default or custom protocol for api requests.

Figure 28 - REST Provider selection

Multi State Configuration

In the Multi state configuration section the colors of the graph of the single attribute are indicated according to the set values, to have useful visual feedback about the trends of the object under study. It is possible to specify both values and colors in detail as well as on the chart.

The Multi state configuration is not available with the Comparison modalities.

Figure 29 – Value/Color settings

To configure the colour simply select it in the drop-down box and choose the proper gradation on the first horizontal scrollbar and, through the second one, the potential transparency. To confirm press the button .

To insert a new numerical value select and digit the new value in the text box; to change single values it is sufficient to overwrite them, being careful to keep the same ascending order.

Figure 30 – Color choice

Assets

In the Assets section, it is possible to delete the attributes from the Radar Chart by clicking on the trash can icon highlighted in Figure 11.

Figure 31 - Assets section

Graph colours

It is possible to configure colours of the following sections of the graph:

• Background: entire graph foreground;
• Circumferences: color of the concentric circumferences displayed in the graph;
• Circles: color of the background of EW Radar Chart graph (a colour difference is still set in order to enhance the visibility);
• Axis: colours of single measure radius;
• Main axis: main axis colours, the colour of the two perpendicular diameter and not necessarily related to a measure;
• Axis label: labels in correspondence to axes;
• Circ. label: labels in correspondence to circumferences;
• Tooltip: tooltip’s text color;
• Tooltip Back.: color of the tooltip background;
• Tooltip stroke: tooltip’s edge.

Figure 32 – Colours choice

Contacts

Get Support button (read Get Support documentation)

Link to e-matica.com (click on the icon)

Link to widget online documentation (click on link)

Figure 33 - Contacts

Installation

Following are the installation requirements and procedure.

Requirements

In order to install the product, minimum requirements are listed in the table below:

Software	Version	Note
PI Vision	2024 (*)	Requirements are linked to the PI Vision correct functioning

Table 1 - Installation prerequisites

(*)This widget is also compatible with PI Vision 2023, 2022, 2021, 2020 and 2019.

We suggest using Google Chrome for full compatibility with the widget.

Installation procedure

The installation procedure involves the copy of different folders and file in the predefined PI Vision path.

In particular it is necessary to copy the following files in the folder ..\PIPC\PIVision\Scripts\app\editor\symbols\ext:

• sym-EWRadarChart.js;
• sym-EWRadarChart-config.html;
• sym-EWRadarChart-template.html;

In the folder ..\PIPC\PIVision\Public the following folders:

• Images which involves the control icon:
  • EWRadarChart.png;
• Libs which involves the libraries:
  • EWClasses.js;
  • moment.js;
  • d3.min.js;
  • TweenMax.min.js.

Notes And References

For more information about Vision PI refer to documentation on AVEVA © portal.
For information about the web service to refer to the specific documentation.