Heat Map

- PI Vision Widget -

Revision History

Revision No.	Date	Author	Document ID	Description of changes
9.0	July 2025	RS	EW_TimeSlider_v9.0.doc	-Compatibility PIVision 2024 -Added Get support-Added rest provider -Graphic restyle
8.1	March 2024	MDC	EW_HeatMap_v8.1	BugFix
8.0	August 2023	MDC	EW_HeatMap_v8.0	Compatibility PIVision 2023
7.4	June 2023	MDC	EW_HeatMap_v7.4	BugFix
7.3	April 2023	AR	EW_HeatMap_v7.3	New color style and out of range color option added
7.2	February 2023	MDC	EW_HeatMap_v7.2	BugFix
7.1	January 2023	MDC	EW_HeatMap_v7.1	Added units of measure to the tooltip
7.0	November 2022	AR	EW_HeatMap_v7.0	First version documentation

Document References

Document	Description
PI Vision Installation and Administration Guide	PI Vision™ user manual from AVEVA

Introduction

Heatmap widget is a representation of data in the form of a map or diagram in which data values are represented as colors.

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 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 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 widget in a display it is necessary to select firstly the widget icon, then from the asset menu, drag the elements you want to show.

Figure 1 - PI Vision Menu

When the mouse is released, the attributes of the selected element will be displayed as well as the same attributes of all the elements below the selected asset with the same template. When the mouse is released on the dashboard an empty frame will appear. So it is necessary to right click on it to access the widget configuration panels:

Figure 2 - Contextual Menu

Clicking on Configure EWHeatMap symbol the configuration panel will appear on the right side of the screen.

Figure 3 - First Configuration

The initial selected Element will be already present in the Element section. If not, or if it is the case of a multiple element panel configuration, it is possible to select the desired element on the left side panel on the screen and drag it on the widget panel. This will automatically update the Element panel where all of the selected elements will appear.
Now it is necessary to select the attribute(s) of the selected elements that the user wants to display on the panel. In order to do that it is necessary to select the icon, located on the left of the Attribute title situated below the Element panel. At this point this message will appear on the window:

Figure 4 - New attribute configuration

It is sufficient to type the name of the attribute here to have it displayed on the panel. If the name is incorrect or inexistent an error message will appear. If you set the values in the Calculation Type panel (see next chapter) you will be able to see what type of representation you will have of the data (maximum/minimum/average each hour/day/minute and so on).

If still no data is present on the panel we suggest you check that the time range of the dashboard is coherent with the one of the data as well as the time periods used in the calculation type section. Following an example of a panel after a correct configuration.

Figure 5 - Heatmap Widget

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

Setting	Description
Server Web API	Textual input for the path of the server webAPI
REST Provider	Allows the user to select between default or custom protocol for api requests.

Table 1 - Configurations description

Data

Figure 8 - Data

All calculations are performed on the time-set defined in ‘Step’. The calculation type could be:

• Minimum;
• Maximum;
• Average;
• Total;
• Count.

In the Element section the user can decide the order of the elements on the y axis. If the user decides to add other elements on the graph then those elements will have to be dragged on the widget panel. The element tab will be automatically updated. Attribute selection will allow the user to order the attributes and to add new ones, clicking on the icon on the top right corner of the Attribute header .

Figure 9 - Add new attribute

Appearance Settings

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

• Title;
• Area;
• Axis X;
• AxisY;
• Scale;
• Tooltip;
• Menu;
• Utility

Figure 10 - Appearance settings

Title

You can edit the title by its value, color and size as shown in the figure below.

Figure 11 - Title

To set the color you have to click on the down facing arrow, then select the proper color from the first horizontal scrollbar and then choose the shading. In the second scrollbar you can set the transparency of the color. To confirm you should click on the button.

Show/Hide Area

Here you can set different features:

• Background color;
• Top padding;
• Down padding;
• Left padding;
• Right padding;
• Axis padding;
• Font-size;
• Color of text;
• Grid color;
• Padding of the elements along x axis (Thickness X);
• Padding of the elements along y axis (Thickness Y);

Figure 12 - Area configuration

To include in the widget display all the texts it is important to add correctly. Too wide padding will leave no space for the graph, too little may not give enough space to the text to be displayed.

X/Y Axis

Figure 13 - X/Y Axis

Scale

‘Scale visible’ option will allow you to see the coloured scale on the right of your graph. The autoscale command defines automatically the range of the variables in the graph. Otherwise, a manual definition is set. In that case a maximum value and a minimum value have to be defined. It is also possible to select a color specific for values outside of the range previously defined.

Figure 14 - Scale

In the same manner color could be automatically defined or manually selected. It is possible to select the gradient type of the scale. In particular it is possible to define three color values for the gradient or two, depending on customer preferences.
A ‘show UOM’ flag allows one to choose whether to show the unit of measure of the variable or not. If flagged a Padding Top and Padding right options will allow the user to set its position on the screen.

Tooltip

Of the tooltip different features can be defined

• Background color;
• Font-size;
• Text color;
• What to display: value, data or element.

Figure 15 - Tooltip

Menu

The menu permits switching between different attributes. Here it is possible to define its format.You can define:

• Color;
• Font-size
• Text color;
• Positioning.

Figure 16 - Menu

Utility

If the snapshot flag is activated, a button that allows taking a snapshot on the graph will be displayed on the upper right corner of the graph.
The Format Date value represents the standard form used for each time value shown on the graph.
The number of decimals indicate how many decimals to show for each value on the graph.

Figure 17 - Utility

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 18 - 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-EWHeatMap.js
• sym-EWHeatMap-config.html
• sym-EWHeatMap-template.html

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

• Images that contains the control icon:
  • EWHeatMap.png
• Libs with the libraries used:
  • EWClasses.js
  • Plotly.min.js

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

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