Skip to main content

Column Chart

- PI Vision Widget -​

Revision History​

Revision No.DateAuthorDocument IDDescription of changes
9.3November 2025RSEW_ColumnChart_v9.3.en.docBug 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.2June 2025RSEW_ColumnChart_v9.2.en.docAdded select REST provider
9.1May 2025RSEW_ColumnChart_v9.1.en.docAdded feature Get Support
9.0March 2025IDEW_ColumnChart_v9.0_en.docCompatibility PI Vision 2024 and introduced new widget style
8.5February 2025MDCEW_ColumnChart_v8.5_en.docLegend style management
8.2September 2024MDCEW_ColumnChart_v8.2_en.docNew attribute comparison mode
8.1August 2024MDCEW_ColumnChart_v8.1_en.docBugFix
8.0August 2023MDCEW_ColumnChart_v8.0_en.docCompatibility PIVision 2023
7.4January 2023MDCEW_ColumnChart_v7.4_en.docBugFix
7.3January 2023MDCEW_ColumnChart_v7.3_en.docAssets management
7.2January 2023MDCEW_ColumnChart_v7.2_en.docBugFix
7.1September 2022MDCEW_ColumnChart_v7.1_en.docEnglish language by default
7.0August 2022AMEW_ColumnChart_v7.0_en.docCompatibility PIVision 2022
6.1April 2022MDCEW_ColumnChart_v6.1_en.docWebAPI management on a different server
6.0October 2021MDCEW_ColumnChart_v6.0­_en.docCompatibility PIVision 2021
4.2November 2020MDCEW_ColumnChart_v4.2­_en.docLicense support
4.1November 2020MDCEW_ColumnChart_v4.1­_en.docBug Fix
4.0October 2020OSEW_ColumnChart_v4.0­_en.docCompatibility PIVision 2020
2.0.1August 2020VSEW_ColumnChart_v2.0.1­_en.docReview
2.0March 2019GIEW_ColumnChart_v2.0.docManual Revision
1.2October 2018GTEW_ColumnChart_v.1.2.docDocument restyle
1.1.1February 2018GTTQS_ColumnChart_v.1.1.1.docxAdded management of Bad Statuses
1.1January 2018PCTQS_ColumnChart_v.1.1.docxReview and update of some configuration parameters
1.0September 2017GTTQS_ColumnChart_v.1.0.docxFirst review

Document References​

DocumentDescription
PI Vision Installation and Administration GuidePI 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.

TermDefinition

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​
DimensionNotePossible setting
ThresholdThis variable defines the threshold type Fixed/ Attribute
Threshold attributeIf 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 thicknessIn pixels it is the size of the line that indicates the threshold of the data displayedNumeric, e.g. 3
Threshold line styleThe line can be continuous, dashed, dottedSelection from the combobox
Date formatFormatting timestamps on the horizontal axise.g. DD/MM HH:mm
Unit of measurementUnit of measurement on the vertical axis; if not expressed, the one present in the attribute configuration is indicatede.g. m3/h
Show LegendFlag that enables or disables the display of the legend (color and element).
Legend DistanceDistance of the legend from the chartNumeric, e.g 80
Legend FormatThe Legend can be written in three different modes: Element and Attribute, Attribute or ElementSelection 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​

Appearance Settings​

In the Appearance Settings section is possible to set the following parameters:

Figure 8 - Appearance Settings section​
DimensionNotePossible setting
TitleA string representing the widget titleString, e.g. “Column Chart”
Title Color
Axis label
Tooltip
Tooltip contourIn pixel the size of the text outline of the tooltipNumeric, e.g. 1
Average line thicknessIn pixels is the line size that indicates the average of the data displayedNumeric, e.g. 1
Average line styleThe line can be continuous, dashed, dotted.Selection from the combobox
Value below threshold thicknessIn pixels it is the outline size of the single bar line whose values ​​are below the threshold.Numeric, e.g. 2
RL line thicknessIn pixels is the line size that indicates the linear regression of the displayed dataNumeric, e.g. 1
RL line styleThe line can be continuous, dashed, dottedSelection from the combobox
Table 2 - Appearance Settings​

Modality​

In the Modality section is possible to set the following parameters:

Figure 9 - Modality section​
DimensionNotePossible setting
ModeTwo different modes of comparison:Attributes comparison, Element comparisonSelection from the combobox
Sampling interval (s)Expressed in 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 10 - Other section​
DimensionNotePossible setting
Server WebAPIIt is possible to specify the WebAPI server if it is different from the PIVision server.e.g. 192.168.21
Min opacityExpressed as a percentage it indicates the opacity of the color of the bar in the graphe.g. 50
Max opacityExpressed in percentage it indicates the opacity of the color of the bar in the graph when it is highlighted by the passage of the mousee.g. 100
Y label nameIt is possible to set the name of the y-axis
Number of decimalsIt is possible to indicate the number of decimals to be displayed in the widgetse.g. 2
TitleExpressed in pixels, it indicates the size of the title.e.g. 14
Axis labelExpressed 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 11 - 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 12 - 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 13 - Widget colors customization​

In order to configure the color it is enough to select the color drop-down menu; the color preview, the RGB codes and, in the second horizontal scrollbar, the color transparency level are displayed. Confirm with the button .

Figure 14 - Color choice​

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 15 - Contacts​

Installation​

Following are the installation requirements and procedure.

Requirements​

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

SoftwareVersionNote
PI Vision2024 (*)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 file 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-TQSColumnChart.js
  • sym-TQSColumnChart-config.html
  • sym-TQSColumnChart-template.html

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

  • Images which involves the control icon:
    • TQSColumnChart.png
  • Libs which involves the used libraries*:*
  • EWClasses.js
  • moment.js
  • d3.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.