Dialog: XY Chart Configuration

Symbol:

Function: The dialog contains the configuration of the Cartesian XY Chart which displays the data from an array.

Call: In the Cartesian XY Chart property, click XY Chart.

Requirement: An XY chart is selected in the active visualization editor and the respective Properties view is open.

The tree view to the left of the dialog displays the configuration of the XY chart and acts as a navigator. If you have selected the top-level entry (1) or nothing at all, then the Element Settings group is visible on the right. This includes the configuration of how often the chart is refreshed. Moreover, settings are available which influence the appearance and functionality of the chart.

If you have selected an entry below the Curves node (2), then the Curve Settings group is visible on the right. This configuration includes the Y-coordinate axis assigned to the selected curve and the array data that the curve displays. Moreover, settings are available that influence the appearance and functionality of the selected curve. The entry shows the name of the curve with the assigned coordinate axis in parentheses. For example, Curve1 [AxisY1] means that the vertical ordinate axis AxisY1 is assigned to the curve Curve1.

If you have selected an entry below the Axes node (3), then the Axis Settings group is visible on the right. This configuration includes the location of the Y-coordinate axis in the chart. Moreover, settings are available that influence the appearance and functionality of the selected coordinate axis. The entry shows the name of the axis with its function in parentheses. An axis can act as either an X- or Y-axis. For example, AxisX(X) means that the axis AxisX acts as a horizontal abscissa axis X.

Add	Adds a new entry to the view Result: An empty configuration is displayed next to the new curve or axis. You edit the settings there.
Delete	Removes the selected entry
Move Up	Moves the selected entry up one position
Move Down	Moves the selected entry down one position

OK	Saves the settings, closes the dialog, and displays the element according to the settings

Group: Element Settings

Table 132. Update

Type

Automatic: If array data affecting the chart rendering or array elements change, then the chart is refreshed automatically.
Hint: The setting Automatic update enable is available in Extended Variables to control the automatic update programmatically.
Variable: If the variable value changes, then the chart is refreshed.

Variable

Variable (integer data type)

Available if the type Variable is selected.

See example: Variable

Example 50. Example: Variable

Declaration

PROGRAM Sine
VAR_INPUT
   uiUpdate : UINT;
END_VAR

Assignment

Sine.uiUpdate

Table 133. Background

Type	No background Plain color: Color background configured in the input fields Color and Transparency. Gradient: Background with a gradient. opens the gradient editor. Image: Background with image; configured in the input field Image ID. From style: Background as defined in the style.
Color	Style color from the list box. Example: LightGreen Fixed value that is selected in the color dialog. Available when the Plain color type is selected
Transparency	Value (0 to 255) for defining the transparency of the selected color Example `255`: The color is opaque. `0`: The color is completely transparent. Available when the Image type is selected.
Image ID	`<image pool name> . <ID>` Example: `Images.Logo` Available when the Image type is selected.
Transparent color	: Background displayed with transparent color. Style color from the list box. Example: LightGreen Fixed value that is selected in the color dialog. Available when the Image type is selected.
Scaling type	Isotropic: The entire image is displayed in the element frame, either larger or smaller. As a result, the proportion of height and width are retained. Anisotropic: The image resizes automatically to the dimensions of the element frame, filling the entire element frame. As a result, the proportions are not retained. Fixed: The image retains its original size, even if the element frame is resized. Note also that the clipping option is selected. Available when the Image type is selected.

Table 134. Main Cursor

Type	Not used Vertical Big cross Small cross Intersections
Line style	Example: Dots Not available when the type is selected.
Color	Style color from the list box. Example: LightGreen Fixed value that is selected in the color dialog.
X position variable	Variable (integer data type) in which the cursor X-position is written. Example: `PLC_PRG.iPosition` Not available when the type is selected.

Table 135. Extended Variables

Element variable

Variable with data type VisuStructXYChart from the VisuElemXYChart library

The variable configured here is initialized with the static configuration. At runtime, the Cartesian XY Chart element responds to changes in this structure. As a result, the element can be controlled programmatically at runtime.

Note: When this structure is controlled programmatically, problems can result with the order of assignments. Therefore, the application should assign its initial values only as soon as the visualization element is initialized and the structure variable iInitialized has switched to 1.

The iInitialized variable is available only as of CODESYS version SP16. For older versions, the problem with the order cannot be solved neatly.

See example: Element variable

Automatic update enable

Variable (data type BOOL) to control the automatic refreshing of the chart programmatically.

TRUE: The display of the chart is refreshed automatically after a change.

Example: PLC_PRG.bIsUpdating

Note: Available when the type Automatic is selected in Update.

Example 51. Example: Element variable

Declaration

PROGRAM PLC_PRG
VAR
   XYChart : VisuStructXYChart;
END_VAR

Assignment

IF XYChart.iInitialized > 0 THEN
   XYChart.eBackgroundType := VisuEnumXYChartBGType.PLAIN;     // plain color
   XYChart.diColorBg := 16#00000080;                           // blue
   XYChart.eGrid := VisuEnumXYChartGridType.NO;                // no grid
END_IF

Table 136. Secondary Cursor

The cursor type of the additional cursor corresponds to the main cursor.
Line style	Example: Dots
Color	Style color from the list box. Example: LightGreen Fixed value that is selected in the color dialog.

Table 137. Grid

Type	Grid displayed as Not used Large grid Narrow grid Dotted grid on large marks Dotted grid on small marks
Line style	Example: Dots Not available if the type or is selected.
Color	Style color from the list box. Example: LightGreen Fixed value that is selected in the color dialog.
Grid behind the curves	: The grid is displayed in the layer behind the curve. For example, if the curve is displayed as an area chart, then the grid is not visible in the color-filled area. However, if the fill color has a transparency value (example: `128`) and therefore is semitransparent, then the grid is still visible. : The grid is on the curve. For example, if the curve is displayed as an area chart, then the color-filled area is always displayed with a grid.

Table 138. Zero Line

Position	Display of the zero lines Not used Display for Y axis Display for X axis Display for both
Line style	Example: Dots
Line width	Example: `2`
Color	Style color from the list box. Example: LightGreen Fixed value that is selected in the color dialog.

Group: Curve Settings

The settings are related to the curve selected in the tree view.

Attached to Y-axis

Y-axis that is assigned to the selected curve. The Y-axis can have multiple curves assigned to it. The list box includes all axes that were created in the element.

Example: Y

Table 139. Data X / Data Y

Variable

Array variable of base data types, custom data types, or function blocks. The variable contains the curve data for the X- or Y-data.

One-dimensional array variable of a base data type:
ARRAY [ <lower index limit> .. <upper index limit> ] OF <base data type>
Two-dimensional array variable of a base data type:
ARRAY [ <lower index limit 1> .. <upper index limit 1> , <lower index limit 2> .. <upper index limit 2> ] OF <base data type>
<lower index limit 1> .. <upper index limit 1> : 1st dimension
<lower index limit 2> .. <upper index limit 1> : 2nd dimension
One-dimensional array variable of a user-defined data type
ARRAY [ <lower index limit> .. <upper index limit> ] OF <name of DUT>
One-dimensional array variable of an enumeration
ARRAY [ <lower index limit> .. <upper index limit> ] OF <name of enumeration>
One-dimensional array variable of a function block
ARRAY [ <lower index limit> .. <upper index limit> ] OF <name of function block>

Base data type:

Note: Set a fixed scaling for an axis only if you know the value range. Otherwise, we recommend that you set automatic scaling.

See: Examples

Element to use

The array element of the complex data type that is used.

. Available when the data type of Variable is the array of a complex data type (consisting of multiple elements):

Multidimensional array
Custom Data Type
Function Block

: Opens a list box with all array elements.

Example 52. Example: Two-dimensional array of the base type REAL

Declaration

PROGRAM Curve
VAR
   aDataXY : ARRAY [1..2, 1..50] OF REAL;
END_VAR

Data X

Variable: Curve.aDataXY

Element to use: [1]

Data Y

Variable: Curve.aDataXY

Element to use: [2]

As a result, 100 array values are displayed in this curve.

Example 53. Example: One-dimensional array of a user-defined data type

Declaration

TYPE STRUCT_A :
STRUCT
        iX: INT;
        rY: REAL;
        bResult: BOOL;
END_STRUCT
END_TYPE

PLC_PRG
VAR
        aDataXY : ARRAY [1..50] OF STRUCT_A;
END_VAR

Data X

Variable: aDataXY.iX

Element to use: iX

Data Y

Variable: aDataXY.rY

Element to use: rY

Example 54. Example: One-dimensional array of the structure POINT

PLC_PRG
VAR
        aPoints_1: ARRAY[0..99] OF POINT; // POINT ist eine Struktur mit iX und iY
END_VAR

Data X

Variable: PLC_PRG.aPoints_1

Element to use: iX

Data Y

Variable: PLC_PRG.aPoints_1

Element to use: iY

As a result, 200 X- and Y-values are available which are displayed in the chart in 100 curve points.

Example 55. Example: One-dimensional array of a function block

Declaration

FUNCTION_BLOCK FB_A
VAR_INPUT
        iIn: INT;
END_VAR
VAR_OUTPUT
        iOut: INT;
END_VAR
PROGRAM PLC_PRG
VAR
        aDataXY : ARRAY [1..50] OF FB_A;
END_VAR

Data X

Variable: PLC_PRG.aDataXY

Element to use: iIn

Data Y

Variable: PLC_PRG.aDataXY

Element to use: iOut

Table 140. Property: Array indexes

The array indices limit the display of the curve to a partial area. Instead of all points being displayed in the XY chart, only the points from Minimum to Maximum are displayed. Minimum and Maximum are indexes that must not violate the index limits. The compiler also monitors this. Pick the index limits of the array declaration.

Example: <variable name> : ARRAY [ <lower index bound> .. <upper index bound> ] OF <data type>;

Moreover, you can limit the display programmatically in the instance of VisuStructXYChartCurve. The structure elements diIndexMin and diIndexMax are available for this purpose. They have the same function as Minimum and Maximum. At runtime, the values are copied here into these structure elements.

In addition, you can limit the display area only one-sided, and specify only one Minimum or only one Maximum. When you do not specify a limit here or in the structure, the curve is displayed completely.

When you specify variables (numeric data type) as array indices, you can make the display dynamic.

Minimum

Minimum index as literal, variable (numeric data type), or constant variable (numeric data type)

Specifies the index from which the curve is displayed. The index is greater than or equal to the index limit <lower index bound>.

Example: 10, PLC_PRG.uiLowerIndex, GVL.c_diMIN

Maximum

Maximum index as literal, variable (numeric data type), or constant variable (numeric data type)

Example: 20, PLC_PRG.uiUpperIndex, GVL.c_diMAX

Contains the index to which the curve is displayed. The index is less than or equal to the index limit <upper index bound>.

Table 141. Chart

Type

Line chart: Data is displayed as a continuous line. Moreover, the data can be displayed as dots. Input fields are provided for this purpose.
Note:
No more than 32,767 points per curve can be drawn in the line chart. When this number is exceeded, a warning is issued and only the first 32,767 points of the curve are drawn.
Bar chart: Data is displayed as vertical bars. Input fields are provided for color and transparency.
Area chart: Data is displayed as a continuous line with a color-filled area. Moreover, the data can be displayed as dots. Input fields are provided for this purpose.

The following settings are available when the Line chart type is selected.
Line color	: Line in axis color Style color from the list box. Example: LightGreen Fixed value that is selected in the color dialog.
Line type	Line Step low Step high None Dots only
Line width	Example: `2`
Line style	Example: Dots
Dot style	None Dot Cross Small circle Big circle

The following settings are available when the Bar chart type is selected.
Bar shape	Fixed width: The bar is displayed in a fixed width. Variable width: The bar width depends on the distance between the values.
Main color	Style color from the list box. Example: Element-XYChart-Axis-Background Fixed value that is selected in the color dialog. Example: `0; 0; 0`
Alternative color
Frame color

The following settings are available when the Area chart type is selected.
Line color	Example: Blue : The color configuration is disabled, so then the axis color is applied.
Filling type	Color for filling the area between the curves. No filling Plain color: Single-color area Gradient: Area filled with a color gradient
Filling color	Example: Gray : Opens the Color dialog Requirement: Plain color is selected in Filling type. : The color configuration is disabled, so then the line color is applied.
Transparency	Transparency value (0–255) for the pure color. Example: `128` Requirement: Plain color is selected in Filling type.
Gradient	Area filled with a color gradient. : Opens the Gradient Editor dialog Requirement: Gradient is selected in Filling type.
Line width	Example: `2`
Line style	Example: Dots
Dot style	The data is displayed in the chart as dots in point style. None Dot Cross Small circle Big circle

Curve value captured by the cursor

Variable (integer data type) in which the Y-position of the cursor is written to the curve.

Example: Sine.Cursor_Pos_Y

Table 142. Extended Variables

Curve variable

Variable (data type VisuStructXYChartCurve from the VisuElemXYChart library)

The iInitialized variable is available only as of CODESYS version SP16. For older versions, the problem with the order cannot be solved neatly.

See example: Curve variable

Example 56. Example: Curve variable

Declaration

PROGRAM PLC_PRG
VAR
   XYCurve : VisuStructXYChartCurve;
END_VAR

Assignment

IF XYCurve.iInitialized > 0 THEN
   XYCurve.diColor    := 16#00FF0000;           // red
   XYCurve.iLineWidth := iLineWidth;            // line width
END_IF

Table 143. Reference curve

Curve	Curve that is referenced. The area between the curves is filled in color.
Color	Color for filling the area between the curves. Style color from the list box. Example: `Light gray` Fixed value that is selected in the color dialog. Example: `0; 0; 0`

Group: Axis Settings

The settings are related to the axis selected in the tree view.

Table 144. Display settings

Position

X-axis: The X-axis is selected. There is exactly one X-axis in the XY chart.
On the left side: The Y-axis is selected and displayed on the left in the chart.
On the right side: The Y-axis is selected and displayed on the right in the chart.

Minimum

Maximum

Minimum and maximum limit of the axis value within which the curve is displayed

. Limit specified as

Variable (numeric data type)
Example: PLC_PRG.iMinX, PLC_PRG.iMaxX
Constant variable (numeric data type)
Declaration in GVL: VAR_GLOBAL CONSTANT c_iMINX : INT; c_iMAXX : INT; END_VAR
Example: GVL.c_iMINX, GVL.c_iMAXX
Fixed value (numeric literal)
Example: -1000, 1000

Note

Visible only when Autoscale is disabled.

Autoscale

standard icon : The axis is scaled automatically. The Minimum and Maximum settings are not visible.

Axis color

Style color from the list box. Example: LightGreen
Fixed value that is selected in the color dialog.

Table 145. Background

Type	No background Plain color: Color background configured in the input fields Color and Transparency Gradient: Background with a gradient. opens the gradient editor. Image: Background with image; configured in the input field Image ID
Color	Style color from the list box. Example: LightGreen Fixed value that is selected in the color dialog Available when the Plain color type is selected
Transparency	Value (0 to 255) for defining the transparency of the selected color Example `255`: The color is opaque. `0`: The color is completely transparent. Available when the Plain color type is selected
Image ID	`<image pool name> . <ID>` Example: `Images.Logo` Available when the Image type is selected
Transparent color	: Background displayed with transparent color Style color from the list box Example: LightGreen Fixed value that is selected in the color dialog Available when the Image type is selected
Scaling type	Isotropic: The entire image is displayed in the element frame, either larger or smaller. As a result, the proportion of height and width are retained. Anisotropic: The image resizes automatically to the dimensions of the element frame, filling the entire element frame. As a result, the proportions are not retained. Fixed: The image retains its original size, even if the element frame is resized. Note also that the clipping option is selected. Available when the Image type is selected

Table 146. Extended Variables

Axis variable

Variable (data type VisuStructXYChartAxis from the VisuElemXYChart library)

The iInitialized variable is available only as of CODESYS version SP16. For older versions, the problem with the order cannot be solved neatly.

See example: Axis variable

Example 57. Example: Axis variable

Declaration

PROGRAM PLC_PRG
VAR
   XYAxis : VisuStructXYChartAxis;
END_VAR

Assignment

IF XYCurve.iInitialized > 0 THEN
   XYAxis.rMin := 12.0;           // minimum axis value
   XYAxis.rMax := 36.0;           // maximum axis value
END_IF

Table 147. Extended Display Parameters

Display ruler Axes overlap in origin Display numbers Display of maximum number Display of minimum number Display of numbers in the middle Overwrite numbers	: The axis is displayed accordingly.
Number rotation angle	Angle (in degrees) which specifies how many degrees the numbers of the axis label rotate Example: `45` The rotation is clockwise, whereby the zero degrees position is the usual display position. The degree number can be negative. Note When a rotation is set, the setting is not considered in Overwrite numbers. As a result, the displayed numbers can overlap.
Rotation aligned to mark	: The side of the imaginary box, where the number is displayed, is aligned to the reference mark. : The center of the imaginary box, where the number is displayed, is aligned to the reference mark.
Texts for numbers replacing	In doing so, the index of the text list has to be equal to the number being replaced. Indexes may be negative and fractional (with decimal places). The rotation function is also available for texts. Tip We highly recommend that you prepare short text lists. The element can process a maximum of 100 texts for each axis.
Format string	For formatting the output text of the axis. Direct specification of a format string Example: `dd:MM:yyyy HH:mm:ss:ms` Text list entry which refers to a localized format string Example: `TextList.ID` In the text list, the format string can be specified differently for different languages. Accordingly, the text is displayed depending on the language. The format string for date/time is used if the data for this axis is of type DATE/TIME/TOD/DT. The date and time are then displayed in two lines. The line break occurs between the date and time format.

Table 148. Label

Text ID	`<text list name> . <ID>` Example: `Texts.mm` (The text list `Texts` is already available in the project.)
Color	: Label in the axis color Style color from the list box. Example: LightGreen Fixed value that is selected in the color dialog Available when Test ID is initialized
Rotation	0°: Parallel to the axis 90°: Rotated on the axis 270°: Rotated on the axis Available when Test ID is initialized.
Font	Font style from the list box. Example: Annotation Fixed value which is selected in the default Font dialog Available when Test ID is initialized

Table 149. Level Lines

Line along the axis

The line is horizontal for a Y-axis and vertical for an X-axis. A maximum of 10 lines are possible.

Line number

Addresses the line and results in the corresponding parameter settings being displayed for this line in the window area below Parameter for line <n>.

Example: 3

Parameter for line <n>
Value	Example: `3`
	A maximum of 10 lines are possible.
Line style	Example: Dots
Line width	Example: `2`
Color	: Line of the level line value in the axis color Style color from the list box. Example: LightGreen Fixed value that is selected in the color dialog
Label text ID	`<text list name> . <ID>` Example: `Texts.mm` (The text list `Texts` is already available in the project.)
Label position	Inline Above Below Left Right
Label rotation	0°: Parallel to the axis 90°: Rotated on the axis 270°: Rotated on the axis Available when Test ID of the label is initialized
Font	Font style from the list box. Example: Annotation Fixed value which is selected in the default Font dialog Available when Test ID of the label is initialized