Skip to main content

3D Plot

- PI Vision Widget -​

Revision History​

Revision No.DateAuthorDocument IDDescription of changes
9.2June 2025RSEW_3Dplot_v9.2.en.docAdded select REST provider
9.1May 2025RSEW_3Dplot_v9.1.en.docAdded feature Get Support
9.0March 2025IDEW_3Dplot_v9.0.docCompatibility PI Vision 2024 and introduced new widget style
8.0August 2023DCEW_3Dplot_v8.0.docCompatibility PI Vision 2023
7.1February 2023MDCEW_3Dplot_v7.1.docAssets management
7.0August 2022AMEW_3Dplot_v7.0.docCompatibility PIVision 2022
6.0October 2021MDCEW_3Dplot_v6.0.docCompatibility PIVision 2021
4.2July 2021MDCEW_3Dplot_v4.2.docBugfix
4.1May 2021MDCEW_3Dplot_v4.1.docFunctioning mode with PIWEBAPI
4.0October 2020OSEW_3Dplot_v4.0.docCompatibility PIVision 2020
2.3July 2020PCEW_3Dplot_v2.3.docSupport to data expiration
2.2April 2020PCEW_3Dplot_v2.2.docBugfix
2.1March 2019GIEW_3Dplot_v2.1.docFirst review

Document References​

DocumentDescription
PI Vision Installation and Administration GuidePI Vision™ user manual from AVEVA

Introduction​

3Dplot widget allows to visualize, through the use of a three-dimensional scatter graph, the relation between 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's 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 drang-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.

TermDefinition

Operating Principles And Use​

To insert the 3D plot in a display it is necessary to select firstly the icon relative to the control, then pressing CTRL and the three elements to be displayed the user has to drag them on the display.

Figure 1 - PI Vision Menu​

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

Figure 2 - Contextual Menu​

Functionality and use​

The colour of the plotted points depends on points concentration on the basis of multi-state values configuration.

Below is an example of a configured widget.

Figure 3 - Configured widget example​

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.

It is possible to use sliders to dynamically change maximum and minimum values of the axis.

Customization and configuration​

The widget configuration allows to change the functioning and 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 4 - Language visualization​

Settings​

It is possible to edit:

  • number of decimals;
  • sampling interval;
  • the functioning mode of the widget between interpolated (the widget retrieves the data for each defined sampling interval) and compressed (the widget retrieves the recorded data of the x axis attributes and retrieves the data for the other two attributes for each timestamp).
  • REST provider

Figure 5 - Settings​

REST Provider​

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

Figure 6 - REST Provider selection​

Multi state configuration​

The multi state configuration is listed in the table below.

TitleMeaning
Dot sizeValue between 5 and 20 to select the dot size in the graph
Dot opacityValue between 0.1 and 1 to choose the dot transparency; if there are different aligned points, it is recommended to select a proper value in order to visualize all dots
Base colorDot default color
Value - ColorSpecify values range and colors related to dot
Table 1 - Multi State​

Figure 7 - Multi State Configuration​

Asset Order​

Through cursors it is possible to select the attribute order related to the x, y, z axis.

Figure 8 - Asset order​

Widget colours​

It is possible to customize widget colours in terms of:

  • Title;
  • Slider position;
  • Text sizes;
  • Text color;
  • Axis color;
  • Grid color;
  • Tooltip color;
  • Tooltip text color;
  • Background color;

as it is possible to see in the figure below.

Figure 9 - 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 10 - 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 11 - Contacts​

Installation​

Following are the installation requirements and procedure.

Requirements​

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

SoftwareVersionNote
PI Vision2024 (*)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-TQS3DPlot.js;
  • sym-TQS3DPlot-config.html;
  • sym-TQS3DPlot-template.html;

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

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