Skip to main content

Pie Chart

- PI Vision Widget -​

Revision History​

Revision No.DateAuthorDocument IDDescription of changes
10.0January 2026RSEW_PieChart_v.10.0Compatibility PIVision 2025, changed configOptions function functionality and changed colors selection visuals.
9.2June 2025RSEW_PieChart_v.9.2_en.docxAdded select REST provider
9.1May 2025RSEW_PieChart_v.9.1_en.docxAdded feature Get Support
8.4February 2024MDCEW_PieChart_v.8.4_en.docxBugFix
8.3January 2024MDCEW_PieChart_v.8.3_en.docxBugFix
8.2October 2023MDCEW_PieChart_v.8.2_en.docxBugFix
8.1August 2023MDCEW_PieChart_v.8.1_en.docxBugFix
8.0August 2023FMEW_PieChart_v.8.0_en.docxCompatibility PIVision 2023
7.1January 2023MDCEW_PieChart_v.7.1_en.docxAdded ability to convert the widget into a collection
7.0August 2022AMEW_PieChart_v.7.0_en.docxCompatibility PIVision 2022
6.1January 2022MDCEW_PieChart_v.6.1_en.docxNew feature to switch asset
6.0October 2021MDCEW_PieChart_v.6.0_en.docxCompatibility PIVision 2021
4.0December 2020MDCEW_PieChart_v.4.0_en.docxFirst release documentation and specifications

Document References​

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

Introduction​

PieChart widget for PI Vision allows the visualization of data in a pie chart as shown in Figure 1. The widget
automatically calculates the percentage of each attribute shown in the chart.

Figure 1 – Pie 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 Asset AVEVA platform 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 PieChart widget, the corresponding icon must be selected. Navigate in the asset to find the element
containing attributes to plot. To proceed, drag the attributes to the display area.

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​

Hovering with the mouse on a section of the diagram, the tooltip containing the attribute name and current value appears (Figure 4).

Figure 4 - Widget​

By clicking on a section of the diagram it is possible to detach it from the rest of the graph (Figure 5).

Customization and Configuration​

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

International​

The Language section allows you to choose the language in which to display labels and configuration parameters.

Figure 5 - Language selection​

REST Provider​

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

Figure 6 - REST Provider selection​

Appearance settings​

In the Settings section, you can customize the chart in terms of chart type, text size and colors:
User can customize the following colors:

  • Background
  • Legend
  • Title
  • Percentage
  • Tooltip background
  • Tooltip

Figure 7 - Appearance settings​

Colors Selection​

To select a color click on the color’s dropdown menu. The Gradient panel will open. From this panel the user can select which color, transparency or color format he wants. A second panel named Palette view is present if the user wants to select from a few pre-determined colors. Confirm with the button .

Figure 8 - Choice of color​

Graph Type​

Allows to select the chart type: Pie Chart or Donut Chart (Figure 8)

Figure 9 - Donut Graph​

Legend​

Allows the user to choose what to display in the legend: Label or Description (Description of the tag shown in the Segment Settings section).

Figure 10 - Tags with description​

Segment Settings​

In the Segment Settings section you can change the color of the diagram sections (if no color is selected, the default colors are used).
If the attribute is linked to a tag, the description is also shown.

Figure 11 - Attributes Settings​

Update interval​

Widget update interval (seconds):

Figure 12 – Update interval​

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​

Requirements​

In order to install the product, minimum requirements are listed in the table below:

SoftwareVersionNote
PI Vision2025 (*)Requirements are linked to the PI Vision correct functioning
Table 1 - Installation prerequisites​

(*)This widget is also compatible with PI Vision 2024, 2023, 2022, 2021, 2020 and 2019.

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

Installation procedure​

Widget Installer​

To install the widget’s files and common libraries using the widget installer follow the guide at this link:
https://documentation.e-matica.com/docs/WidgetInstaller.

Manual installation​

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

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

  • Images that contains the control icon:
    • EWPieChart.png
  • Libs with the libraries used:
    • EWClasses.js;
    • d3.v4.7.2.pie.js

Then, open the web.config file inside the PIVision folder

...\PIPC\PIVision

and check that debug is set to "true" (Figure 14).

Figure 14 - web.config​

Save the file and restart the IIS

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.