Versions Compared

Old Version 6

changes.mady.by.user user-55475

Saved on

compared with

New Version Current

changes.mady.by.user Support

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

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
maxLevel3
stylenone

Image Added

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.

Image Added

TrendChart Settings 

AnchorConfiguring the Trend WindowConfiguring the Trend WindowConfiguring 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 the name for the control so , allowing it can to be accessed in the CodeBehind scriptscripts. See Display Code BehindCodeBehind.

Bind to Tag

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

Bind Pens to Tag

Enter with an 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 background color.

Labels

Sets Defines the color of the trend control labels.

Grid Lines

Sets the color of the grid lines in the trend control.

Grid Lines Stroke

Sets Defines the settings for the grid line settingsstroke.

Cursor

Enables (selected) or disables (deselected) the cursor settings in the trend control.

Mouse Actions

---------------------

Marker Tooltip

---------------------

Trend Auto Pens

---------------------

Allow Drop

---------------------

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.
  • 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).
  • 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.
  • Bottom Right
  • Right Panel.
  • Bottom Panel.

Pens

<<<<.add description>>>>

TagName

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

Pen Settings

Sets 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

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.

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 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.

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, seeTag 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

    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.

    Enables or disables mouse actions on the trend control.

    Marker Tooltip

    Enables or disables tooltips for markers on the trend control.


    Info

    By default, the Bind Pens to Tags property will be empty. If you want to dynamically change pens for a single Trend Chart or create specific tags for multiple charts, you need to manually configure the Client.TrendChart.Pens

    If the Bind Pens to Tags property is configured and the chart already has default pens set in its configuration, these default pens will be applied to the pen list when no tag names are specified.


    Tip
    iconfalse

    Check out our TrendChart Properties 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. 

    Image Added

    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.

    Image Added

    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.

    Image Added

    Expand
    titleAdding pens on TrendChart

    Image Added


    Expand
    titleRemoving pens on TrendChart

    Image Added


    Image Added

    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.

    Expand
    titlePen Settings

    Image Added


    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.

    Image Added

    In this section:

    Page Tree
    root@self

    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

    In this section...

    Page Tree
    root@parent
    spacesV10