This section discusses how to configure the various type of displays that present data.

Configuring a Circular Panel

Double-click any circular panel object in the display or use the left panel PieChart to configure it. 

Circular Panel configuration 


Field

Description

Control Name

Defines a name for the control so it can be accessed in the CodeBehind script. See Displays Code Behind.

Selected Value

Select an object to represent the selected value

SelectedIndex

Select an object to represent the selected index

ImageSize

Size of the selected image

FontSize

Size of the font used on the component

Columns

For each value that you want to include, select a section and configure the settings to the right of the list (described below). The panel displays a section for each column.

FieldName

Name of the field to be used

Title

Name to be shown on the component

Image

Select a resource image to display

Preview

Read-only display of selected image




Configuring a PieChart

Double-click any PieChart object in the display to configure it. 

Pie Chart configuration 


Field

Description

Control Name

Defines a name for the control so it can be accessed in the CodeBehind script. See Displays Code Behind

ChartType

Select the type of chart: Percent, Angles, or Section

Data Items

For each value that you want to include, select a section and configure the settings to the right of the list (described below). The chart displays a section for each data item.

FieldName

Enter a name for the data item.

LinkedValue

Enter a tag name as the data source for the data item.

Brush

Click to select the color for the data item.


Configuring a BarChart

Double-click any BarChart object in the display to configure it. 

Bar Chart configuration 


Field

Description

Control Name

Defines a name for the control so it can be accessed in the CodeBehind script. See "Displays Code Behind". 

Type

Select the type of chart.

Data Source

Enter the dataset table or query to use for the chart.

Grid Lines

Click to select the color for the grid lines.

Window

Click to select the color for the window background.

Labels

Click to select the color for the labels.

Show Horizontal Labels 45°

Select to angle the labels below each bar at 45°.

Show value over bar

Select to display the bar value above the bar.

Hide all Zero Series

Set the series that has values 0 to be hidden

Show value labels 90°

Select to show the labels on each bar at 90°.

Y Axis Range

Set the range of the Y axis (from and to)

Y Axis Height

Set the Height of the Y axis

Y Axis Labels

Set the quantity of the labels to show on Y axis

Auto Scale Y Axis

Set to make the Y axis auto scalable

Format

Set the format of the Y axis values

Data Items

For each column in the data source that you want to include, select a bar and configure the settings to the right of the list (described below). The chart displays a bar for each row.

FieldTitle

Title to be shown in the display of the current column

FieldValue

Name of the column in the database.

Min.

Enter a tag to define the minimum value.

Max.

Enter a tag to define the maximum value.

Brush

Click to select the color for the data item.


Configuring an Alarm Window

Double-click any Alarm window object in the display to configure it.

Alarm window configuration 


Field

Description

Control Name

Defines a name for the control so it can be accessed in the CodeBehind script. See Displays Code Behind.

MaxLines

Maximum number of lines to display in the window.

List

Select the type of alarms to display in the window:

  • OnlineAlarms—Displays only active alarms. Alarms only display while the alarm is in the alarm state.
  • AlarmHistory—Displays only past alarms.
  • AuditTrail—Displays only the SystemEvents (Edit > Alarms > Groups).
  • AlarmHistory+Events—Displays past alarms and SystemEvents.

Merge Hi and HiHi Lines

Combines alarms configured as Hi and HiHi into a single row.

History Interval/To

Enter the start and end dates for the alarms. The "Alarm window" object execute this query from the database.
In case that this field is empty, the value used will be lowest ActiveTime_Ticks to DateTime.UTCNow.Ticks.

Show Column Titles

Select to display the column titles.

Ack by Page

Enter a tag name, which when triggered, acknowledges the alarms in the alarm window.

Show Header

Enter text to display above the column titles.

AllowSort

Select to let users sort the data by column.

Allow Column Reorder

Select to let users change the order of the columns.

Display value column as string

Set the format of the value column to string

Filter

Enter SQL statement to limit the alarms displayed.

Display Millisecond

Select to include milliseconds in the alarm time.

Ack Selected Line

Configure settings for acknowledging an alarm.

Columns

For each column in the list, select the column and configure the settings to the right of the list (described below).

Visible

Select for the column to display in the alarm window.

Allow Filter

Select to let users filter the column.

Show in Column Chooser

Select to include the column in the column chooser, which lets users select the columns that display.

Title

Enter the text for the column title.

Width

Enter the initial column width, in WPF units (device-independent pixels).

Sort

Select how to initially sort the column.


Configuring the Trend Window 

The drawing tool has two trend objects, the TrendChart and the TrendChartLegacy. The TrendChart is the newest one and should be used by default. The TrendChartLegacy was kept to ensure compatibility with any projects created in a previous release; the iOS displays are using the previous object.

Double-click any Trend window object in the display to configure it. 

Trend window settings 


Field

Description

Control Name

Defines a name for the control so it can be accessed in the CodeBehind script. See Displays Code Behind.

Bind to Tag

Enter with an object property where the Trend configuration will be saved.

Bind Pens to Tag

Enter with an object property where the Pen values will be saved.

Orientation

  • Horizontal.
  • Vertical, top to bottom.
  • Vertical, bottom to top.

Window

Set the trend control background color.

Labels

Set the color of the trend control labels.

Grid Lines

Set the color of the grid lines

Grid Lines Stroke

Set the grid line settings.

Cursor

Enables (selected) or disables (deselected) the cursor settings.

Y Axis

  • Y scale for each pen - Based on the min and max of each pen.
  • Y range - Defines the minimum and maximum values for the Y-axis.
  • The format of the values in the Y-axis. For valid numeric formats, see "Tag Formats". For example, N1 (number with 1 decimal place).
  • Stack Y scales - Check to stack similar Y scales.
  • Merge similar Y Scales - Check to merge the similar Y scales.

X Axis

  • Duration - Define the X-axis time span.
  • XY Chart - Check to define a X axis range
  • Labels - Define the quantity of the horizontal grid lines.
  • The X-axis format is defined by two fields: the first line format and the second line format. This is especially useful to define label marks that require two lines of information. For the valid date and time formats, see Tag Formats. For example, T (Time) for the first line format, d (short date) for the second line format.
  • Navigation Control - Check to make the navigation controls visible

Legend

Defines the position of the legends in the Trend Window.

  • None.
  • Top Left.
  • Top Right.
  • Bottom Left.
  • Right Panel.
  • Bottom Panel.

Pens


Tag

Set the tag that will provide the value for the pen.

Pen Settings

Set the configuration of the Line color, Line stroke, Fill area, and the type of Marker.

MinValue

Linear scale reference for the tag value, according to the Y-axis range.

MaxValue

Linear scale reference for the tag value, according to the Y-axis range.

Auto

Set the value to auto, instead use MinValue and MaxValue

SPCEnable

Enable or disable the SPC settings.

SPCSettings

Click to open the SPC settings.

Show Value Area

Fill the pen area with the specified color

PenLabel

Set the pen name.

Filter level

An integer number that "group" points on XY axis, calculating the average between then.

LimitMinMaxValue

Remove the points less than Tag.Min and greater than Tag.Max.

Square

Fill the pen points with a square wave.


Double-click any Trend window legacy object in the display to configure it. 

Trend window legacy settings 


Field

Description

Control Name

Defines a name for the control so it can be accessed in the CodeBehind script. See Displays Code Behind.

0(online) 1(history)

0 - the control shows the online data.
1 - the control shows the history data. For example: Tag.onLineHist.

OnlineTrigger

The refresh rate of the online trend control. For example, 00:00:01 or {Tag.trendTimeSpan}.

Time Before Now

This config changes the start time of the trend to be a specific time in the past.

HistoryDateTime

The initial point for the history trend control. For example, {Tag.initialTrendHistory}.

Grid Line

Set the color of the Grid lines

Window

Set the trend control background color.

Labels

Set the color of the trend control labels.

Off line Marker

Set the marker when the trend is in offline mode

Cursor Enable

Enables (selected) or disables (deselected) the vertical cursor.

Pens Legend

Defines the position of the pens legend in the trend control.

Y Axis

  • Y scale for each pen - Based on the min and max of each pen.
  • Y range - Defines the minimum and maximum values for the Y-axis.
  • The format of the values in the Y-axis. For valid numeric formats, see "Tag Formats". For example, N1 (number with 1 decimal place).
  • Stack Y scales - Check to stack similar Y scales.
  • Merge similar Y Scales - Check to merge the similar Y scales.

Range

Defines the minimum and maximum values for the Y-axis.

Labels

Defines the quantity of the horizontal grid lines.

Format

The format of the values in the Y-axis. For valid numeric formats, see Tag Formats. For example, N1 (number with 1 decimal place).

X Axis

  • Duration - Define the X-axis time span.
  • XY Chart - Check to define a X axis range
  • Labels - Define the quantity of the horizontal grid lines.
  • The X-axis format is defined by two fields: the first line format and the second line format. This is especially useful to define label marks that require two lines of information. For the valid date and time formats, see Tag Formats. For example, T (Time) for the first line format, d (short date) for the second line format.
  • Navigation Control - Check to make the navigation controls visible

Interval

Defines the X-axis time span.

Labels

Defines the quantity of the horizontal grid lines.

Format

The X-axis format is defined by two fields: the first line format and the second line format. This is especially useful to define label marks that require two lines of information. For valid date and time formats, see Tag Formats. For example, T (Time) for the first line format, d (short date) for the second line format.

Pens


Visible

Shows (1) or hides (0) the selected pen. Ex 1 or {showPen1}.

Tag

Set the tag that will provide the value for the pen.

Min

Linear scale reference for the tag value, according to the Y-axis range.

Max

Linear scale reference for the tag value, according to the Y-axis range.

Pen

Choose the style, the color, and the thickness of the pen line.

CursorValue

Set the tag that will receive the real value of the Y-axis, according to the cursor position. For example: Tag.pen1CursorValue.

FieldName

Set the pen name.

SPC

Check to enable SPC

MouseActions

Check to enable mouse actions on trend

Tooltips

Check to enable tool tip on hover

Allow edit pens/labels

Check to allow the pens and labels to be edited

Y scale for each pen

Y scale for each pen based on the min and max of each pen.

Merge same Y scale

Check to merge the similar Y scales.


Using Y Axis Scaling 

Considering:

Y-axis Min = 0;

Y-axis Max = 100;

The trend control allows many pens to be displayed together. When your pens do not have the same range, you can use the tips below to fit your data in the same chart and for better visualization:

  • If a pen has a lower range, 0 to 1 for example, you can set the max property of the pen to 1. When the real tag value is 1, the value 100 will be displayed in the chart. (100/1 scale).
  • If a pen has a higher range, 0 to 1000 for example, you can set the max property of the pen to 1000. When the real tag value is 1000, the value 100 will be displayed in the chart. (1/10 scale).


Configuring a DataGrid Window

Double-click any DataGrid window object in the display to configure it. 

Data Grid window configuration


Field

Description

Control Name

Defines a name for the control so it can be accessed in the code-behind script. See Displays Code Behind

Data Source

Enter the dataset table or query to use for the window.

SelectedValues

Enter a string tag or array tag to receive the contents of the selected row.

SelectedIndex

Enter a tag to receive the number of the currently selected row. Row numbering starts with 0.

LinesCount

Select a tag to receive the number of lines in the window.

Pause

Set an object to define if the datagrid will be updated or not when the data changes.

Theme

Select the theme for the window.

BindingMode

Select the binding mode. See BindingMode Enum

AllowInsert

Select to let users add rows.

Column Titles

Select to display column titles.

Transpose

Select to transpose columns to rows.

OneClick Edit

Select to edit cells on first click.

Allow Delete

Select to allow the data to be deleted from a grid

AllowSort

Select to let users sort the data by column.

Auto Column

  • Select to have the system automatically include all table or query columns in the window. If selected, you do not have to configure the columns below. To customize specific columns, add the column to the column list and configure the settings to the right (described below).
  • Deselect to manually configure each column that you want to include using the Columns list and settings to the right (described below).

Multiple Selection

Check to make multiple selection possible.

Edit SelectedValues

Check to make it possible to edit multiple selected values.

Show Header

Check to show headers on grid.

Filter

Enter SQL statement to limit the data displayed.

Columns

For each column you want to customize or include manually, add the column and configure the settings to the right of the list (described below).

Visible

Select to allow the column to display in the data grid window.

Editable

Select to let users edit the column.

Show in Column Chooser

Select to include the column in the column chooser, which lets users select the columns to display.

FieldName

Enter a name for the column.

Editor

Select the column data type.

Title

Enter the text for the column header.

Width

Enter the initial column width, in WPF units (device-independent pixels; one WPF = 1/96 inch).

Sort

Select how to initially sort the column.

Alignment

Select to set the horizontal alignment.

  • Left - Align the data to the left side in the column.
  • Right - Align the data to the right side in the column.
  • Center - Align the data to the center in the column.
  • Stretch - This will stretch the column horizontally.


  • No labels