Skip to main content

Stacked Chart

- PI Vision Widget -​

Revision History​

Revision No.DateAuthorDocument IDDescription of changes
9.4June 2025RSEW Stacked Chart v9.4.en.docBugFix
9.3June 2025RSEW Stacked Chart v9.3.en.docAdded select REST provider
9.2May 2025RSEW Stacked Chart v9.2.en.docAdded plot granularity
9.1May 2025RSEW Stacked Chart v9.1.en.docAdded feature Get Support
9.0March 2025IDEW Stacked Chart v9.0.en.docCompatibility PI Vision 2024 and introduced new widget style
8.1September 2023MDCEW Stacked Chart v8.1.en.docCursor label name changed
8.0August 2023AMEW Stacked Chart v8.0.en.docCompatibility PI Vision 2023
7.1January 2023MDCEW Stacked Chart v7.1.en.docAdded different webapi server management and asset managemen
7.0August 2022AMEW Stacked Chart v7.0.en.docCompatibility PI Vision 2022
6.0October 2021MDCEW Stacked Chart v6.0.en.docCompatibility PI Vision 2021
4.5July 2021MDCEW Stacked Chart v4.5.en.docBugFix
4.4June 2021MDCEW Stacked Chart v4.4.en.docSpecial characters management
4.3March 2021MDCEW Stacked Chart v4.3.en.docBugFix PIVision 2020
4.2January 2021MDCEW Stacked Chart v4.2.en.doc1) Possibility to modify: - update interval - size, position and number of decimals of the tooltip. 2) Management of the opening of the ad hoc trend like the standard double click. 3) Elements order from configuration. 4) Management of the expiration date. 5) Error handling in PIVision console for expiration date and wrong domain
4.1December 2020MDCEW Stacked Chart v4.1.en.docBugFix
4.0December 2020OSEW Stacked Chart v4.0.en.docCompatibility PIVision 2020
1.8August 2020OSEW Stacked Chart v1.8.en.docRestyle and modification
1.5August 2019PCEW Stacked Chart v1.5.en.docFrench language support
1.4August 2019PCEW Stacked Chart v1.4.en.docBugFix
1.3August 2019PCEW Stacked Chart v1.3.en.docIntroducing Interpolation
1.2August 2019PCEW Stacked Chart v1.2.en.docHandle null values
1.1August 2019PCEW Stacked Chart v1.1.en.docIntroducing Zoom
1.0August 2019PCEW Stacked Chart v1.1.en.docFirst release documentation and specifications

Document References​

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

Introduction​

The StackedChart widget for PI Vision displays a chart that shows how individual components make up a total value.

Figure 1 - Stacked Chart​

The PI Vision developed by AVEVA is available since 2017 and it allows viewing real-time data in a web environment calling it from the PI Data Archive and data organized in assets from the AVEVA Asset framework (PI-AF).

Simply go to https: // webserver / PIVision (Indicating the address the correct name of the webserver machine) to access the IP Vision pages.

They are supported on the latest versions of most HTML5 compatible browser on computers, tablets, and phones with Android and iOS operating systems.

The configuration of the elements in PI Vision is intuitive and provides a simple drag of the control and release area of ​​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 StackedChart widget, the corresponding icon must be selected. Navigate in the asset display to find the element containing attributes to plot. To proceed, drag it to the display area. The whole element must be dragged on the display.

Figure 2 - PI Vision Menu​

By releasing the mouse button, the display widget is ready to be configured.
Later, by recalling the context menu with the right mouse button, customizations and configurations are possible.

Figure 3 - Context Menu​

Functionality and use​

After inserting and configuring the widget, it is ready to be used.

On the right side the legend is shown. Moving the mouse pointer over a label, the corresponding area will be highlighted.

As shown in Figure 4, it is possible to zoom in an area by drawing it with the mouse pointer. To return to the initial display, simply double click.

Figure 4 - Zoom​

By clicking on the graph it is possible to view a tooltip containing the values ​​of the measures represented and their timestamp.

Figure 5 - Tooltip​

Customization and configuration​

The widget configuration allows to change the look in terms of color, text size, and display language.

Language​

The Language section allows choosing the language in which the display labels and configuration parameters appears.

Figure 6 - Language selection​

Configurations​

Figure 7 - Configurations​

In the Configuration sections is possible to indicate:

  • Whether to use the PIWebAPI (required for PIVision 2020);
  • The date format;
  • Grid opacity;
  • Data interpolation;
  • Position of the label in the cursor;
  • Number of decimals of the values ​​present in the tooltip;
  • The minimum time interval between one update provided by PIVision and the next.
  • Plot Granularity: allows the user to change the plot granularity. The higher the value the more detailed the plot will be. Keep in mind that with really big numbers the plot will take some time to generate.
  • Show adHoc trend button.
  • Show order from configuration section.
  • Select REST Provider.

REST Provider​

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

Figure 8 - REST Provider selection​

Show Ad Hoc Trend button​

By checking this configuration, a button will appear on the display useful for opening the Ad Hoc trend. All the attributes of the asset dragged to the display will be plotted in the Ad Hoc trend (Figure 9, Figure 10)

Figure 9 - Ad hoc trend button​

Figure 10 - Ad hoc trend​

Order from configuration​

By checking this configuration, user can define the order of the attributes in the graph using the arrows.

Press the button to return to the default order.

Figure 11 - Order from configuration​

Figure 12 - Changed order​

Text Size​

Is possible to personalize text sizes and the tooltip size.

Figure 13 - Text Sizes​

Widget colors​

Widget colors could be customized in relation to:

  • Graph Background
  • Text
  • Axes
  • Axes labels

As shown in the table below.

Figure 14 - Widget color customization​

To configure the color 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 15 - 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 16 - Contacts​

Installation​

The following are the necessary prerequisites and the installation procedure.

Prerequisites​

The following table shows the minimum requirements for installing this product:

SoftwareVersionNote
PI Vision2024(*)Requirements are related to the correct functioning of the PI Vision
(*) This widget is also compatible with PI Vision 2023, 2022, 2021, 2020 and 2019.
Table 1 - Installation prerequisites​

We suggest using Google Chrome for full compatibility with the widget.

Installation procedure​

The installation procedure includes a copy of the folders and files in the default path of the PI Vision.

In particular, it is necessary to copy the following files in the folder ... \ PIPC \ PIVision \ Scripts \ app \ editor \ symbols \ ext:

  • sym-EWStackedChart.js
  • sym-EWStackedChart-config.html
  • sym-EWStackedChart-template.html

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

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

Additional notes for the use of the product​

For the proper functioning of the widget it is necessary to configure the AF model as shown in Figure 18.


Figure 17 - AF model description​

The element has to contain attributes associated with Tags to monitor. Each ones must have the following sub-attributes:

  • Active (Boolean attribute): true if attribute has to be represented in the graph
  • ColorArea (String attribute): the fill color of the area representing the attribute;
  • ColorLine (String attribute): color of the line enclosing the area in the graph;
  • Label (String attribute): the label of the attribute, shown in legend;
  • LineStyle (String attribute): indicates the style of the line enclosing the area:
    • 0: linear;
    • 1: dotted line;
    • 2: dashed line;
  • LineWeight (Double attribute): thickness of the line enclosing the area;
  • Order (Int attribute): visualization order of the attribute in the graph.

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.