Waterfall Chart
- PI Vision Widget -
Revision History
| Revision No. | Date | Author | Document ID | Description of changes |
|---|---|---|---|---|
| 9.0 | July 2025 | RS | EW_WTFChart_v9.0 | -Compatibility PIVision 2024 -Added Get support-Added rest provider -Graphic restyle |
| 8.0 | August 2023 | AM | EW_WTFChart_v8.0 | Compatibility PI Vision 2023 |
| 7.4 | May 2023 | MDC | EW_WTFChart_v7.4 | Ability to insert multiple widgets in the same display |
| 7.3 | April 2023 | MDC | EW_WTFChart_v7.3 | BugFix Default colors changed |
| 7.2 | April 2023 | MDC | EW_WTFChart_v7.2 | BugFix |
| 7.1 | February 2023 | MDC | EW_WTFChart_v7.1 | BugFix |
| 7.0 | July 2022 | AM | EW_WTFChart_v7.0 | First version documentation |
Document References
| Document | Description |
|---|---|
| PI Vision Installation and Administration Guide | PI Vision™ user manual from AVEVA |
Introduction
The EW WTF Chart widget allows you to view a bar chart in PI Vision in which positive and negative values of numeric attributes are highlighted, automatically determining the algebraic sum of the processed values.
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.
| Term | Definition |
|---|
Operating Principles And Use
To insert the Waterfall Chart you must select the corresponding icon and navigate to the asset you want to view in order to drag it to the display area.
Figure 1 - PI Vision Menu
When the mouse is released, the bar graph is displayed containing the value of the chosen attributes. The color of the column changes if the value is negative or positive. The last column is the total algebraic sum of the attributes present in the graph, calculated automatically by the widget.
Figure 2 - Waterfall chart
Subsequently, by calling the context menu with the right mouse button, further customizations and configurations are possible.
Figure 3 - Contextual Menu
Functionality and use
The EW WTF Chart widget allows you to view a bar chart in PI Vision which highlights positive and negative values of numeric attributes. The difference is highlighted by the color of the bars that can be customized by the user and the direction that the bars take depending on whether they represent positive or negative values.
The last column “Total” represents the algebraic sum of the processed values and is automatically calculated by the widget.
On the label, you can choose to display the unit of measurement.
Figure 4 - Waterfall configured
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 5 - Language selection
Configurations
Figure 6 - Configurations
| Setting | Description |
|---|---|
| Use Pi WebAPI | Use Pi Web API to load data or not. |
| Attribute name | Show the name of the attribute. Checking this option will disable attribute description. |
| Attribute description | Show the description of the attribute. Checking this option will disable the attribute name. |
| REST Provider | Allows the user to select between default or custom protocol for api requests. |
Table 1 - Configurations description
Values
The “Attribute” subsection allows you to delete or change the order of the attribute bars by clicking on the arrows:
to delete the attribute
to move the attribute bar to the first and last position respectively
to move the attribute bar by 1 position to the left and right respectively.
Figure 7 - Values
Appearance Settings
In the Appearance settings section it is possible to change the value and color of:
- Title;
- Label;
- Bars;
- Axis;
- Margins;
Figure 8 - Appearance settings
Title
The title of the chart can be changed by indicating any string in the “Title” section, enlarging the text size with “Text size (px)”, choosing the color from “Text color” and making it visible or not by flagging “Visible”.
Figure 9 - Title
Label
The chart label can be changed by indicating any string in the “Label” section, enlarging the text size with “Text size (px)”, choosing the color from “Text color”, making it visible or not by flagging “Visible” and, if present, make the unit of measure visible with “UOM visible”.
Figure 10 - Label
Bars
You can customize the colors of the bars for “Positive Values”, “Negative Values” and “Total”. You can enlarge the “Edge connector (points)” and the “Edge connector color” of the hatch between the bars (Connector border) and the “Text size (px)” and the “Text color” of the value attributed to each bar.
Figure 11 - Bars
Axis
You can customize the “Text size (px)”, the “Text color” and the “Axis color” simultaneously for the x and y axes.
Figure 12 - Axis
Margins
You can customize the length of the margins.
Figure 13 - Margins
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 14 - 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-EWWTFChart.js
- sym-EWWTFChart-config.html
- sym-EWWTFChart-template.html
and in the folder ..\PIPC\PIVision\Public the following folders:
- Images that contains the control icon:
- EWWTFChart.png
- Libs with the libraries used:
- EWClasses.js
- d3.min.js.
Then, open the web.config file inside the PIVision folder (..\PIPC\PIVision) and check that debug is set to "true" (Figure 15).
Save the file and restart the IIS.
Figure 15 - 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.