Surface plot

- PI Vision Widget -

Revision History

Revision No.	Date	Author	Document ID	Description of changes
10.0	January 2026	RS	EW_SurfacePlot_v10.0	Compatibility PIVision 2025, changed configOptions function functionality and changed colors selection visuals.
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

Colors Selection

To select a color click on the color’s dropdown menu. The Gradient panel will open. From this panel the user can select which color, transparency or color format he wants. A second panel named Palette view is present if the user wants to select from a few pre-determined colors. Confirm with the button .

Figure 7 - Choice of color

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	2025 (*)	Requirements are linked to the PI Vision correct functioning

Table 2 - Installation prerequisites

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

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

Installation procedure

Widget Installer

To install the widget’s files and common libraries using the widget installer follow the guide at this link:
https://documentation.e-matica.com/docs/WidgetInstaller.

Manual installation

The installation procedure includes a copy of the folders and files in the default path of the PI Vision.
In particular, it is necessary to copy the following files 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.