Trends (Line Trend Viewer)

Overview

The Trend Viewer is a powerful UI element used to visualize live data or historical time-series values. It is ideal for monitoring processes, comparing measurements over time, and exporting evaluations.

Note: The writing of values (i.e., logging to a database) is done externally—typically in CODESYS using a provided library.
The reading and visualization happens client-side within the HMI using PLCVisu.

Key Features

Display of real-time or logged data
Zooming & scrolling across time periods
Support for multiple datasets and Y-axes
Export options for current view or full dataset

Note: "Trends" appear in two places:
As a UI element in Pages (to display existing trend views), and as a dedicated section in the sidebar menu (Burger menu → Trends).
Only via the sidebar can you fully configure a trend, connect it to a database, and adjust all settings.
In Pages, you can only select and display a preconfigured trend.

UI Sections & Configuration

General

Field	Description
Name	Internal name of the trend element
Label	Optional display label; supports tokens like [code_block_0]
Show Lines	Toggle the graph lines on or off
Show Labels	Toggle numeric labels on data points

X-Axis

Field	Description
X-Axis Label	Label for the horizontal axis
X-Axis Format	Format of the time values: - Unix Timestamp (raw) - Human readable (e.g. 12:45 PM)

Option	Function
Interval Picker	Allows users to choose a time range (live, last hour, custom)
Export Current View	Exports only the visible time range
Export Full Data	Exports the entire dataset
Configure Datasets	Allows enabling/disabling individual datasets
Reset Button	Resets zoom, axes, and dataset visibility

Interpolation

Field	Description
Active	Enables interpolation
Max Points	Maximum number of interpolated data points
Interpolation Type	Selectable interpolation algorithm: – Quick Reduce – Reduce – Local Extremes – Average – Median

Other Options

Option	Function
Legend	Displays a legend with dataset names
Tooltips	Enables value display on hover or touch
Extended Touch Features	Enables advanced touch interactions
Zoom	Allows zooming and panning in the graph

Y-Axes

Multiple Y-axes can be defined
Each axis includes:
- Name, Label
- Color
- Min / Max Range
- Position (left or right)
- Measurement Type & Display Unit

Datasets

Each dataset is an individual data signal to be visualized.
Dataset properties include:
- Name, Label
- Color
- Linked Y-Axis
- Measurement Type
- Base Unit
- Visibility
- Enabled (✓)

Practical Use Cases

1. Live Machine Monitoring

Display key performance metrics from machines or sensors in real time.

Example: Motor speed (RPM), temperature, torque
Data source: Live PLC values (e.g. via CODESYS + PLCVisu library)

2. Environmental Logging

Visualize and export long-term sensor trends (e.g., from building automation or IoT).

Example: Room temperature, CO₂ levels, humidity
Data source: Logged historical data in a database

3. Process Quality Evaluation

Monitor thresholds and limits over time for process optimization or safety analysis.

Example: Batch process pressure curve with max/min tolerance bands
Combine with alarm thresholds via visual cues

Data Flow Logic

Data Logging

Not handled by the HMI directly
Requires setup in CODESYS, Node-RED, or another backend system
PLCVisu provides libraries to assist in pushing values into a database

Data Reading (Visualization)

HMI loads and displays values dynamically
X-axis timestamps must match the format expected (Unix or Human readable)
Datasets can be toggled or filtered using UI controls

Tips for Best Use

Use interpolation when displaying a large amount of data over long timeframes
Set consistent colors and axis labels across trends for clarity
Export trends regularly for documentation or traceability

Limitations

Requires external system to log data to a database
High-frequency live updates may impact UI performance on low-end hardware
Interpolation simplifies data but may smooth out important spikes

Pages