Skip to main content

Reference Plot XY

- PI Vision Widget -​

Revision History​

Revision No.DateAuthorDocument IDDescription of changes
9.2June 2025RSEW_ReferencePlotXY_v9.2_en.docAdded select REST provider
9.1May 2025RSEW_ReferencePlotXY_v9.1_en.docAdded feature Get Support
9.0March 2025ALEW_ReferencePlotXY_v9.0_en.docCompatibility with PIVision 2024 and new widget style introduced
8.2January 2024MDCEW_ReferencePlotXY_v8.2_en.docExternal button for equal axes
8.1September 2023MDCEW_ReferencePlotXY_v8.1_en.docFiltering of non-numeric values and management of equal axes
8.0August 2023FMEW_ReferencePlotXY_v8.0_en.docCompatibility PI Vision 2023
7.5June 2023MDCEW_ReferencePlotXY_v7.5_en.docBugFix
7.4May 2023MDCEW_ReferencePlotXY_v7.4_en.docRemoved the limits to 0 for the axes and for the gradient
7.3April 2023MDCEW_ReferencePlotXY_v7.3_en.docAdded SVG margins
7.2April 2023MDCEW_ReferencePlotXY_v7.2_en.docAdded data retrieve method
7.1September 2022MDCEW_ReferencePlotXY_v7.1_en.docPossibility to insert the gradient
7.0August 2022AMEW_ReferencePlotXY_v7.0_en.docCompatibility PI Vision 2022
6.0October 2021MDCEW_ReferencePlotXY_v6.0_en.docCompatibility PI Vision 2021
4.0October 2020OSEW_ReferencePlotXY_v4.0_en.docCompatibility PI Vision 2020
1.11.1August 2020BAEW_ReferencePlotXY_v1.11.1_en.docReview
1.11August 2019PCEW_ReferencePlotXY_v1.11.docBugFix
1.10June 2019PCEW_ReferencePlotXY_v1.5.docLast dot customizable in terms of size and colour; Data update when the time interval of the display is changed; Refresh interval in configuration settings; Tables also from attribute
1.5April 2019GIEW_ReferencePlotXY_v1.5.docUpdate of the selecting attributes mode and bug fixes
1.3February 2019GIEW_ReferencePlotXY_v1.3.docFirst review

Document References​

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

Introduction​

EW Reference Plot XY widget allows you to realize a 2D graph that relates values of two attributes of an element, plotting a point for every (x, y) pair on a Cartesian XY plane.

PI Vision from AVEVA, available since 2017, enables viewing real‑time data from the PI Data Archive and data organized in assets from the AVEVA Asset Framework (PI-AF).
To access PI Vision displays, simply navigate to:
https://webServer/PIVision (replace “webServer” with the correct name of the webserver machine)

The widget supports the most recent versions of HTML5-compatible browsers on computers, tablets, and phones running Android and iOS.
PI Vision configuration is intuitive – simply drag-and-drop 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 3Dplot (Reference Plot XY) in a display, first select the icon relative to the control. Then, after selecting the element to be displayed, drag it onto the display.

Figure 1 – PI Vision Menu​

Next, by selecting the contextual menu, you can access the widget configuration box.

Figure 2 – Contextual Menu​

Functionality and use​

The widget requires an element having at least two attributes related to two PI Points.
During configuration, you must choose the two attributes to be plotted. In addition, you can select one or more tables (from AF) having two columns (x and y axis values) that will be plotted and overlaid on the graph.

Furthermore, it is possible to choose the line style for the graph by selecting either Linear or Curve. The two images below show the difference between these two modes.

Figure 3 – Linear line style​

Figure 4 – Curve line style​

Customization and configuration​

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

Language​

In the International section, choose the language for labels and configuration parameters.

​
Figure 5 – Language visualization​

Title​

Modify the widget title by specifying a string in the Title section.

Figure 6 – Customization of the widget title​

Reference Curve Table​

In this section, you can select tables from an AF database.

Figure 7 – Ref Curve table​

If the text box is empty, the button to add a table is disabled. A checkbox next to the table name allows you to choose to display default tables when the widget loads.

Figure 8 – Empty string while selecting tables​

If an invalid table name is entered, an alert is shown.

Figure 9 – Alert invalid tabella​

Selecting the parameter Tables from attribute loads tables belonging to an attribute of the selected element.

  • In the Tables attribute parameter, specify the name of the attribute that contains the table name.
  • In the Columns attribute parameter, define the headers of the table.
    Tables loaded this way will be visible by default.

Example:

  • The example table is named "Test" and has headers "x" and "y".

Figure 10 – Configuration example Curve Table Ref: table to be imported​

The string attributes defined in AF specify the table name to be imported and the headers (separated by “;”).

Figure 11 – Configuration example Curve Table Ref: string attributes​

The Tables Attribute and Columns Attribute parameters are configured as shown below.

​
Figure 12 – Example of configuration of Curve Table Ref: definition of Tables Attribute and Columns Attribute​

Attributes to be displayed​

Select two attributes (related to two tags) from the available list. Once two attributes are chosen, the list is no longer available.

If you select “Show gradient,” you can choose between “Time” and “Measure” gradient. In the case of "Measure," you must select the measure to be used.

Figure 13 – Attributes to be displayed​

Figure 14 – Gradient type “Measure”​

Figure 15 – Gradient type “Time”​

Data​

There are two data retrieval methods available:

  1. Interpolation:
    For this method, specify the interval (in seconds) at which the interpolated values of a tag are considered.

    ​
    Figure 16 – Interpolation method​

  2. Summary:
    For this method, the calculation is performed over a time set defined in ‘Step’. The calculation type can be:

    • Average
    • Minimum
    • Maximum
    • Total
    • Count

    Figure 17 – Summary method​

Settings​

The following parameters can be configured:

ParameterDescription
Update intervalRefresh interval in seconds
X value nameExact name of the column in AF tables where x values are stored
Y value nameExact name of the column in AF tables where y values are stored
ItemsName of items that appear in the display
Number of decimalsNumber of decimal places
Line styleChoice between Linear or Curve
Graph line widthWidth of the graph traces
Set X axisOption to set the full scale of the x-axis
Set Y axisOption to set the full scale of the y-axis
Equal axisWhen set, the axis scale is automatic but equal for both X and Y (fixed at the highest value)
Set GradientOption to set the gradient scale
Minimum/Maximum XDefine the minimum and maximum values for the x-axis
Minimum/Maximum YDefine the minimum and maximum values for the y-axis
Minimum/Maximum gradientDefine the minimum and maximum gradient values
Last point sizeSize of the last plotted dot
SVG marginsConfigure the margins of the graph
Table 1 – Widget configuration​

Text Size​

Customize font and tooltip font sizes.

​
Figure 18 – Text size customization​

Export​

Option to show the export button on the graph and choose between .csv or .xlsx format.

​
Figure 19 – Export​

REST Provider​

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

Figure 20 - REST Provider selection​

Colours​

Customize colours for:

  • Background
  • Text
  • Axis
  • Grid
  • Tooltip
  • Tooltip boundary
  • Tooltip background
  • Last point

To configure the colour:

  • Select the colour drop-down menu
  • Choose the gradation using the first horizontal scrollbar
  • Pick a point on the colour palette
  • Set the transparency level using the second horizontal scrollbar
  • Confirm with the button provided

Figure 21 – Color customization​

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 22 – Contacts​

Installation​

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 copying files and folders to the predefined PI Vision path.

  1. Copy Files:
    Copy the following files into:
    ..\PIPC\PIVision\Scripts\app\editor\symbols\ext

    • sym-EWReferencePlotXY.js
    • sym-EWReferencePlotXY-template.html
    • sym-EWReferencePlotXY-config.html

  2. Copy Folders:
    In the folder ..\PIPC\PIVision\Public, copy the following:

    • Images: Contains the control icon EWReferencePlotXY.png
    • Libs: Contains the four libraries: EWClasses.js, d3.min.js, and moment.js

Additional notes for using the product​

For the proper functioning of the widget, explicitly enable PUT, POST, and BATCH methods in the PI Vision configuration database:

  • Connect to the Configuration database through PI System Explorer.
  • Expand the element Osisoft.
  • Expand PI WEB API.
  • Expand PI Vision-srv.
  • Select the element System Configuration.
  • Select the attribute Cors Methods and add the methods (PUT, POST, and BATCH) separated by commas.

Figure 23 – Configuration Database​

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.