Pie Chart

About 3 min

The Pie Chart component presents data as a percentage or proportion of the entire data set, indicating how much each part contributes to the whole.

Supported data types

The following table outlines the supported data types by the Pie Chart component:

Channel Type	Supported?
Tag	🟢
Asset (Attributes)	🟢
Timeframe (Attributes)	🟢
Tag Search	⚫
Asset Search	⚫
Timeframe Search	⚫

Quick Start

To quickly start using the Pie Chart component, drag and drop it onto the work area. Search for the data you want to visualize and map it onto the component:

Property Name	Description
Grid Color	Color of the grid
Grid Size	Size of the grid step
Snap to Grid	Enable/Disable snapping to the grid
Show Grid Lines	Show the grid as lines
Show Grid Dots	Show the grid as dots

Property Name	Description
Reference Point Color	Sets the color of the reference point (see Rotation and Position for more details)
Anchor Points Color	Sets the color of the rest of the seven anchor points
Point Options Color	Sets the color of the point options (only for Line and Bezier Curve)
Show Point Options	Show/Hide the point options

Property Name	Description
Active Border Fill	Sets the fill color of the border
Active Border Width	Sets the width of the border

Every component has a unique variable name. This variable name can be used to reference the component in multi-state configurations and other scripts.
On creation, every component is given a default name. This can be overwritten to be more user-friendly. To do so simply overwrite the value in the variable input field.

Arrange / Remove

Send Backward - move object one layer down
Bring Forward - move object one layer up
Send to Back - place object under all layers
Bring to Front - place object above all layers
To send/bring objects to the front/back use the first four buttons.
Any set of components can be deleted by either using the button or delete/del keyboard keys.

Rotation and Position

Reference Anchor Point - allows you to select one of the anchor points as a reference so that you can set an Angle (clockwise) of incline relative to this point. By default the reference anchor point is the top left corner. You can also rotate the component by dragging one of the yellow corner points.
You can set the position of the component by setting the X and Y coordinates relative to theReference Anchor Point and the top-left corner of the work area.
You can drag any of the anchor points to change the width and height of the component, or you can set it manually by editing the Width and Height boxes.
Set Lock Aspect Ratio so that while changing width and height, the component width to height ratio stays the same
Transform allows you to view the component as a mirror or a reflection of itself

Actions

Actions or multi-states are programmable conditional states handled by user-generated code.

Note

Actions that have script handlers are marked with a circle
OnData
in the top right corner.

The currently supported actions are described in the table below:

Action	Trigger
OnCreate	When the component is created
OnFocus	When the component is selected
onClick	When the component is clicked or the selection is changed
onData	Each time the data changes for assigned channels
onTick	20 times per second
onDblClick	On mouse double click
onHover	When the mouse is over the component (and not when the mouse is not)

Property Name	Description
Show Title	Show/hide the title line
Height	Height of the title line
Text	Text itself
Background Color	Background color of the title line
Text Color	Text color of the title line
Text Align	Alignment of the text within the title line: Left, Center, Right

Properties

Using the Attribute Mapping Dialog you can add attributes to the current mapping and change their properties:

Attribute Mapping Dialog

Add attributes to the current mapping one by one with the Add button or all at once with the Add All button
To hide an attribute click on Toggle Visibility
To access to Attributes properties click on Properties
To save the attribute mapping (without adding the current channel) press Train Only
To save the attribute mapping and add the current channel press Train and Add
To exit the screen without saving your changes, press Close

Global Time Control

To activate the Global Time Control panel click on Global Time Control Settings button in the upper area of the View:

Additionally, you can configure the Global Time Control option in Settings for every component on the current display.

Use Component as Global Time Control : if enabled, the component is able to set the time context for all components on the current display.
Ignore Global Time Control : when enabled, the option allows the component to function independent of global time set elsewhere.

The example below demonstrates the usage of the Global Time Control panel and how the value changes in the space of an hour:

Channels

The Channels section lists data that is assigned/mapped onto the component.
In this menu, you can change the data value color, adjust the display properties and un-assign or remove the data from the component.

Properties

The properties menu for Channels allows you:

to modify the Label of the DataSource
to set UOM, lower and upper values
to choose number format and displayed digits
to adjust the line formatting for trend line components
to configure the additional regression lines that can be plotted for supported components

Supported Multi-State Parameters

Each of the the visual parameters listed below can be used as a multi-state, i.e. used in actions and scripts:

Title and Text
- Text
Rotation and Position
- Rotation
Common
- Blink
- Hidden
Title
- Show Title
- Title Padding
- Title Height
- Title Text
- Title Background Color
- Title Color
- Title Text Align
Visual Properties
- Border Color
- Border Width
- Border Radius
- Background Color
- Delta Up Color
- Delta Down Color
- Label Color
- Timestamp Color
- Value Color
- UOM Color
Font
- Title Font Family
- Title Font Size
- Title Font Italic
- Title Font Bold
- Title Font Underline
- Legend Property
- Legend Font Family
- Legend Font Size
- Legend Italic
- Legend Bold
- Legend Underline
Format
- Legend Position
- Legend H-Align
- Legend V-Align
- Legend H-Padding
- Legend V-Padding
- Label Source
- Custom Label
- Custom UOM
- Number Format
- Inner radius
- Transpose
Global Time Control
- ignored

Pie Chart Settings

Visual Properties

The Visual Properties section provides options for customizing the component's appearance by changing the color schema.

Border Color: Defines the component's border color
Border Width: Adjusts the thickness of the border frame. Default: 0 - invisible border
Border Radius: Defines the curvature of the component’s corners
Background Color: Defines the component's background color
Value Delta Up: Defines the color of the delta triangle when the trend is going up
Value Delta Down: Defines the color of the delta triangle when the trend is going down

Delta

The delta triangle represents the following trends:

Up : Indicates the current value is higher than the previous value
Down : Indicates the current value is lower than the previous value

If there has been no change in the value since the last update, the delta triangle will not be displayed.

To pick color of your interest

To change color for specific visual property, click on the color box next to property description. The color picker dialog will be displayed.

Pick the color of interest. The video below shows how to choose a solid, gradient or theme color.

You can add Gradient Stops by double clicking and to remove - by pulling it up.

To close the color-picker dialog - click on the property color box (Step 1).

Closing color-picker dialog

Clicking on the workspace area instead of Settings Tab area -
component settings will disappear since component focus will be lost.

The Tooltip Setting provides data reference for PI AF attributes and descriptive statistics when user interacts with a component by hovering over it.

Show Current Value : Shows Current Value
Show Archive Values : Shows Archive Values, the number can be set in Number Values
Show Summaries : Shows Summaries for set Time Range Interval (can be set in seconds (s), minutes (m), hours (h), days (d), weeks (w), months (mo), years (y))

Summary Types :

Average : the average value in the set period
Minimum: the minimum value in the set period
Maximum: the maximum value in the set period
PercentGood: the percent good value in the set period
StdDeviation: The standard deviation of the value in the set period
PStdDeviation: The percent standard deviation of the value in the set period
Total: The sum of the values in the set period
Count: The number of data points in the set period
Range: The difference between the largest and smallest value in the set period

Legend Colors

The Legend Colors section defines colors for:

Value
Label
Timestamp
Unit of Measure (UOM)

Tip

By default, the legend colors are transparent and show the assigned channel color. To revert back to this setting, simply choose the transparent option. To configure the channel colors, refer to the Channel section in Generic Settings.

The Toggle Synchronization button allows you to synchronize all the component properties to a desired color.

When the Toggle Synchronization button is disabled in Legend Colors, you can change the color of each property one by one.

If you want all the legend properties to have the same color, enable the synchronization mode
by clicking on the Toggle Synchronization button. In this mode, a change to any legend property color will automatically adjust all other
legend properties to the same color.

Note

The Legend Colors section is common among many components, so it is described using general visual examples, which may differ slightly from one component to another. However, the logic and behavior stays the same.

Font

The Font section provides options for customizing the legend font properties.

Font Properties

Font properties available for edit:

Font Family : Allows to select different font family. Default: Arial
Font Size : Controls the font size. Default: 12
Italic : Sets font to italic
Bold : Sets font to bold
Underline : Sets font to underline

Font Legend

The Legend section allows to change font properties for selected Legend Property: Value, Label, Timestamp or UOM.

Info

The Font Legend section is common among many components, so it is described generally and may differ slightly from component to component.

When Toggle Synchronization button is disabled, you can change the properties of the legend individually.

Or enable Toggle Synchronization to synchronize all the properties with the one currently selected in Legend Property field.

Format

The Format section provides options for customizing displayed information.

Inner Radius

The Inner Radius setting modifies the size of the pie chart's central hole.

By default, the pie chart does not display an inner radius hole (Inner Radius = 0). However, you can customize the radius to create a central hole that is either half- or quarter-sized:

Legend Position

The Position drop-down menu allows to set the placement of the legend in relation to the component: top, bottom, left, right, center.

Legend Layout

The legend arranger allows you to change the legend's layout for: Value, Label, Timestamp, UOM and Delta.
To display a property, drag it to the desired location within the grid. Once placed, you can align the property both vertically and horizontally using the controls underneath the grid.

Info

If you select the legend position as top, bottom, or center, you can only use the horizontal alignment options. If you select the legend position as right or left, you can only use the vertical alignment options.

H-Padding : defines the horizontal padding
V-Padding : defines the vertical padding

The Transpose check box allows to flip the legend vertically/horizontally.

Legend Data Format

The following options are available for customizing your legend:

Label Source: defines the source for the label
- Name: the label is set to the name of the channel/attribute
- Channel Label: the label comes from channel/attribute mapping if trained
- Path: the label is set to the asset path plus the name of the attribute (works only for assets)
- AssetPath: the label is set to the asset path
- DataReference: works for PI AF data sources. if the channel is an attribute of Pi Point data reference- show the data reference configuration (i.e. pi data archive and tag) in a format \pidataarchive\tagname - the format is specific to pi
- Description : the label is set to the description of the channel/attribute
- Custom : the label is set to the Custom Label field
Path Levels: defines the path level fo the label if Label Source is set to Path or Assetpath
Custom Label allows to set a custom Label
Custom UOM : allows to define custom Units of Measure (UOM)

Number Format

The Number Format allows you to define the numeric representation of the legend's Value property.
IOTA supports custom formats (for more information please click Format: Number Format ). If using a custom format, simply type the desired format in the box under Number Format.

Number Format Examples

Number Format	Displayed Value
General	2376.28
0	2376
0.0	2376.3
0.00	2376.28
0.000	2376.280
#,##0	2,376
#,##0.0	2,376.3
#,##0.00	2,376.28
#,##0.000	2,376.280
(#,##0)	(2,376)
(#,##0.00)	(2,376.28)
0%	237628%
00.0%	237628.0%
Scientific	2.38E+3
Channel	2376.28*
System	2376.28**

* as in the database

** as in the system

Pie Chart

Quick Start

Generic Settings

Grid Properties

Align Controls

Align Objects

Distribute Objects

Anchor Points Options

Locked View Options

Properties

Properties

Pie Chart Settings

Visual Properties

Tooltip

Legend Colors

Font

Font Legend

Format

Inner Radius

Legend Position

Legend Layout

Legend Data Format

Number Format

Examples

Tags

Timeframes