Trend Card

Use the trend card to create and display trend charts in your application.

A trend card widget allows you to plot real time data from OPC UA servers and historical data from Historian servers. You can plot the data using the context of a model or browse for a Historian or OPC UA server. You can then add tags to the chart. The model contains asset types and assets. The assets have properties associated with them, which are, in turn, associated with tags defined in Historian or OPC UA.
  1. Drag and drop the trend card plug-in on a page. The trend card is available under Integration > General.
  2. Configure the trend card properties (see table below) to process the data and generate trend charts for runtime.
  3. In the runtime environment, you can customize the trend charts to suit individual preferences or requirements. See Customize a Trend Chart at Runtime.
  4. To learn how to work with trend charts, refer to Trend Chart Functions.

Trend Card Properties

The following table describes the configurable properties that help to tailor the chart to your specific needs and requirements.
Field Name Description
Asset Name (Optional Override) Select an asset name.
Select Favorite With this property, you can configure the trend chart to load an existing favorite at runtime.

To use this property along with the Favorite Organizer widget, configure the Target Output Selection global with an Output Format of Favorite Name, then bind the output of favorite organizer widget to this property in order to drive the trend chart via favorite.

Trend Tags Input Select your string type global that contains a list of tags separated by commas that you wish to trend with a page load.

Example:

dd-historian://${Ryder-HIST}/Ryder_Simulation.Simulation00001, Historian tag: dd-historian://${Ryder-HIST}/Ryder_Simulation.Simulation00002, dd-historian://${Ryder-HIST}/FIX.COMP_001_AVERAGE_VIBRATION.F_CV, dd-opcua://${WEBHMI}/ns%3D3%3bs%3DANIMATIONTAG.Value, dd-opcua://${Ryder-FIX}/ns%3D2%3bs%3D13%24COMP_001_DISCHARGE_PRESSURE.CV

Trend Config Input/Output The input or output of this property is a string representation of the configuration of the currently trending chart. This contains all of the data that is saved as part of a favorite, such as trend mode (realtime/historical), time settings, selected tags, etc.
  • Trend Type - Input/Output
  • Realtime Duration - Input/Output
  • Realtime Duration - Input/Output
  • Historical End Time - Input/Output
  • Historical Duration - Input/Output
For the Input properties, you can enter values manually or use global variables. These values will be used to create a trend chart at runtime.

For Output properties, you can select a global variable to store the values generated by the trend chart. These global variables can then be used as inputs for other trends, such as, synchronizing time ranges, trend types, etc., across multiple trend plug-ins).

  • Trend Type Input/Outputs: Valid parameters are 'realtime' or 'historical' for the mode you want to visualize.
  • Realtime or Historical Duration Input/Outputs are in units of seconds.
  • Historical End Time Inputs/Outputs are in local time. Example: 2024-04-01 08:40:23
Default Sampling Mode Select a sampling mode. This mode is set as default when displaying historical data on Live and Historical trends at runtime.

If you don't select a mode, the default sampling mode is 'Interpolated', which means that if there are missing data points, the trend chart estimates and fills in those gaps based on the already available data points.

Height Set the height of the trend chart.
Stacked Height Set the height of an individual trend chart in a stack. This property applies when you opt for a stacked Y-axis mode for the trend chart.
Tabular View Height Set the height of the table. This property applies when you opt for a tabular view mode for the trend chart.
Chart Title Provide a title name for the trend chart. The value must be a text string.
X-Axis Label Provide a label name for the x-axis. The value must be a text string.
Y-Axis Label Provide a label name for the y-axis. The value must be a text string. Depending on the plotted data, the y-axis label is displayed either on the left or right side of the chart.

The label name appears on the y-axis only if you opted for a single y-axis configuration.

Historian Tag Page Size Paginates large tag lists from Historian.
Show Header Controls Specify a boolean value. True shows chart header controls. False hides chart header controls.
Show Trend Value Axes Specify minimum and maximum axis values for the trend chart.
Show Trend Legend Select to show legend on a trend chart.
Show Favorites Select to show favorites on a trend chart.
Scroll Percentage Configure the scroll percentage based on the total time range.
Historical Time Selection Mode
  • Start Time + Duration: With this option, you can select a start time and a duration for which you want to view data. Example: View data for the past 7 days starting from a specific date and time.
  • Start Time + End Time: With this option, you can select a start time and an end time for which you want to view data. Example: View data for a specific month of the year by selecting the start and end dates of that month.
  • Duration + End Time: With this option, you can select a duration and an end time for which you want to view data. Example: View data for the last 30 days up until a specific date and time.
Background Color Adds a background color to the trend chart.
Tooltip Type By default, all tooltips are of shared type. You can choose to display any of these tooltip types on your trend card:
  • Shared: Displays a single value for a specific point in time and is shared across all data series.
  • Single: Displays a single value for a specific point in time and is specific to each data series.
  • Split: Displays multiple values for a specific point in time and is specific to each data series.
Tooltip Opacity (0-100%) Enter the opacity percentage for the tooltip. If 100%, you will not be able to see the data behind the tooltip. By lowering the percentage, you can make the tooltip background transparent.
Legend Position Determines the placement of the chart's legend:
  • Right: Legend is placed on the right-hand side of the trend chart.
  • Bottom: Legend is placed at the bottom of the chart.
Enable Compact View Mode
Show Border Select the check box to add a border to the trend chart.
Border Color If you choose to add a border, then set a color for the border.
Logging Level Applies to log messages. You can control the level of data logged to the browser console. The default value is info. Other valid values are step, trace, debug, warning, error, and none.
LoggedIn Username A default user name, which is used to add annotations in the trend chart.
Enable Compact View Mode Select the check box to allow for a maximized chart area. This is a view-only mode. You cannot pan across the chart in this mode. You can hide the toolbar and legend.