GanttSA

- PI Vision Widget -

Revision History

Revision No.	Date	Author	Document ID	Description of changes
9.2	June 2025	RS	EW_Gantt_v.9.2_en.doc	Added select REST provider
9.1	May 2025	RS	EW_Gantt_v.9.1_en.doc	Added feature Get Support
9.0	February 2025	ID	EW_GanttSA_9.0_en.doc	Compatibility PIVision 2024 and new widget style introduced
8.0	August 2023	FM	EW_GanttSA_8.0_en.doc	Compatibility PIVision 2023
7.2	March 2023	AR	EW_GanttSA_7.2_en.doc	Bug fix for legend color state (now it is not necessary to have one )
7.1	February 2023	AR	EW_GanttSA_7.1_en.doc	BugFix
7.0	August 2022	AM	EW_GanttSA_7.0_en.doc	Compatibility PIVision 2022
6.0	October 2021	MDC	EW_GanttSA_6.0_en.doc	Compatibility PIVision 2021
4.0	October 2020	OS	EW_GanttSA_4.0_en.doc	Compatibility PIVision 2020
3.0.2	December 2018	GT	EW_Gantt_3.0.2_en.doc	Restyle and modification
3.0.1	March 2018	GT	EW_Gantt_v.3.0.1 _en.doc	Modification of the installation procedure following the modification of the libraries used to download the data in Excel format
3.0	January 2018	PC	TQS_Gantt_v.3.0 _en.doc	Review and change information about the interaction with the Gantt widget
2.6.1	September 2020	OS	EW_GanttSA_2.6.1_en.doc	Restyle and modification
2.1	March 2019	GI	EW_GanttSA_2.1_en.doc	Restyle and modification
2.0	December 2017	GT	TQS_Gantt_v.2.0 _en.doc	Restyle widget configuration Change installation procedure
1.0	September 2017	GT	TQS_Gantt_v.1.0_en.doc	First version of the document

Document References

Document	Description
PI Vision Installation and Administration Guide	PI Vision™ user manual from AVEVA
EW_AlarmTable	Alarm Table widget user manual
EW_TreeEvent	TreeEvent widget user manual

Introduction

The GanttSA widget allows you to display the Event Frames linked to an AF element within a time interval in graphic format. There are two possibilities for selecting the AF element:

• Use the EWTreeEvent widget to navigate in the AF tree and choose the node in question (set the interaction with the Tree Event widget in configuration);
• The element is indicated in the configuration of the widget itself (in configuration, remove interaction with other widgets).

The widget can cooperate with the Alarm Table 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 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
AF	Asset Framework
EF	Event Frame

Operating Principles And Use

To insert the widget, select the corresponding icon, navigate to the asset you want to view and drag an element of the asset containing the desired event frames in the display area. The Figure 1 below shows the icon.

Figure 1 - PI Vision Menu

When the mouse is released, an empty table with the standard GanttSA name is displayed, with a loading icon at the left of the title ().

Figure 2 - First display before configuration

To properly configure it, call the contextual menu with the right mouse button, so that you can access the settings for the widget to function correctly.

Figure 3 – Contextual Menu

Before talking about the widget configuration it is important to set the AF Elements correctly. It is necessary to have an element template where the event frames are stored. In figure all the important features are highlighted. Make sure that Event Frame Generation is enabled in the Analysis Templates section.

Figure 4 - Basic AF Configuration

When you drag the widget on the display, it will try to access the event frames that are defined in the sections:

• EF template names, where the user can insert the template of all the event frames intended to be displayed;
• Element template names, where the user can insert the template of all the element templates containing the event frames intended to be displayed;
• Event frame filters. Here it is possible to define how the widget selects the Event frames, for this first configuration select only the ‘Attached to element filter’ to obtain the Event frames only for the dragged-in element.

Figure 5 - Basic set up of the widget

If the configuration has been set up correctly and event frames are present in the display time range, the widget should display something similar to the figure below. Remember to save the display and reload the page after the configuration.

Figure 6 - First widget Configuration

If the user wants to display the widget with the Tree View event widget, then should at first properly configure the tree event such that it contains all the desired elements.

Figure 7 - Tree View

Then start again with the configuration of the GanttSA widget, but in this case:

• flag the option Tree View
  
• put in the Element template names parameter of the widget the element templates’ names of all the elements present in the Tree View;
• update the Event Frame filters section to the desired configuration;
• 
  In this case for example all the event frames of the single elements are displayed and if the father-element is selected, the event frames attached to all the children elements are displayed.

Functionality and use

Once inserted and configured, the widget is present in the display.

As you can see in the following example, the details of the events are shown, divided by element, occurring within the time interval of the selected alarm.

Figure 8 - GanttSA

You can view more information using the mouse:

• With the scroll wheel it is possible to zoom the displayed data;
• With a left click of the mouse and its dragging it is possible to move to other lines that identify other event frames;
• Passing with the mouse over the rectangle that identifies the event frame, the tooltip is displayed as set in the configuration.

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 the user to choose the language with which the user visualizes labels and configuration parameters.

Figure 9 – Language choice

Configuration

In the Configuration section it is possible to select the following parameters:

Title	Meaning
Server WebAPI	The user has to set the name of the machine involving web API. If this machine coincides with the web server, this parameter can be left blank.
TreeView	Required to indicate if the widget should work in normal or Stand-Alone mode.
Element name	Flag that, if it is activated, shows the element name in the top of the Gantt Chart
EF template names (split with ‘;’ for multiple entry)	Indicate the name of the event frame template to be displayed in the widget. It is possible to enter multiple names separated by ";"
Element template names (split with ‘;’ for multiple entry)	To allow the EW GanttSA the correct management of the graph it is necessary to indicate which elements must be chosen for the display of the Event Frames. In this parameter you specify the name of the template of the elements to be considered in the visualization. It is possible to indicate more than one template by splitting the names with the character. The template must exist in the reference AF database.
EFs grouping mode	Indicate the characteristic that groups the Event Frames on the y axis. The possible settings are: Element Name: Groups are created based on the property Name of the event frame. Element Description**:** Groups are created based on the property Description of the event frame. Element Template: Groups are created based on the property Template of the event frame. Element Extended Property: Groups are created based on the parameter RefElementName defined in the Extended Property of the element. No groups: Event frames are not grouped. EF Template: They are grouped according to the event frame template
Event frame click function	Indicate in the configuration section Function for Click Event Frame the action to be performed. The possible settings are: Change Interval: With this feature the time window of the entire Display changes with reference to the selected event frame. Send Node: Send the Event Frame data to the display (in this way it interacts with the other widgets). Update Table: It is used to interact with the EWDataTable widget, sending it the eventFrame time interval.
Start and End offset (s)	If the Change Interval mode is selected, it will be possible to set the initial offset and the final offset.
Update from PI	Automatically update the widget when updates arrive at PIVision
Show TimeLine	Allows you to show / hide the Timeline
Horizontal Zoom	Allows you to enable or disable the zoom on the time window
Start/end offset	Allows you to increase or decrease the extremes of the time interval, defined by the display, in which to go to check if there are events
Filter groups	Allows you to filter the displayed groups
Start/End Offset	Through this parameter it is possible to indicate if you want to represent the events with a start and end offset. This is to improve the display of two nearby events.
Exclusion Table	If it is defined, the Widget checks in the database if the user logged has the rights to view the Widget (E.g. If in the table there is a row with Widget field equal to EW_GanttSA and User field equal to the name of logged user, he won't be able to view the widget).

Table 1 - Configuration section parameters

Figure 10 - Configuration Section

REST Provider

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

Figure 11 - REST Provider selection

Event Frame Filters

Indicate in the configuration section Event Frame filters if the displayed event frames that pass the filter are attached to the element, to the sub-element or are annotated. This could lead to a different substantial configuration of the widget. If none is chosen all the event frames that have the selected event frame template are displayed.

Figure 12 - Event frame filters section

Appearance Settings

In the Appearance Settings section it is possible to select the following parameters:

Title	Meaning
Title	The title of the widget
Title color	The color of the widget’s title
Text Size	You can customize the size of the text by indicating the number of pixels in the Text Size / Text size parameter. By selecting Same dimensions for EF it is possible to set the rectangles, which represent the Event Frames, with the same text size.
Max Height	This parameter indicates the maximum size of the widget within the display.

Table 2 - Appearance Settings section parameters

Figure 13 - Appearance Settings section

Item Settings

In the Item Settings section it is possible to select the following parameters:

Title	Meaning
Item Size	Indicates the height of the rectangle that represents the Event Frame
Overlay	It allows you to specify that the rectangles must be on the same line, even at the risk of overlapping.
Row height	The height of the rows expressed in pixels.
Show label	Specifies if you want to see the label on the rectangles
Dimensions from attribute	Checkbox that enables the field Size Attribute.
Size Attribute	Attribute name containing the size of the even frame.
Color Mode	Select containing two modes: From Table, From Attribute. (Check following section for more details)
Color attribute	Field that gets activated if Color Mode is set to: From Attribute. (Check following section for more details)

Table 3 - Item settings section parameters

Figure 14 - Items settings section

Color Mode

The color mode select holds two different options: From Table and From Attributes.

From Table

If the From table option is selected another section will be present in the configuration tab:
Color Table.

Figure 15 – Color Table

Color Table AF setup

To insert the information inside the Color Table section first we need to correctly set up the Event Frame in the AF. It is possible to set the color of the Event Frames, based on their status and indicate which attribute of the table determines the color of the item.

First of all, it is necessary to configure the Event frames such that in their name or description they contain a code for the color table.

Figure 16 - Event Frame

In this case the description contains the code “20”. Then the table present in AF should have the same structure of the one in the figure below:

Figure 17 - Define Table

Where respectively each column defines:

• Description, the description of the alarm;
• Status, an identification number used to codify the event;
• Color, the color to show on the gantt widget for the event frame;

Figure 18 – Status color table

Then on the Color Table inside the PI Vision configuration panel of the widget it is necessary to select:

• The table name to look up on the AF database;
• Where to look for the identification code in the event frame;
• The name of the column where the identification codes are stored in the table;
• The name of the column that indicates the color to show on the widget.

From Attribute

If the From Attributes option is selected a new field will appear: Color Attribute.
Inside the Color Attribute field it is possible to insert the name of an attribute(configured inside the Event Frame Templates) that will contain the color for the event frame.

Figure 19 – Name of Color Attribute

Tooltip Settings

In this case, you can set the information to be displayed in the Tooltip. This section is divided into three parts: Attributes to show; Property and External Property. In the first, it is possible to activate or deactivate the view of the attributes. In the second, all the information present in the EWEventFrame object definition is reported. In the third one the information contained in the External Property, defined in AF. In both cases it is possible to specify whether to show it or not in the tooltip and the possible label, different from the default one.

Figure 20 - Tooltip settings section

Property	Note
Id	Indicates the event id
Name	Name of the event frame
Path	Path of the event frame
Template	Event frame template
Desc	Description of the event frame
Start and End	Start and end time of the event frame in readable format
ExtProp	They represent the Extended Property defined in the event frame

Table 4 - Tooltip settings section parameters

Widget colors

It is possible to customize widget colours in terms of:

• Title;
• Text;
• Background;
• Open event frame;
• Closed event frame;
• Column text;
• Timeline text;
• Tooltip text;
• Tooltip back.

Figure 21 - Color customization

To configure the desired color, simply select the drop-down menu; the color preview, the RGB codes and, in the second horizontal scrollbar, the color transparency level are displayed.

Figure 22 - Color selection

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 23 - Contacts

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 5 - 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 files in the folder ..\PIPC\PIVision\Scripts\app\editor\symbols\ext:

• sym-TQSGanttSA.js;
• sym-TQSGanttSA-config.html;
• sym-TQSGanttSA-template.html;

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

• Images that contains the control icon:
  • TQSGanttSA.png;
  • Loading.gif
• Libs with the libraries used:
  • EWClasses.js;
  • GanttLibrary.js;
  • moment.js.

Additional notes for Widget use

The GanttSA can work by receiving certain parameters input, passed through the Tree Event that must be present in the same display.

The widget itself can be used in cooperation with the Alarm Table widget and the Event Tree View widget.

Furthermore, in order to correctly display the widget, it is necessary that the AF elements all have a common attribute at each level of the hierarchy with the name of the event frame template.

It can also be used in Stand Alone mode which does not require the use of the TreeEvent widget.

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.