Trend Line Chart

A TrendLineChart is a trend element in which curves of historicized symbols can be displayed.

A description of the configuration can be found in chapter Configuration.

Attributes

Category: Colors

Name

Description

BackgroundColor

Definition of the background color

BorderColor

Definition of the border color of the control

GridBackgroundColor

Definition of the background color of the coordinate system

GridLineColor

Definition of the color of the coordinate grid

SubgridLineColor

Definition of the color of the coordinate subgrid

XLabelFontColor

Definition of the font color of the x-axis labels

XAxisColor

Definition of the color of the x-axis

XAxisNameFontColor

Definition of the font color of the X-axis name

MenuBarLabelFontColor

Definition of the font color of the menu bar

SectionsBackgroundColor

Definition of the background color of the control

TooltipFontColor

Definition of the color of the tooltip

TooltipBackgroundColor

Definition of the background color of the tooltip

Category: Layout

Name

Description

Left

Definition of the distance from the left side to the left side of the surrounding control

LeftUnit

Definition of the unit of the distance to the right side of the surrounding control:

  • Pixels for absolute positioning
  • Percent for relative positioning

Top

Definition of the distance from the top side to the top side of the surrounding control

TopUnit

Selection of the unit of the distance to the top side of the surrounding control:

  • Pixels for absolute positioning
  • Percent for relative positioning

Right

Definition of the distance from the right side to the right side of the surrounding control

RightUnit

Selection of the unit of the distance to the right side of the surrounding control:

  • Pixels for absolute positioning
  • Percent for relative positioning

Bottom

Definition of the distance from the bottom side to the bottom side of the surrounding control

BottomUnit

Selection of the unit of the distance to the bottom side of the surrounding control:

  • Pixels for absolute positioning
  • Percent for relative positioning

Width

Definition of the external width of the control

WidthUnit

Selection of the unit of the width:

  • Pixels for an absolute width
  • Percent for a relative width

Height

Definition of the external height of the control

HeightUnit

Selection of the unit of the height:

  • Pixels for an absolute height
  • Percent for a relative height

MaxWidth

Definition of the maximum width if the control size is defined as dynamic.

MaxWidthUnit

Selection of the unit of the maximum width:

  • Pixels for an absolute value
  • Percent for a relative value

MinWidth

Definition of the minimum width if the control size is defined as dynamic.

MinWidthUnit

Selection of the unit of the minimum width:

  • Pixels for an absolute value
  • Percent for a relative value

MaxHeight

Definition of the maximum height if the control size is defined as dynamic.

MaxHeightUnit

Selection of the unit of the maximum height:

  • Pixels for an absolute value
  • Percent for a relative value

MinHeight

Definition of the minimum height if the control size is defined as dynamic.

MinHeightUnit

Selection of the unit of the minimum height:

  • Pixels for an absolute value
  • Percent for a relative value

RenderedLeft

Calculated distance in pixels from the left side to the left side of the surrounding control

RenderedTop

Calculated distance in pixels from the top side to the top side of the surrounding control

RenderedRight

Calculated distance in pixels from the right side to the right side of the surrounding control

RenderedBottom

Calculated distance in pixels from the bottom side to the bottom side of the surrounding control

RenderedWidth

Calculated width of the control in pixels

RenderedHeight

Calculated height of the control in pixels

GridRowIndex

Definition of the row of a grid in which the control is to be displayed.

GridColumnIndex

Definition of the column of a grid in which the control is to be displayed.

Opacity

Definition of the transparency of the entire control

Visibility

Selection of the visibility of a control:

  • Visible: Control is visible.
  • Hidden: Control is invisible, but is drawn – controls behind it cannot be operated.
  • Collapsed: Control is invisible and is not drawn – controls behind it can be operated.

ZIndex

Definition of the position on the Z-axis

Transform

Definition of a transformation of a control:

  • Translate: Translate in X-, Y-, Z-direction
  • Rotate: Rotate by an angle
  • Scale: Zoom by a factor
  • Skew: Sides shown skewed by an angle
  • Origin: Set the origin of the transformation relative to the position of the control
  • Perspective: Set the perspective of the transformations of all child elements

BoxShadow

Definition of a shadow

WidthMode

Selection of the method of calculating the width:

  • Value: The width is defined by the width entered.
  • Parent: The width is defined by the distance to the left and right side of the parent element. The "Width" attribute is ignored in all calculations!

HeightMode

Selection of the method of calculating the height:

  • Value: The height is defined by the height entered.
  • Parent: The height is defined by the distance to the top and bottom side of the parent element. The "Height" attribute is ignored in all calculations!

Category: Common

Name

Description

Start

Definition of the start time at which the display should begin

End

Definition of the end time at which the display should end

LineGraphDescriptions

Definition of the historicized variables to be displayed in the graph and their method of display

ShowLegend

Selecting whether the legend is to be displayed

Interval

Definition of the interval at which the data are updated

MouseMode

Selection of the mouse mode that is active after stopping:

  • ZoomX: By drawing a rectangle, an area can be defined in the X direction which is to be zoomed in on.
  • ZoomXY: By drawing a rectangle, an area can be defined in the X and Y direction which is to be zoomed in on.
  • PanX: The observed area can be shifted in the X direction in the display area of the graph by drag-and-drop.
  • PanXY: The observed area can be shifted in the X and Y direction in the display area of the graph by drag-and-drop.

ServerDomain

Definition of the server extension name.

ReferenceLines

Definition of the reference lines.

IsEnabled

Selection of whether a control should be activated

Id

Definition of the name of the control

Type

Type name of the control

ClassNames

Definition of control classes

IsAttached

If a control is logically assigned in the DOM.

Tooltip

Definition of the tooltip for the control

Category: Border

Name

Description

BorderRadius

Definition of the radius of the four corners to round them off

BorderStyle

Selection of the border style of the four sides of the control

BorderWidth

Definition of the border width of the four sides of the control

Category: Background Image

Name

Description

BackgroundImage

Definition of an image that is located above the background color

BackgroundImageHeight

Definition of the height of the background image

BackgroundImageHeightUnit

Selection of the unit of the height of the background image:

  • Pixels for an absolute height
  • Percent for a relative height

BackgroundImageWidth

Definition of the width of the background image

BackgroundImageWidthUnit

Selection of the unit of the width of the background image:

  • Pixels for an absolute width
  • Percent for a relative width

BackgroundImagePadding

Definition of an additional distance between the border of the control and background image for the four sides

BackgroundImageVerticalAlignment

Definition of the vertical alignment of the background image within the control

BackgroundImageHorizontalAlignment

Definition of the horizontal alignment of the background image within the control

Category: XAxis

Name

Description

ShowXAxis

Selecting whether the X-axis is to be displayed

XShowLabels

Selecting whether the X-axis labels are to be displayed

XMainTickSteps

Definition of the number of main X-axis subdivisions

ShowXSubTicks

Selecting whether the auxiliary X-axis subdivisions are to be displayed

XSubTickSteps

Definition of the number of auxiliary X-axis subdivisions

ShowXAxisName

Selecting whether the X-axis name is to be displayed

XAxisName

Definition of the X-axis name

XLabelFontFamily

Definition of the font using the name of the font family or the keyword

XLabelFontSize

Definition of the font size for the X-axis labels

XLabelFontSizeUnit

Selecting the font size unit for the X-axis labels:

  • Pixels for an absolute size

Percent for a relative size

XLabelFontWeight

Selecting the font weight of the X-axis labels:

  • Normal
  • Bold

XAxisWidth

Definition of the X-axis width

XAxisNameFontFamily

Definition of the font using the name of the font family or the keyword

XAxisNameFontSize

Definition of the font size of the X-axis name

XAxisNameFontSizeUnit

Selecting the font size unit for the X-axis labels:

  • Pixels for an absolute size

Percent for a relative size

XAxisNameFontWeight

Selecting of the font weight of the X-axis name:

  • Normal
  • Bold

XAxisFormat

Definition of the formatting of the X-axis labels

Category: YAxis

Name

Description

YAxis

Definition of one or more Y-axes

ShowYSubTicks

Selecting whether the auxiliary subdivisions on the Y-axis are to be displayed

YAxisWidth

Definition of the Y-axis width

YLabelFontFamily

Definition of the font using the name of the font family or the keyword

YLabelFontSize

Definition of the font size for the Y-axis labels

YLabelFontSizeUnit

Selecting the font size unit for the Y-axis labels:

  • Pixels for an absolute size
  • Percent for a relative size

YLabelFontWeight

Selecting the font weight of the Y-axis labels:

  • Normal
  • Bold: bold

YMainTickSteps

Definition of the number of main Y-axis subdivisions

YSubTickSteps

Definition of the number of auxiliary Y-axis subdivisions

Category: Grid

Name

Description

ShowGrid

Selecting whether the coordinate grid is to be displayed.

GridLineStyle

Definition of the line style for the coordinate grid.

GridLineWidth

Definition of the line width of the coordinate grid.

GridShowHorizontalLines

Selecting whether the horizontal lines of the coordinate grid are to be displayed.

GridShowVerticalLines

Selecting whether the vertical lines of the coordinate grid are to be displayed.

Category: Subgrid

Name

Description

SubgridLineStyle

Definition of the line style for the subgrid.

SubridLineWidth

Definition of the line width of the subgrid.

SubgridShowHorizontalLines

Selecting whether the horizontal lines of the subgrid are to be displayed.

SubgridShowVerticalLines

Selecting whether the vertical lines of the subgrid are to be displayed.

Category: Menubar

Name

Description

ShowMenuBar

Selection of whether the menu bar is to be displayed

MenuBarPosition

Selection of the position of the menu bar:

  • Bottom: Underside
  • Top: Top side

MenuBarLabelFontFamily

Definition of the font using the name of the font family or the keyword

MenuBarLabelFontSize

Definition of the font size

MenuBarLabelFontStyle

Selecting the font style:

  • Normal
  • Italic: italic
  • Oblique: slanted

MenuBarLabelFontWeight

Selecting the font weight:

  • Normal
  • Bold: Bold

Category: Tooltip

Name

Description

ShowTooltip

Selecting whether the tooltips should be displayed in stop mode

TooltipFormat

  • Definition of the formatting of the tooltips.

TooltipFontFamily

Definition of the font using the name of the font family or the keyword

TooltipFontSize

Definition of the font size

TooltipFontWeight

Selecting the font weight:

  • Normal
  • Bold: Bold

Events

Category: Framework

Name

Description

onAttached

The control was added to the display.

onDetached

The control was removed from the display.

onInitialized

The control was initialized.

onDestroyed

The control was destroyed.

onMoved

The control was moved in relation to the browser window.

onResized

The size of the control was changed.

Category: Operator

Name

Description

onPressed

A mouse click was executed or a touch screen was briefly touched.

onMouseClick

The left mouse button was clicked over the control and released.

onMouseDoubleClick

The left mouse button was clicked twice over the control and released.

onMouseRightClick

The right mouse button was clicked over the control and released.

onMouseDown

A mouse button was pressed down over the control.

onMouseEnter

The mouse pointer was moved over the control.

onMouseLeave

The mouse pointer has left the control.

onMouseUp

A mouse button was released over the control.

onMouseDownLeft

The left mouse button was pressed down over the control.

onMouseDownRight

The right mouse button was pressed down over the control.

onMouseMove

The mouse was moved over the control.

onMouseOver

The mouse pointer was moved over the control or one of its children.

onMouseOut

The mouse pointer has left the control or one of its child controls.

onMouseUpLeft

The left mouse button was released over the control.

onMouseUpRight

The right mouse button was released over the control.

onMouseWheel

The mouse wheel was moved over the control.

onTouchStart

A finger/stylus was placed against a touch screen.

onTouchMove

A finger/stylus was moved on a touch screen.

onTouchEnd

A finger/stylus was lifted off a touch screen.

onTouchCancel

An interaction with a touch screen was aborted.

Functions

Name

Type

Description

pause

TcHmiTrendLineChart

Stops the view.

resetZoom

TcHmiTrendLineChart

Resets all interactions.

play

TcHmiTrendLineChart

Resets the zoom and displays live data again.

stop

TcHmiTrendLineChart

Fixes the view.

resetZoom

TcHmiTrendLineChart

Resets zooming and panning.

reset

TcHmiTrendLineChart

Starts the view.

Access rights

Name

Description

observe

Determines whether the control is generally observable.

operate

Determines whether the control is generally operable.

Inheritance hierarchy

Control

    Trend Line Chart

NuGet package: Beckhoff.TwinCAT.HMI.Controls

Trend Line Chart 1:

NuGet packages are available from version 1.12.

Trend Line Chart 2:

Available from version 1.10

See also

API reference for this control