Overview

The 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:

Requirements

This component is Portable. It runs both on Windows (WPF) and on Web Pages hosted in any platform.

Configuration

  1. Go to Displays / Draw.
  2. On the Components Panel, select Charts, then TrendChart.
  3. Click or drag-and-drop it on the Drawing area to use it.
  4. Double-click the object to open the configuration window.

TrendChart Settings 

Field

Description

Control Name

Defines the name for the control, allowing it to be accessed in scripts. See Display CodeBehind.

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:

  1. Horizontal: Sets the TrendChart to display data horizontally.

  2. Vertical (Top to Bottom): Sets the TrendChart to display data vertically, starting from the top and moving to the bottom.

  3. Vertical (Bottom to Top): Sets the TrendChart to display data vertically, starting from the bottom and moving to the top.

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.

Check out our Trend Chart Customization Example to see this control in action.

X Axis

The X-axis is the horizontal axis of the chart and typically represents time or another continuous variable, such as distance, depth, or volume. When time is represented on the X-axis, the chart allows visualization of how a variable changes over time. The X-axis configurations allow users to customize how time or sequential data will be displayed in the chart. 

Trend X Axis configuration

Field

Description

Duration

Sets the time span for the X-axis defining a specific time window for the X-Axis and displays the trend over that period. In this mode, the X-Axis represents time.

XY Chart

Enables or disables the definition of a range for the X-axis. You must define two values (X and Y) to plot against each other. In this mode, the X-Axis does not necessarily represent time.

Labels

Specifies the number of labels on the X-axis.

Format

Controls how the time or value format appears defining the format of the X-axis labels.

Navigation Controls

Enables scrolling and zooming along the X-Axis, providing user-friendly data exploration.

Y Axis

The Y-Axis is the vertical axis of a chart and represents the range or scale of the values of the data being plotted. It shows how variables change relative to the time or another variable represented on the X-Axis.

Trend Y Axis settings 

Field

Description

Y scale for each pen

Uses the min and max values of each pen for the Y-axis scale.

Y Range

Defines a fixed range for the Y-axis.

Labels

Specifies the number of labels on the Y-axis.

Format

Defines the format of the Y-axis labels.

Stack Y scales

Enables stacking of similar Y scales.

Merge similar Y scales

Merges similar Y scales.

Pens

Pens represent individual data series, variables, or metrics that are displayed on the chart. Each pen typically has its own color, style, and scale.

Pens Properties 

Field

Description

ID

Identifier for each pen.

TagName

Sets the tag that provides the value for each pen. It is possible to associate 2 Tags to the same Pen by using array notation (for example, “Tag.x; Tag.y”. This allows users to use pens’ ShowValueArea property.

PenSettings

Configures the pen settings, including line color, stroke, and marker type.

MinValue

Defines the minimum value for the pen according to the Y-axis range.

Auto

Automatically sets the pen value based on the defined range.

MaxValue

Defines the maximum value for the pen according to the Y-axis range.

SPCEnabled

 Enables the DrillingChart to display a set of extra pens describing the pen’s statistical process control (SPC).

SPCSettings

Defines what SPC pens to display. The following options are available:
 Minimum: The minimum value in the tag’s history.
 Maximum: The maximum value in the tag’s history.
 Mean: The mean or average of values in the tag’s history.
 Median: The middle value that separates the lower and upper halves of values in the tag’s history.
 Sum: The sum of values in the tag’s history.
 DeviationPlus (+ 2 Sigma): The mean plus twice the standard deviation of the tag’s history.
 DeviationLess (- 2 Sigma): The mean minus twice the standard deviation of the tag’s history.

ShowValueArea

Defines the behavior of pens containing two tags. The possible values are:
0: Plots the two tags and tints the area between them.
1: Plots the two tags without tinting the area between them.
2: Plots the mean value of the tags at each point.
Other values: Plots the first tag, just like a pen with a single tag.

PenLabel

Sets the name of the pen.

LimitMinMaxValue

Removes points less than the tag's Min value and greater than the tag's Max value.

Square

Fills the pen points with a square wave.

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 (e.g., RightPanel). Options available:

None: No legend is displayed.

TopLeft: Positions the legend at the top left of the trend control.

TopRight: Positions the legend at the top right of the trend control.

BottomLeft: Positions the legend at the bottom left of the trend control.

BottomRight: Positions the legend at the bottom right of the trend control.

RightPanel: Positions the legend in the right panel of the trend control.

BottomPanel: Positions the legend in the bottom panel of the trend control.

Runtime Execution

When the runtime environment is initiated, the TrendChart Window displays the configured data trends. Users can interact with the chart, adjusting axes and visual elements to refine their data analysis. The TrendChart dynamically updates to reflect real-time data changes, providing a comprehensive view of production metrics and quality control parameters. This tool facilitates detailed process monitoring and supports informed decision-making based on the visualized data trends.

In this section:

  • No labels