Box Plot

Revision History

Revision No.	Date	Author	Document ID	Description of changes
9.0	July 2025	RS	EW_BoxPlot_v9.0	-Compatibility PIVision 2024 -Added Get support-Added rest provider -Graphic restyle
8.0	August 2023	AM	EW_BoxPlot_v8.0	Compatibility PI Vision 2023
7.4	May 2023	MDC	EW_BoxPlot_v7.4	BugFix
7.3	April 2023	MDC	EW_BoxPlot_v7.3	BugFix
7.2	October 2022	MDC	EW_BoxPlot_v7.2	Improved configuration menu management
7.1	September 2022	AM	EW_BoxPlot_v7.1	Possibility to insert a threshold on the x axis or on the y axis; Possibility to insert the average in the graph;
7.0	September 2022	AM	EW_BoxPlot_v7.0.2	First version documentation

Document References

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

Introduction

The EW Box Plot widget allows you to view a Box Plot in PI Vision that highlights the variability of the values of the numeric attributes present in the OSI system, showing mean, median, standard deviation, minimum, maximum, quartiles and any outliers.

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 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

Operating Principles And Use

To insert the Box Plot you must select the corresponding icon and navigate to the asset you want to view in order to drag it to the display area.

Figure 1 - Box Plot

When the mouse is released, the Box Plot is displayed containing the trend of the selected attributes. By hovering the mouse over the individual attributes, it is possible to view the statistics.
It is also possible, by clicking on the names of the attributes in the legend, to hide or re-display one or more boxes.

Figure 2 - Insertion of Box Plot

Later, by calling the context menu with the right mouse button, further customizations and configurations are possible.

Functionality and use

The EW Box Plot widget allows you to view a Box Plot in PI Vision that highlights the variability of the values of the numeric attributes present in the OSI system, summarizing the mean, median, standard deviation, minimum, maximum, quartiles and any outliers of each attribute.

The Box Plot can be viewed both vertically and horizontally and you can choose the distance between one tick and the next.

The menu at the top right allows you to:

Download plot as a png: download the chart as a png image.

Zoom: choose an area of the graph in which to zoom.

Pan: move the graph view.

Zoom in: zoom in on the graph view.

Zoom out: zoom out on the graph view.

Reset axes: return to the original view.

Figura 4 – Box Plot icons

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 users to choose the language with which the user visualizes labels and configuration parameters.

Figure 5 - Language selection

Configurations

Figure 6 - Configurations

Setting	Description
Box Settings	It is possible to change the settings of the boxes. (read section below)
Outliers	It is possible to change the settings of the outliers. (read section below)
Calculation Type	Settings regarding data in the plot. (read section below)
Attribute/Tag	The Attribute / TAG subsection allows you to delete or change the order of the attribute boxes by clicking on the arrows. (read section below)
Server Web API	Textual input for the path of the server webAPI
REST Provider	Allows the user to select between default or custom protocol for api requests.

Table 1 - Configurations description

Box Settings

It is possible to customize: the box Color and the Number of decimals with which the statistical data of the attributes will be displayed.
With Element name it is possible to display all the box plots on the same line while with Attribute name the box plots will be displayed separately by attribute.

Figure 7 - Box Settings

Outliers

In Outliers you can:

Using the Box points drop-down menu, choose whether to display all the attribute values; None value; suspected outliers the possible outliers; all Outliers.
Change the Points size (px) of the Box points
Choose the display space of the Box points with Jitter (min = 0 - max = 1)
Choose the position with respect to the box plot of the Box points with Points position (min = -2 - max = 2) where with -2 the Box points are completely on the left and with 2 are completely on the right.
Using the Show mean and median drop-down menu it is possible to choose whether to display the median line and the mean line with Means & Median or only the median line with Median for the individual attributes.
Customize the Color of the outliers.

Figura 8 – Outliers

Calculation type

All calculations are performed on the time-set defined in ‘Step’. The calculation type could be:

Average;
Minimum;
Maximum;
Total;
Count.

Figure 9 - Calculation type

Attribute / Tag

The Attribute / TAG subsection allows you to delete or change the order of the attribute boxes by clicking on the arrows:

to delete the attribute
to move the attribute box to the first and last position respectively
to move the attribute box by 1 position to the left and right respectively.

Figure 10 – Attribute/TAG

Appearance Settings

In the Appearance settings section it is possible to change the value and color of:

Chart;
Title;
Axis X;
AxisY;

Figure 11 - Appearance settings

Chart

It’s possible:

Customize the color of the chart area both external and internal, by clicking on Color outdoor area and Color indoor area.
View or exclude some features of the menu at the top right respectively:
- Download plot as a png with Show snapshot button,
- Zoom , Pan , Zoom in , Zoom out , Reset axes with Show zoom button,
- Pan with the Show pan button.
Remove the legend from the visualization of the graph with Show legend.
Enlarge the size and choose the color of the ticks and attribute names, both in the legend and on the chart, using: Text size (px) and Text color.

Figura 12 – Customization of the chart

Title

The title of the chart can be changed by indicating any string in the Title section, enlarging the text size with Text size (px) and choosing the color from Text color.

Figura 13 - Customization of the table title

X and Y axis

It should be noted that what will be described for the X Axis also applies to the Y Axis.
It's possible:

Customize the Title, the Text size (px) and the Text color for the title.
Choose the distance between one tick and the next with Tick (point) for Y axis.
View with Show zero line and customize the zero line of the graph with Zero line width (px) and Zero line.
Display with Show grid and customize with grid line thickness (px) and Grid line color of the chart grid.
Insert a threshold line by setting Threshold value, Threshold line width (px), Threshold line color and using the drop-down menu choose the visual style with Threshold line style.

Figure 14 - X and Y axis

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 15 - 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 2 - 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 files in the predefined PI Vision path.

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

sym-EWBoxPlot.js
sym-EWBoxPlot-config.html
sym-EWBoxPlot-template.html

and in the folder ..\PIPC\PIVision\Public the following folders:

Images that contains the control icon:
- EWBoxPlot.png
Libs with the libraries used:
- EWClasses.js
- plotly.min.js

Then, open the web.config file inside the PIVision folder (..\PIPC\PIVision) and check that debug is set to "true" (Figure 16).
Save the file and restart the IIS.

Figure 16 - web.config

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.

- PI Vision Widget -​

Revision History​

Document References​

Introduction​

Definitions, Acronyms And Abbreviations​

Operating Principles And Use​

Figure 1 - Box Plot​

Figure 2 - Insertion of Box Plot​

Figura 3 - Contextual menu​

Functionality and use​

Figura 4 – Box Plot icons​

Customization and configuration​

Language​

Figure 5 - Language selection​

Configurations​

Figure 6 - Configurations​

Table 1 - Configurations description​

Box Settings​

Figure 7 - Box Settings​

Outliers​

Figura 8 – Outliers​

Calculation type​

Figure 9 - Calculation type​

Attribute / Tag​

Figure 10 – Attribute/TAG​

Appearance Settings​

Figure 11 - Appearance settings​

Chart​

Figura 12 – Customization of the chart​

Title​

Figura 13 - Customization of the table title​

X and Y axis​

Figure 14 - X and Y axis​

Contacts​

Figure 15 - Contacts​

Installation​

Requirements​

Table 2 - Installation prerequisites​

​

Installation procedure​

Figure 16 - web.config​

Notes And References​

- PI Vision Widget -