Visualization Element 'Trend'

Symbol:

Category: “Special Controls”

The element displays the curve of variable values as a trend diagram. The trend diagram is suitable for representing a long-term data curve because the data is read from a trend recording and hence from a database. Moreover, you can run the “Trend” element together with the “Date Range Picker”, “Legend”, and “Time Range Picker” operating elements so that the user can navigate conveniently in the diagram.

You can programmatically delete the recorded trend curve at runtime. The recording starts again from the time of deletion. See the help page for "Programming a Trend Visualization".

Element properties

“Element name”	Example: `‎Velocity‎`
“Data source”	Data source for the connection via the device and the application to the “Trend Recording” object where the trend data that you want to show was saved. If the “Trend Recording” object is on the local device, then it is sufficient when you specify the respective application. If the trend recording is on a remote device, then you need to specify the data source connection to this device. “ <local application>” The “Trend Recording” object is located on the local device in the local application. `‎<device name> . <application name>‎` Example: `‎Device_A.App_A‎` The “Trend Recording” object is located on the local device `‎Device_A‎` below the application `‎App_A‎`. `‎<data source name>‎` Example: `‎DataSource_B‎` The “Trend Recording” object is located on a remote device that is connected via the data source `‎DataSource_B‎`. Below the (now visible) “Application” property, the remote application is displayed as configured in the data source. Example: `‎App_B‎` Note: If the data source is accessed symbolically by means of a symbol file (CODESYS symbolic), then the required symbol file and the corresponding project have to be saved in the same folder.
“Type of element”	“Trend”
“Trend recording”	: Trend recording whose data is displayed as a diagram The trend recording is located on the device specified in the “Data source” property.
“Display Mode”	: Opens the “Display Settings” dialog.

See also

Element property 'Position'

The position defines the location and size of the element in the visualization window. This is based on the Cartesian coordinate system. The origin is located at the upper left corner of the window. The positive horizontal x-axis runs to the right. The positive vertical y-axis runs downwards.

“X”	The x-coordinate of the upper left corner of the element Specified in pixels Example: `‎10‎`
“Y”	The y-coordinate of the upper left corner of the element Specified in pixels Example: `‎10‎`
“Width”	Specified in pixels Example: `‎150‎`
“Height”	Specified in pixels Example: `‎30‎`
	Tip: You can change the values in “X”, “Y”, “Width”, and “Height” by dragging the corresponding symbols to another position in the editor.
“Angle”	Static angle of rotation (in degrees) Example: `‎35‎` The element is displayed rotated in the editor. The point of rotation is the center of the element. A positive value rotates clockwise. Tip: You can change the value in the editor by focusing the element to the handle. When the cursor is displayed as a rotating arrow , you can rotate the element about its center as a handle. (1): Handle Note: If a dynamic angle of rotation is also configured in the property “Absolute movement Internal rotation”, then the static and dynamic angles of rotation are added in runtime mode. The static angle of rotation acts as an offset.

See also

⮫ “Positioning the Element, Adapting Size and Layer”

“Show cursor”	: A cursor (black triangle with vertical line) is shown in the trend diagram. Behavior at runtime: As soon as the graph is drawn, the user can move the cursor along the time axis in order to mark a specific time. Then the variable value belonging to the cursor position is displayed in the legend above the graph.
“Show tooltip”	Requirement: “Show cursor” is activated. : A tooltip opens at the cursor. Behavior at runtime: The variable value belonging to the cursor position is displayed as a tooltip.
“Show frame”	: The trend diagram is drawn with a frame.
“Number format”	Format specification in printf syntax, which determines how the values are displayed in the tooltip and in the legend Example: `‎%d‎` (integer variable) or `‎%5.2f‎` (floating-point number)

Element property 'Tick mark labels'

The time stored in the trend recording are in the UTC time zone. If the time is displayed in the trend of the visualization element, then the time stamps are converted to the local time zone of the operating system of the PLC.

Change the time zone in the operating system if the times in the trend diagram are not in the zone that you need.

“Time stamps”	X-value of the trend diagram “Absolute time stamps” The absolute time with date and time is displayed at each tick mark on the time axis. Example: `‎03/18/2016 12h30m50s‎` “Relative time stamps” The time period from the start of the recording (=0) is displayed at each tick mark. Example: `‎5m30s‎`
“Draw labels on two lines”	: The time stamps are displayed on two lines (for example, the date is displayed on the first line and the time on the second line). : The time stamp is displayed on one line. Example: `‎2019-11-01-12:30:50‎`.
“ Omit irrelevant information in timestamps”	: The time stamps are displayed in a truncated form (without insignificant information). For example, the date is displayed at the first tick mark, and only the time is displayed at the following tick marks. The “Internationalization (format strings)” property is not visible and is ignored. : The time stamps are displayed with all information. This takes into consideration the “Internationalization (format strings)” property which contains the format specification for the date and time display.
“Internationalization (format strings)”	Format specification for the date and time display of the time stamp (when it is displayed in full) Note: The property is visible only if the “Omit irrelevant information in timestamps” option is not selected.
“Date”	Format string that returns the date display according to the defined format. The operating system locale is used as the default setting. Defined format strings for the date: Year: `‎yyyy‎`, `‎yy‎`, `‎y‎` Month: `‎MM‎`, `‎M‎` Day: `‎dd‎`, `‎d‎` Recommended separator: `‎-‎` `‎.‎` `‎/‎` Example: `‎yyyy-MM-d‎` displays `‎2019-10-25‎` `‎yyyy-MM-dd‎` displays `‎2019-10-25‎` `‎dd.MM.yyyy‎` displays `‎25.10.2019‎` `‎dd/MM/yyyy‎` displays `‎25/10/2019‎`
“Time”	Format string that returns the time (or time of day) display according to the defined format. The operating system locale is used as the default setting. Defined format strings for the time: 24-hour time definition: `‎HH‎`, `‎H‎` 12-hour time definition: `‎hh‎`, `‎h‎` AM/PM for 12-hour time definition: `‎tt‎` Minutes: `‎mm‎`, `‎m‎` Seconds: `‎ss‎`, `‎s‎` Milliseconds: `‎ms‎` Microseconds: `‎us‎` Recommended separator: `‎:‎` or space character Example: `‎HH:mm:ss:ms‎` displays `‎15:30:59:123‎` `‎h:mm:ss tt‎` displays `‎3:30:59 PM‎`

See also

⮫ “Placeholders with Format Definition in the Output Text”

Element property 'Assigned control elements'

These elements are created automatically when the control elements are added with the command “Insert elements for controlling Trend”.

“Date Range Picker”	Control element for changing the date and time of the displayed data sets. With , all elements are provided that have implemented the interface `‎IDateRangeSelector‎`. By default, instances of the “Date Range Picker” visualization element are available.
“Time Range Picker”	Control element for changing the time of the displayed data sets. With , all elements are provided that have implemented the interface `‎ITimeSelector‎`. By default, instances of the “Time Range Picker” visualization element are available.
“Legend”	Control element for displaying a legend for the graphs. With , all elements are provided that have implemented the interface `‎ILegendDisplayer‎`.

See also

⮫ “Command 'Insert Elements for Controlling the Trend'”

Element property 'Center'

The properties contain fixed values for the coordinates of the point of rotation. This point of rotation is shown as the symbol. The point is used as the center for rotating and scaling.

“X”	X-coordinate of the point of rotation
“Y”	Y-coordinate of the point of rotation

You can also change the values by dragging the symbols () to other positions in the editor.

Element property 'Absolute movement'

The properties contain IEC variables for controlling the position of the element dynamically. The reference point is the upper left corner of the element. In runtime mode, the entire element is moved.

“Movement”
“X”	Variable (numeric data type). Defines the X position (in pixels). Example: `‎PLC_PRG.iPos_X‎`. Increasing this value in runtime mode moves the element to the right.
“Y”	Variable (numeric data type). Defines the Y position (in pixels). Example: `‎PLC_PRG.iPos_Y‎`. Increasing this value in runtime mode moves the element downwards.
“Rotation”	Variable (numeric data type). Defines the angle of rotation (in degrees). Example: `‎PLC_PRG.iAngle1‎`. The midpoint of the element rotates at the “Center” point. This rotation point is shown as the symbol. In runtime mode, the alignment of the element remains the same with respect to the coordinate system of the visualization. Increasing the value rotates the element to the right.
“Interior rotation”	Variable (numeric data type). Defines the angle of rotation (in degrees). Example: `‎PLC_PRG.iAngle2‎`. In runtime mode, the element rotates about the point of rotation specified in “Center” according to the value of the variable. In addition, the alignment of the element rotates according to the coordinate system of the visualization. Increasing the value in the code rotates clockwise. The rotation point is shown as the symbol. Note: If a static angle of rotation is specified in the “Position Angle” property, then the static angle of rotation is added to the variable angle of rotation (offset) when the visualization is executed.

You can link the variables to a unit conversion.

The “X”, “Y”, “Rotation”, and “Interior rotation” properties are supported by the "Client Animation" functionality.

See also

Element property 'State variables'

The variables control the element behavior dynamically.

“Invisible”

Variable (‎BOOL‎). Toggles the visibility of the element.

‎TRUE‎: The element is not visible at runtime.

The “Invisible” property is supported by the "Client Animation" functionality.

These properties are available only when you have selected the “Support client animations and overlay of native elements” option in the Visualization Manager.

“Animation duration”

Defines the duration (in milliseconds) in which the element runs an animation

Variable (‎integer value‎)

Example: ‎Menu.tContent‎ with ‎VAR tContent : INT := 500; END_VAR‎
Integer literal

Example: ‎500‎

Animatable properties

“Absolute movement”, “Movement”, “X”, “Y”
“Absolute movement”, “Rotation”
“Absolute movement”, “Interior rotation”
“Absolute movement”, “Exterior rotation”

The animated movement is executed when at least one value of an animatable property has changed. The movement then executed is not jerky, but is smooth within the specified animation duration. The visualization element travels to the specified position while rotating dynamically. The transitions are smooth.

“Move to foreground”

Moves the visualization element to the foreground

Variable (‎BOOL‎)

Example: ‎bIsInForeground‎ with ‎VAR bIsInForeground : BOOL := FALSE; END_VAR‎

‎TRUE‎: At runtime, the visualization element is displayed in the foreground.

‎FALSE‎: At runtime, the visualization element is displayed in the layer where it was inserted in the visualization editor.

Element property 'Access rights'

Requirement: User management is set up for the visualization.

“Access rights”

Opens the “Access rights” dialog. There you can edit the access privileges for the element.

Status messages:

“Not set. Full rights.”: Access rights for all user groups : “operable”
“Rights are set: Limited rights”: Access is restricted for at least one group.

See also

⮫ “Dialog 'Access Rights'”

See also