Surface plot

- PI Vision Widget -

Revision History

Revision No.	Date	Author	Document ID	Description of changes
9.0	July 2025	RES	EW_SurfacePlot_v9.0	First Version

Document References

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

Introduction

The Surface plot widget allows one to visualize a surface graph based on the values of three different attributes belonging to the same element.

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

Operating Principles And Use

To insert the Surface plot in a display it is necessary to select firstly the icon relative to the control, then pressing CTRL and the three signals to be displayed the user has to drag them on the display.
It is very important to remember that the order of the 3 attributes will be registered in order as the x, y, z axis of the plot.
It is possible to change the main axis later in the configuration.
The widget works both with attributes that are linked to tags or direct tags and has available the “convert to collection” functionality.

Figure 1 - PI Vision Menu

Once the mouse button is released the plot area is set. Then, selecting the contextual menu, it is possible to access the widget configuration box.

Figure 2 - Contextual Menu

Functionality and use

Below is an example of the configured widget..

Figure 3 - Configured widget

By positioning the mouse on a point on the graph, it is possible to view information about the ​​x, y, z values.

You can rotate and zoom the graph using the mouse and wheel.

Customization and configuration

The widget configuration allows to change the functioning and the appearance of the widget.

Language

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

Figure 4 - Language visualization

Configurations

Figure 5 - Configurations

Setting	Description
Z Axis	The main axis used as the Z of the plot.
Set gradient	Checkbox that allows the user to set manual min and max values for the gradient. If the set gradient is set to false the z axis will be used as max and min for the gradient.
Max gradient	The max value of the gradient.
Min gradient	The min value of the gradient.
Update graph	Checkbox that allows to re-render the plot when new data arrives. The update plot functionality is automatically set to off when visualizing data in the past and can be activated/deactivated for the “now” values.
Update interval (s)	The interval in seconds between every update of the graph.

Table 1 - Configurations

Widget colours

It is possible to customize widget in terms of:

• Title;
• Text sizes;
• Text color;
• Axis color;
• Grid color;
• Tooltip text size;
• Tooltip background color;
• Tooltip text color;
• Background color of the widget;
• Gradient max color;
• Gradient min color;
• X label name;
• Y label name;
• Z label name;
• Axis label name size;
• Gradient label size;

as it is possible to see in the figure below.

Figure 6 - Customization of widget colours

In order to configure the colour it is enough to select the colour drop-down menu and choose the gradation on the first horizontal scrollbar, the potential point on the colour palette and indicate through the second horizontal scrollbar the level of transparency. Confirm with the button .

Figure 7 - Choice of colour

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 8 - 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-EWSurfacePlot.js;
• sym-EWSurfacePlot-config.html;
• sym-EWSurfacePlot-template.html;

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

• Images which involves the control icon:
  • EWSurfacePlot*.png;*
• Libs which involves the four libraries:
  • EWClasses.js;
  • plotly.min.js;
  • moment.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.