Tree Map
- PI Vision Widget -
Revision History
| Revision No. | Date | Author | Document ID | Description of changes |
|---|---|---|---|---|
| 9.0 | June 2025 | RS | EW_TreeMap_v.9.0_en.doc | -Compatibility PIVision 2024 -Added Get support-Added rest provider -Graphic restyle |
| 8.1 | September 2023 | MDC | EW_TreeMap_v.8.1_en.doc | UOM management and attribute name used |
| 8.0 | August 2023 | FM | EW_TreeMap_v.8.0_en.doc | Compatibility PIVision 2023 |
| 7.1 | February 2023 | MDC | EW_TreeMap_v.7.1_en.doc | BugFix |
| 7.0 | August 2022 | AM | EW_TreeMap_v.7.0_en.doc | Compatibility PIVision 2022 |
| 6.1 | April 2022 | MDC | EW_TreeMap_v.6.1_en.doc | WebAPI management on a different server |
| 6.0 | October 2021 | MDC | EW_TreeMap_v.6.0_en.doc | Compatibility PIVision 2021 |
| 4.0 | January 2021 | CC | EW_TreeMap_v.4.0_en.doc | First release documentation and specifications |
Document References
| Document | Description |
|---|---|
| PI Vision Installation and Administration Guide | PI Vision™ user manual from AVEVA |
Introduction
The Treemap widget for PI Vision allows the visualization of data in a chart like the one shown below
Figure 1 - Tree Map widget
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
For the widget to work properly, it needs to have a properly configured AF structure behind it. All levels that you want to navigate in the treemap must have an attribute with the same name.
In the example in Figure 1, starting from the first level ("Europe" element) and in all the other levels below, the "Production" attribute is always present (attribute to be dragged onto the display to create the widget):
Figure 2 - "Volume" attribute in the first level
Figure 3 - "Volume" attribute in the second level
Figure 4 - "Volume" attribute in the third level
To insert the widget, select the corresponding icon and navigate to the asset to be displayed and drag all the attributes involved by the Advanced Manual Entry in the display area.
Figure 5 - PI Vision Menu
Then by selecting the contextual menu you can access the specific configuration of the widget.
Figure 6 - Contextual Menu
Functionality and use
After inserting and configuring the widget, it is ready to be used.
Initially the Tree Map shows the root node with its children nodes, when one of the children nodes is clicked, the node selected opens with a zoom, and the graph is able to show its sub-nodes. It works in the same way for all elements of the database’s hierarchy.
On the top there is a bar that shows the navigation, it’s possible to turn back with navigation only clicking on this bar and the display turns back one level.
On the widget display every node is represented with its name and its value.
As shown in Figure 7, it is possible to zoom each sub-level.
Figure 7 - Zoom
Hovering with the mouse on the boxes, it is possible to view a tooltip containing the values and the names of the children nodes.
Figure 8 - Tooltip
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 9 - Language selection
Configurations
Figure 10 - Configurations
| Setting | Description |
|---|---|
| Server Web API | Textual field in which is possible to insert the path of the server web api |
| Number of decimal | Number of decimals for the values on the graph |
| Show attribute name | Show the name of the attribute on the graph |
| REST Provider | Allows the user to select between default or custom protocol for api requests. |
Table 1 - Configurations
Appearance Settings
In the Appearance settings section it is possible to change the value and color of:
- Title;
- Title size;
- Background color;
- Title color;
- Header background;
- Header text color;
Figure 11 - 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 12 - 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 13 - 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-EWTreeMap.js
- sym-EWTreeMap-config.html
- sym-EWTreeMap-template.html
and in the folder ..\PIPC\PIVision\Public the following folders:
- Images that contains the control icon:
- TreeMap-Chart.png
- Libs with the libraries used:
- EWClasses.js
- d3.v4.min.last.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 14 - 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.