Page Tree
Previous Releases
This section discusses how to configure the various type of displays that present data. Easy Heading Macro headingIndent 40 navigationTitle On this page selector h2,h3 wrapNavigationText true navigationExpandOption disable-expand-collapse
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 |
Table of Contents | ||||
---|---|---|---|---|
|
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. |
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. |
Anchor | ||||
---|---|---|---|---|
|
Double-click any Alarm 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:
|
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. |
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. |
Anchor | ||
---|---|---|
|
|
The drawing tool
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 |
|
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 |
|
X Axis |
|
Legend | Defines the position of the legends in the Trend Window.
|
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. |
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 |
|
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 |
|
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. |
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:
Anchor | ||||||
---|---|---|---|---|---|---|
|
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 |
|
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.
|