dl-breadcrumbs__homedl-breadcrumb-item__separatorConfiguration and programmingdl-breadcrumb-item__separatorProgramming with CODESYSdl-breadcrumb-item__separator...dl-breadcrumb-item__separatorCODESYS Visualizationdl-breadcrumb-item__separatorTutorialdl-breadcrumb-item__separatorDisplaying Array Data in a Histogram
dl-pagination__prev-inactivedl-pagination__prev-activedl-pagination__next-inactivedl-pagination__next-active
Displaying Array Data in a Histogramdl-permalink__symbolPermalink

Setting element properties for the histogram

Requirements

  • A project contains a visualization object and a program.

  • A one-dimensional array is declared in the program (example: ‎histogram : ARRAY[1...10] OF INT;‎).

  • In the program, ‎histogram‎ data is assigned to the array (example: within the range from ‎0‎ to ‎50‎).

  1. Double-click the “Visualization” object in the device tree.

  2. In the “Visualization Toolbox” view, click “Measurement Controls” and drag the “Histogram” element to the visualization editor.

  3. In the visualization editor, click the inserted “Histogram”.

    The “Properties” view opens.

  4. In the “Properties” view, double-click the “Value” input field in the “Data array” element property. Then click _visu_icon_open_input_assistant.

  5. In the “Input Assistant” dialog in the “Variables” category of the “PLC (PRG)” program, select the array (example here: ‎histogram : ARRAY[1..10] OF INT;‎) and click “OK”.

  6. To display only part of the array as a histogram, activate the “Use subrange” option and specify the index values of the array in “Start index” and “End index” to define the subrange.

  7. Select the “Display type” (example: “Bar”).

  8. Specify a value between ‎1‎ and ‎100‎ (example: ‎30‎) for the “Relative bar width”.

  9. Click the histogram in the visualization editor and change the size and position as desired.

    The “Position” property changes its values accordingly.

  10. Specify the values for the “Scale” element property. Select the values for “Scale start” and “Scale end” so that the array is displayed completely. For the example: “Scale start” ‎0‎, “Scale end” ‎50‎.

    For the distance between values on the main scale, specify the value ‎10‎, for example, in “Main scale”.

  11. In the “Label” element property, specify the “Unit” for the display values.

  12. Click “Build  Generate Code”.

  13. If the project has been compiled without errors, then click “Online  Login” and click “Debug  Start” to start the application.

    The histogram is displayed in the visualization as follows:

    _visu_img_histogram_example

Defining alarm colors for the histogram

The visualization displays a histogram with bars all the same color (example: green). Now you want the bars with values less than ‎30‎, for example, to be displayed in another color (example: red).

  1. Click the element property “Colors  Alarm color”.

  2. Specify the limiting value in “Alarm value” above or below which the bars should be displayed in another color.

  3. Select “More” from the list box in “Alarm condition” if all values greater than the “Alarm value” should be displayed in another color. Otherwise, select “Less”.

  4. Select an “Alarm color” (example: “Red”).

  5. Click “Build  Generate Code”.

  6. If the project has been compiled without errors, then click “Online  Login” and click “Debug  Start” to start the application.

    In the example histogram, all bars with values greater than ‎30‎ are displayed in red.

    _visu_img_histogram_alarm