Skip to main content

Trend Chart

- PI Vision Widget -​

Revision History​

Revision No.DateAuthorDocument IDDescription of changes
9.0June 2025RSEW_TrendChart_v9.0.doc-Compatibility PIVision 2024 -Added Get support-Added rest provider -Graphic restyle
8.0August 2023DCEW_TrendChart_v8.0.docCompatibility PIVision 2023
7.7March 2023MDCEW_TrendChart_v7.7.docImproved cursor deletion management
7.6March 2023MDCEW_TrendChart_v7.6.docImproved cursor movement management
7.5March 2023MDCEW_TrendChart_v7.5.docChanged logic of X button to remove cursors Managed disappearance of trend and legend at the same time Enlarged selection area for moving the cursor Bugfix
7.4February 2023MDCEW_TrendChart_v7.4.docImproved date management; Added functionality to convert the trend into a collection; Bugfix
7.3February 2023MDCEW_TrendChart_v7.3.docBugfix
7.2February 2023MDCEW_TrendChart_v7.2.docBugfix Inserted ascending/descending traces order
7.1December 2022MDCEW_TrendChart_v7.1.docWebAPI server management on a different server
7.0August 2022AMEW_TrendChart_v7.0.docCompatibility PIVision 2022
6.3April 2022MDCEW_TrendChart_v6.3.docEnglish language default New markers New colors Global legend Improved cursor handling
6.2February 2022MDCEW_TrendChart_v6.2.docLocal date format management
6.1January 2022MDCEW_TrendChart_v6.1.docDynamic search criteria management
6.0November 2021CCEW_TrendChart_v6.0.docCompatibility PIVision 2021
4.0October 2021CCEW_TrendChart_v4.0.docFirst review

Document References​

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

Introduction​

Trend Chart it’s able to show you, by a line chart, the attributes values drag on display.

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.

TermDefinition

Operating Principles And Use​

To insert the Trend chart in a display it is necessary to select firstly the icon relative to the control, then drag on display the attributes.

Figure 1 - PI Vision Menu​

Then by selecting the contextual menu you can access the specific configuration of the widget.

Figure 2 - Contextual Menu​

Functionality and use​

Every attribute it’s represented by a line and every value is a marker, by moving the mouse over the marker will appear a tooltip with the information about the value and the timestamp.
By the configuration it’s possible to set the average or the stepped average of every trace. It’s possible to hide the trace but keep the average.

Figure 3 - Configured widget example​

You can zoom by selecting an area by dragging the cursor. It is also possible to place cursors by pressing the left button once on a point of the graph. The cursor can also be moved.

Figure 4 - Cursor​

It’s possible to change the colors, markers and lines by the configuration panel.
With these two buttons it’s possible to delete all cursors and zoom out.

Figure 5 - Buttons​

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 6 - Language selection​

Configurations​

Figure 7 - Configurations​
SettingDescription
LegendYou can change the way the legend is displayed globally.
Number of decimalsThe number of decimals shown on the graphs.
Marker sizesDimension of the markers.
GridShow/hide grid.
Ascending traces orderSet traces in ascending order.
Server Web APIIt is possible to specify the WebAPI server if it is different from the PIVision server.
Scale Type - Single/MultipleIt’s possible to choose the scale type, for example single scale or customize for every attribute. And it’s possible to choose between sqrt, linear and log for the Y axes .
REST ProviderAllows the user to select between default or custom protocol for api requests.
SVG MarginsThe margins of the graph.

Table 1 - Configurations description​

Items Settings​

Figure 8 - Items Settings​
SettingDescription
ItemSelect the item.
LegendThe name of the legend. It can be reverted by the button on the right.
ColorColor of the item.
AverageShow/hide average.
Stepped averageShow/hide stepped average.
Hide traceShow/hide the trace.
Line styleThe style of the line in the graph.
MarkerThe style of the markers on the line.

Table 2 - Items Settings description​

Appearance Settings​

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

  • Title name;
  • Title size;
  • Title color;
  • Legend width;
  • Tooltip size;
  • Cursor text size;
  • Text size;
  • Axis label size;
  • Background color;
  • Axis color;
  • Gridcolor;
  • Buttons color;
  • Trend cursor color;
  • Cursor color;
  • Tooltip color;
  • Tooltip text color;

Figure 9 - Appearance settings​

Colors selection​

To configure the different colors simply select the color drop-down menu and choose the gradation on the first horizontal scrollbar, the possible point of the color palette and indicate with the second horizontal scrollbar the eventual transparency level. To confirm, select the button.

Figure 10 - 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 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 3 - 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-EWTrendChart.js
  • sym-EWTrendChart-config.html
  • sym-EWTrendChart-template.html

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

  • Images that contains the control icon:
    • EWTrendChart.png
  • Libs with the libraries used:
    • EWClasses.js
    • d3.v4.min.last.js
    • moment.js

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

Figure 12 - 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.