Configuration

The Trend Line Chart control is located in the Toolbox under the category Beckhoff, from where you can insert it into an HMI page by drag and drop.

Configuration 1:

The control offers various configuration options in the engineering and during the runtime in the browser.

Detailed view

If the live view in the Trend Line Chart has been paused, you can view individual data points with the aid of the zoom functions. Hovering with the mouse over a data point will bring up a display of detailed information on the time and data point.

Configuration 2:

Configuring axes

If you wish to display a historized symbol in the Trend Line Chart you must first carry out a Y-axis configuration for the symbol.
1. Select the control and open the Properties window,
2. where you select the property Y Axis under the category Y Axis.
An editor then opens that enables the configuration of a Y-axis as well as the addition of further axes.
3. Configure the axis according to the settings that you need for the historized symbol (e.g. min. and max value on the Y-axis).
Configuration 3:
4. Then confirm the dialog with OK.
5. Open the Descriptions of the chart (LineGraphDescriptions) under the Common category in the Properties window, where the configured Y-axes are linked with the historized symbols.
6. Add a new description and select the historized symbol as well as the associated Y-axis.
The available historized symbols or Y-axes respectively are displayed in the comboboxes.
Configuration 4:
7. Confirm the dialog with OK.
You can then start the LiveView or publish the project on a server and view the historized symbol in the chart.

Configuring the interval time

You can configure the update rate of the control in the Trend Line Chart control. The update rate can be found under the entry Interval in the category Common. The update rate is specified in milliseconds.

Configuration 5:
Configuration 6:

If you have a historized symbol with an update rate of 100 ms, you should also set the update rate of the control to 100 ms, as otherwise the control will be updated, for example, at 1-second intervals, even though your data are already available every 100 ms.

Configuring the time period

The start and end times of the historized data displayed can be configured in the Properties window of the control. The times can be specified as timespan, point in time or "First" or "Latest" respectively.

Configuration 7:

In addition, it is possible to set the start and end times of the historized data displayed in the browser for each client (see menu bar).

Configuration 8:

Menu bar

The Trend Line Chart control has a menu bar that can optionally be displayed under the properties of the control (ShowMenuBar in the category MenuBar). The menu bar enables the analysis of the data at runtime in the browser:

Configuration 9:
  1. Start: Start time of the historized data displayed (First for the beginning of the recording).
  2. Select timespan: Select the timespan for the start (e.g. two minutes before the last value).
  3. Select point in time: Select point in time for the start (e.g. 6/16/2018 at 5:53 pm).
  4. End: End time of the displayed historicized data (Latest for the last recorded value).
  5. Select timespan: Select the timespan for the end.
  6. Select point in time: Select a point in time for the end.
  7. Start live view: The live view can be started after pausing the live view.
  8. Pause live view: The live view can be paused to view data points in greater detail.
  9. hift data on the X-axis: The data displayed can be shifted on the X-axis if the live view has been paused.
  10. Shift data on the X and Y-axes: The data displayed can be shifted on all axes if the live view has been paused.
  11. Zoom X-axis: When this button has been activated you can zoom in on the X-axis with the aid of the mouse.
  12. Zoom X-Y-axis:: When this button has been activated you can zoom in on both axis equally with the aid of the mouse.
  13. Reset Zoom: This button resets all zoom settings.

Further configuration options

Further configuration options for the Trend Line Chart control can be found under Trend Line Chart.

Example

An example of the use of the historized symbols in interaction with the Trend Line Chart control: Example.
The example shows two historized symbols (the associated TwinCAT project is included) and the associated configuration in the Trend Line Chart control.