Column Chart
- PI Vision Widget -
Revision History
| Revision No. | Date | Author | Document ID | Description of changes |
|---|---|---|---|---|
| 10.1 | April 2026 | RS | EW_ColumnChart_v10.1 | Added Multistate section in configuration. Added the option to see values below zero in configuration. |
| 10.0 | January 2026 | RS | EW_ColumnChart_v10.0 | Compatibility PIVision 2025, changed configOptions function functionality and changed colors selection visuals. |
| 9.3 | November 2025 | RS | EW_ColumnChart_v9.3.en.doc | Bug Fixing: (attribute comparison mode) Switching asset from Pi Vision correctly sets the colors for the attributes (element comparison mode) Switching asset from Pi Vision does not cancel the element anymore. |
| 9.2 | June 2025 | RS | EW_ColumnChart_v9.2.en.doc | Added select REST provider. |
| 9.1 | May 2025 | RS | EW_ColumnChart_v9.1.en.doc | Added feature Get Support. |
| 9.0 | March 2025 | ID | EW_ColumnChart_v9.0_en.doc | Compatibility PI Vision 2024 and introduced new widget style. |
| 8.5 | February 2025 | MDC | EW_ColumnChart_v8.5_en.doc | Legend style management |
| 8.2 | September 2024 | MDC | EW_ColumnChart_v8.2_en.doc | New attribute comparison mode |
| 8.1 | August 2024 | MDC | EW_ColumnChart_v8.1_en.doc | BugFix |
| 8.0 | August 2023 | MDC | EW_ColumnChart_v8.0_en.doc | Compatibility PIVision 2023 |
| 7.4 | January 2023 | MDC | EW_ColumnChart_v7.4_en.doc | BugFix |
| 7.3 | January 2023 | MDC | EW_ColumnChart_v7.3_en.doc | Assets management |
| 7.2 | January 2023 | MDC | EW_ColumnChart_v7.2_en.doc | BugFix |
| 7.1 | September 2022 | MDC | EW_ColumnChart_v7.1_en.doc | English language by default |
| 7.0 | August 2022 | AM | EW_ColumnChart_v7.0_en.doc | Compatibility PIVision 2022 |
| 6.1 | April 2022 | MDC | EW_ColumnChart_v6.1_en.doc | WebAPI management on a different server |
| 6.0 | October 2021 | MDC | EW_ColumnChart_v6.0_en.doc | Compatibility PIVision 2021 |
| 4.2 | November 2020 | MDC | EW_ColumnChart_v4.2_en.doc | License support |
| 4.1 | November 2020 | MDC | EW_ColumnChart_v4.1_en.doc | Bug Fix |
| 4.0 | October 2020 | OS | EW_ColumnChart_v4.0_en.doc | Compatibility PIVision 2020 |
| 2.0.1 | August 2020 | VS | EW_ColumnChart_v2.0.1_en.doc | Review |
| 2.0 | March 2019 | GI | EW_ColumnChart_v2.0.doc | Manual Revision |
| 1.2 | October 2018 | GT | EW_ColumnChart_v.1.2.doc | Document restyle |
| 1.1.1 | February 2018 | GT | TQS_ColumnChart_v.1.1.1.docx | Added management of Bad Statuses |
| 1.1 | January 2018 | PC | TQS_ColumnChart_v.1.1.docx | Review and update of some configuration parameters |
| 1.0 | September 2017 | GT | TQS_ColumnChart_v.1.0.docx | First review |
Document References
| Document | Description |
|---|---|
| PI Vision Installation and Administration Guide | PI Vision™ user manual from AVEVA |
Introduction
The PI Vision Column Chart widget allows the visualization of the data by histogram chart and additional data lines (average, threshold and linear regression).
Figure 1 - Column Chart
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
The EW_ColumnChart Widget allows the visualization of the data through a bar chart. To view the widget select the corresponding icon and drag the elements onto the display.
Figure 2 - PI Vision Menu
When the mouse is released, an empty rectangle is placed on the display with the standard Column Chart title and from here it is possible to proceed to the subsequent configurations and customizations by recalling the dedicated contextual menu with the right mouse button. To add new elements, you need to select them with CTRL or add them individually to the rectangle.
Figure 3 - Contextual Menu
Functionality and use
The widget allows visualization on the graph of the punctual data at regular and configurable time intervals. The time axis corresponds to the display range.
Are present:
- The graph;
- The legend;
- Any lines (threshold, linear and average regression) that facilitate the interpretation of the graph.
Figure 4 - PI Vision Page
Moving the mouse on one of the bars the tooltip with the details of the data (value and timestamp) is displayed. At the same time, all the relative bars of the same variable and the legend block are highlighted.
In the event that the data is not available because at that time it is in BAD the widget searches and displays the good value immediately preceding it.
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 5 - Language choice
All the settings that are modified are updated real-time unless the heading of the section is indicated with an asterisk; in this case it is necessary to save the display with the new settings and reload the PI Vision page.
Configuration
In the Configuration section is possible to set the following parameters:
Figure 6 - Configuration section
| Dimension | Note | Possible setting |
|---|---|---|
| Show values below zero | If the checkbox is set to true then the plot will also show the columns that have a negative value. | True or false. |
| Threshold | This variable defines the threshold type. | Fixed/Attribute. |
| Threshold attribute | If the Threshold field is set to From attribute, the following field will appear. From here it is possible to select the attribute from which the widget will retrieve the threshold values to be set. | |
| Threshold line thickness | In pixels it is the size of the line that indicates the threshold of the data displayed | Numeric, e.g. 3 |
| Threshold line style | The line can be continuous, dashed, dotted | Selection from the combobox |
| Date format | Formatting timestamps on the horizontal axis | e.g. DD/MM HH:mm |
| Unit of measurement | Unit of measurement on the vertical axis; if not expressed, the one present in the attribute configuration is indicated | e.g. m3/h |
| Show Legend | Flag that enables or disables the display of the legend (color and element). | |
| Legend Distance | Distance of the legend from the chart | Numeric, e.g 80 |
| Legend Format | The Legend can be written in three different modes: Element and Attribute, Attribute or Element | Selection from the combox |
Table 1 - Configuration
REST Provider
Allows the user to select between default or custom protocol for api requests.
Figure 7 - REST Provider selection
Multi State Configuration
In the Multi state configuration section the colors of the columns of the attributes are indicated according to the set values, to have useful visual feedback about the trends of the object under study.
Figure 8 – Value/Color settings
Keep in mind that the order of the values is important and the multistate, as shown above, should be read like this:
Any value between 0 and 50 will color the column black;
between 50 and 100 will color the column yellow;
between 100 and 200 will color the column green;
between 200 and 300 will color the column blue
and every value above 300 will color the column red.
Both values and colors are customizable, allowing users to add, update, or remove entries.
It is important to notice that, if the multistate is configured, the colors of the attributes will be overwritten by the colors set in the multistate.
Figure 9 - Example of column chart with multistate configured
Appearance Settings
In the Appearance Settings section is possible to set the following parameters:
Figure 10 - Appearance Settings section
| Dimension | Note | Possible setting |
|---|---|---|
| Title | A string representing the widget title | String, e.g. “Column Chart” |
| Title Color | ||
| Axis label | ||
| Tooltip | ||
| Tooltip contour | In pixel the size of the text outline of the tooltip | Numeric, e.g. 1 |
| Average line thickness | In pixels is the line size that indicates the average of the data displayed | Numeric, e.g. 1 |
| Average line style | The line can be continuous, dashed, dotted. | Selection from the combobox |
| Value below threshold thickness | In pixels it is the outline size of the single bar line whose values are below the threshold. | Numeric, e.g. 2 |
| RL line thickness | In pixels is the line size that indicates the linear regression of the displayed data | Numeric, e.g. 1 |
| RL line style | The line can be continuous, dashed, dotted | Selection from the combobox |
Table 2 - Appearance Settings
Modality
In the Modality section is possible to set the following parameters:
Figure 11 - Modality section
| Dimension | Note | Possible setting |
|---|---|---|
| Mode | Two different modes of comparison:Attributes comparison, Element comparison | Selection from the combobox |
| Sampling interval (s) | Expressed in the number of seconds; identifies the interval between the samples. | e.g. 3600 |
| Update interval (s) | Chart update time. Any changes in configuration and data are displayed at least with this delay (the time between changes is subject to the data update time in the PI). In a regime condition, it is advisable to set this value to 1. | e.g. 60 |
Table 3 - Modality
Other
In the Other section is possible to set the following parameters:
Figure 12 - Other section
| Dimension | Note | Possible setting |
|---|---|---|
| Server WebAPI | It is possible to specify the WebAPI server if it is different from the PIVision server. | e.g. 192.168.21 |
| Min opacity | Expressed as a percentage it indicates the opacity of the color of the bar in the graph | e.g. 50 |
| Max opacity | Expressed in percentage it indicates the opacity of the color of the bar in the graph when it is highlighted by the passage of the mouse | e.g. 100 |
| Y label name | It is possible to set the name of the y-axis | |
| Number of decimals | It is possible to indicate the number of decimals to be displayed in the widgets | e.g. 2 |
| Title | Expressed in pixels, it indicates the size of the title. | e.g. 14 |
| Axis label | Expressed in pixels, it indicates the size of the axis label. | e.g. 8 |
Table 4 - Other
Attribute to show
In the Attribute to show section it is possible to select which attributes to show in the trend. If the flag is active, the attribute is shown in the trend. The arrows allow you to move the attribute up or down in the list. The highest attribute is the one that is shown furthest to the right in the graph. If the widget is used in a data collection, it will be able to replicate the trend for each element within the collection by fetching the data that is present for each individual element on the attributes defined in the configuration.
Figure 13 - Attribute to show section
Assets
List of attributes dragged into the display to create the widget.
If there are more than one, it is possible to delete an asset by clicking on the symbol 
Figure 14 - Asset section
Widget colors
It is possible to customize the widget colours in terms of:
- Threshold line
- Axis
- Tooltip
- Tooltip stroke
- Under threshold value
- Background
- Text
Figure 15 - Widget colors customization
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 16 - 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 17 - 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 | 2025 (*) | Requirements are linked to the PI Vision correct functioning |
Table 5 - 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 involves copying various folders and files into the predefined PI Vision path.
In particular, copy the following files to:
..\PIPC\PIVision\Scripts\app\editor\symbols\ext
- sym-TQSColumnChart.js
- sym-TQSColumnChart-config.html
- sym-TQSColumnChart-template.html
Then, in the folder:
..\PIPC\PIVision\Public
copy the following folders:
- Images which includes the control icon:
TQSColumnChart.png
- Libs which includes the libraries:
EWClasses.jsmoment.jsd3.v4.min.js
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.