Skip to main content

Displaying Array Variables as an XY Chart

In the Cartesian XY Chart visualization element, you can visualize array variables as curves. In the case of multiple array variables, a shared X-axis and multiple Y-axes are used. The array variables to be visualized as well as the optical design of the curves are specified in a separate configuration dialog. Click the _visu_icon_xy_chart.png XYChart element property to open this dialog. If the user is to be able to change the curve data at runtime, then you need to provide the appropriate visualization elements with a corresponding input configuration.

In the Control variables element property, you can enter application variables that can be used to zoom into the chart or pan the graph to another position. Based on this, you can set up an input option for the user in a corresponding visualization element at runtime.

Displaying data as a curve in the Cartesian coordinate system

Initial situation: A project is open. The application in it provides the array data PLC_PRG.DataX and PLC_PRG.DataY, which is to be displayed as a curve in the Cartesian coordinate system.

PROGRAM PLC_PRG
VAR
    DataX : ARRAY [1..200] OF REAL ;
    DataY : ARRAY [1..200] OF REAL ;
    xDoIt : BOOL := FALSE;
    ix : INT;
END_VAR
IF xDoIt THEN
    xDoIt := FALSE;
    FOR ix := 1 TO 200 BY 1 DO
        DataX[ix] := (ix * 0.2) + 0.1;
        DataY[ix] := (ix * 0.1);
    END_FOR
    xDoIt := TRUE;
END_IF
                    
Procedure. Configuring the Cartesian XY Chart element
  1. In the Devices view, add a visualization below the application. Assign the name VisMain to the visualization.

    The visualization editor is open.

  2. In the Visualization Toolbox view, select and drag the Cartesian XY Chart element to the editor.

  3. Select the new element and open its Properties view.

    _visu_img_new_xychart.png
  4. In the Cartesian XY Chart property, click the _visu_icon_xy_chart.png XYChart. value.

    The XY Chart Configuration dialog opens. All required settings are marked with the warning _visu_icon_warning_missing_settings.png symbol. The configuration tree shows the minimum configuration (a curve): Curve1[AxixY1] with AxisX(X) and AxisY1(Y).

  5. In the configuration tree, select Curve1.

    The respective graph settings are now visible to the right of the configuration tree.

  6. In the Data X, Variable setting, specify the one-dimensional variable with the horizontal data.

    PLC_PRG.DataX

  7. In the Data Y, Variable setting, specify the one-dimensional variable with the vertical data.

    PLC_PRG.DataY

    _visu_img_dlg_mini_xychart_configuration.png
  8. Compile, download, and start the application. Force the variable xDoIt to TRUE.

    The target visualization opens. Curve1 is displayed in the Cartesian coordinate system.

    _visu_img_mini_chart.png