This section discusses how to configure the TrendChart componentThe TrendChart is a graphical tool for visualizing data trends. Its purpose is to display and analyze time-series data for process monitoring. Key functionalities include customizable Y and X axes, label and grid line settings, pen configurations, and SPC settings. Applications include monitoring production metrics and quality control. Configuration requires setting control names, binding tags, and defining pen properties. Usage involves selecting trend objects, setting up axes, and configuring visual elements for data display and interaction.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Requirements
This component is Portable. It runs both on Windows (WPF) and on Web Pages hosted in any platform.
Configuration
Go to Displays/Draw, on the Components Panel, click the Charts category, and on TrendChart to select it. Then, click or drag-and-drop on the Drawing area to use in your displays. Double-click in the object to configure it.
TrendChart Settings |
|---|
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.
Field | Description |
Control Name | Defines |
the name for the control |
, allowing it |
to be accessed in |
scripts. See Display Code Behind. |
Bind to Tag |
Specifies the object property where the Trend configuration will be saved. |
Bind Pens to Tag |
Specifies the object property where the Pen values will be saved. | |
Orientation | Sets the orientation of the TrendChart (Horizontal or Vertical). Options available:
|
Window | Sets the background color of the trend control |
. |
Labels |
Defines the color of the trend control labels. | |
Grid Lines | Sets the color of the grid lines in the trend control. |
Grid Lines Stroke |
Defines the settings for the grid line |
stroke. | |
Cursor | Enables |
or disables |
cursor settings in the trend control. |
Mouse Actions |
Enables or disables mouse actions on the trend control. | |
Marker Tooltip | Enables or disables tooltips for markers on the trend control. |
Trend Auto Pens
---------------------
Allow Drop
---------------------
X Axis
Trend window settings | |
|---|---|
Field | Description |
X Axis: Duration | Sets the time span for the X-axis. |
X Axis: XY Chart | Enables or disables the definition of a range for the X-axis. |
X Axis: Labels | Specifies the number of labels on the X-axis. |
X Axis: Format | Defines the format of the X-axis labels. |
Y Axis
Trend window settings | |
|---|---|
Field | Description |
Y Axis: Y scale for each pen | Uses the min and max values of each pen for the Y-axis scale. |
Y Axis: Y Range | Defines a fixed range |
Y Axis
Y scale for each pen - Based on the min and max of each pen.
for the Y-axis. |
Labels - Define the quantity of the vertical grid lines.
The format of the values in the Y-axis. For valid numeric formats, see Tag Formats. For example, N1 (number with 1 decimal place).
Y Axis: Labels | Specifies the number of labels on the Y-axis. |
Y Axis: Format | Defines the format of the Y-axis labels. |
Y Axis: Stack Y scales | Enables stacking of similar Y scales. |
Y Axis: Merge similar Y |
scales | Merges 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
Pens
Trend window settings | |
|---|---|
Field | Description |
Pens: ID | Identifier for each pen. |
Pens: | |
Legend
Defines the position of the legends in the Trend Window.
None.
Top Left.
Top Right.
Bottom Left.
Bottom Right
Right Panel.
Bottom Panel.
Pens
<<<<.add description>>>>
TagName | Sets the tag that |
provides the value for |
each pen. |
Pen Settings
Sets the configuration of the Line color, Line stroke, Fill area, and the type of Marker.
Pens: PenSettings | Configures the pen settings, including line color, stroke, and marker type. |
Pens: MinValue | Defines the minimum value for the pen |
MinValue
according to the Y-axis range. |
MaxValue
Linear scale reference for the tag value, according to the Y-axis range.
Auto
Sets 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
Sets 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.
Pens: Auto | Automatically sets the pen value based on the defined range. |
Pens: MaxValue | Defines the maximum value for the pen according to the Y-axis range. |
Pens: PenLabel | Sets the name of the pen. |
Pens: LimitMinMaxValue | Removes points less than the tag's Min value and greater than the tag's Max value. |
Pens: Square | Fills |
Square
Trend window legacy settings
Field
Description
Control Name
Defines a name for the control so it can be accessed in the CodeBehind script. See Display 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
Sets the color of the Grid lines
Window
Sets the trend control background color.
Labels
Sets the color of the trend control labels.
Off line Marker
Sets the marker when the trend is in offline mode
Cursor Enable
Enables (selected) or disables (deselected) the vertical cursor.
the pen points with a square wave. |
Double-click any Trend window legacy object in the display to configure it.
Pens: FilterLevel | Specifies the filter level to group points on the XY axis, calculating the average. |
Legend | Defines the position of the |
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.
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
Sets 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.
(e.g., RightPanel). Options available:
|
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).
===============
Added new property "FilterExpression" (string) in TDrillingChart and TTrendChart controls. This property is used with "select" command in where condition while getting samples from SQL historic.
Added new property "DisableXMinMaxChecking" (bool) in TDrillingChart control. This property is used to disable checking while scrolling X Axis, such as: depth < 0 and depth > current hole depth.
Created new properties and method in TDrillingChart and TTrendChart controls [only Windows Desktop]:
double RegionBeginPoint;
double RegionEndPoint;
DateTimeOffset RegionBeginDateTime [only GET];
DateTimeOffset RegionEndDateTime [only GET];
bool EnableRegionMode;
bool EnableRegionScroll;
Brush RegionOutsideBrush;
Brush RegionInsideBrush;
Brush RegionInsideStrokeBrush;
int RegionInsideStrokeThickness;
public void SetRegionDateTime(DateTimeOffset begin, DateTimeOffset end);
Add event handler while region is changed [only Windows Desktop]:
public event RegionChangedEventHandler RegionChangedEvent
Added new property "FilterExpression" (string) in TDrillingChart and TTrendChart controls. This property is used with "select" command in where condition while getting samples from SQL historic.
Added new property "DisableXMinMaxChecking" (bool) in TDrillingChart control. This property is used to disable checking while scrolling X Axis, such as: depth < 0 and depth > current hole depth.
Created new properties and method in TDrillingChart and TTrendChart controls [only Windows Desktop]:
double RegionBeginPoint;
double RegionEndPoint;
DateTimeOffset RegionBeginDateTime [only GET];
DateTimeOffset RegionEndDateTime [only GET];
bool EnableRegionMode;
bool EnableRegionScroll;
Brush RegionOutsideBrush;
Brush RegionInsideBrush;
Brush RegionInsideStrokeBrush;
int RegionInsideStrokeThickness;
public void SetRegionDateTime(DateTimeOffset begin, DateTimeOffset end);
Add event handler while region is changed [only Windows Desktop]:
public event RegionChangedEventHandler RegionChangedEvent
Runtime Execution
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|