Chart Container¶

The chart display will be used to display the values as a chart.

It displays a chart with the raw values or aggregate values of a node. Configure the node by using the display parameters (see parameter Series [1..15]) or by using the configuration dialog of the toolbar. The display can be used alone or combined together with the toolbar and / or the legend display.

Zoom and pan:

Zooming is performed by selecting the desired area with the left mouse button or by pinching with two fingers on touch devices. To reset the zoom factor press the "Reset zoom" button on the right top. During zooming the chart can be panned over the time axis by pressing shift + left mouse button or by touch gestures.

Measurement marker:

Up to two measurement markers can be activated via the toolbar or the display parameters. To view the measured values the legend is required.

Notifications:

On the occurrence of errors and warnings (e.g. data source not available) an according symbol appears in the right top corner. On click on this symbol a notification window with details is shown.

Hint

Aggregates are read from the archive(s) only once and the values will not be updated. If the option "non-stop" is activated, the last value is displayed in any case.

Triggers

Following triggers can be used for this object display:

com.atvise.highcharts.point.click – Allows to execute a function when clicking on a data point in the chart. In addition, the respective information of the data point is returned.

webMI.trigger.connect("com.atvise.highcharts.point.click", function (e) {

    var value = e.value;

    console.log(value);
    console.log(value.x, value.y);

});

Hint

Additional undocumented triggers are internally used by atvise. Their functionality may be changed in future atvise releases.

Parameters

The following common Parameters exists:

chart name – This is a unique name to identify the chart instance (default: trend1)
chart group – Multiple chart instances can be grouped (default: group1)
chart mode – Defines the data mode, possible values: mixed, live and history (default: mixed)
skip default modules – De-/activates the loading of default highcharts modules (default: false)
additional modules – Defines additional modules to be loaded. (Example: "highcharts/modules/exporting.js, highcharts/datasource/opcua.js, highcharts/atviseModules/datahandler.js, highcharts/atviseModules/measuringcursor.js, highcharts/atviseModules/utils.js, highcharts/atviseModules/downsample.js")
configuration node – Node (address) which contains the predefined configuration.
configuration filename – File which updates a predefined configuration when saving is set in the file system.
configuration name – Name of the predefined configuration.
saving method – Determines whether configurations are stored in node(s) or the file system (default: Multiple nodes)
compression – Determines whether the configuration data is compressed when it is saved (default: true)
datasource – Name of the data source module which will be loaded for data handling. atvise provides the modules opcUA and scope (for the Bachmann M1 controller, see Integrating Scope 3 into atvise for further information) by default. It is possible to create additional user-specific modules. (default: opcUA)
datasource options – Allows to defined additional options for the selected data source. If the scope module is selected, the IP address of the host must be defined as JSON string (e.g. {"host": "10.11.20.105"})
chart title – Title of the chart.
animations – Turns animations off (default) or on (default: false)
measurement cursor 1 – De-/activate measurement cursor 1 (default: false)
measurement cursor 2 – De-/activate measurement cursor 2 (default: false)
tooltip – Enable or disable tooltips (default: false)
export menu – Enable or disable export menu button (default: true)
local time – If true the chart uses the local time, if false it uses UTC (default: false)
enable boost – Enable or disable boost. If enabled, the enable downsampling parameter is ignored. If either the defined threshold of data points (boost points threshold) or series (boost series threshold) is reached, the data is rendered by WebGL.
enable downsampling – Enable or disable downsampling. This parameter is ignored if the enable boost parameter is activated. Downsampling can be used to get a performance boost, especially on low-end devices. It reduces the number of rendered data points depending on the currently displayed time range and the chart size. When using downsampling, only the min and max values of every sampling period (= displayed time range divided by chart width in pixels) are determined and displayed in the chart. The downsample sampling factor allows to increase the sampling period. Thus, fewer data points are rendered and shown in the chart. (default: true)

Performance:

update interval (ms) – Update interval of the chart (default: 50)
downsample sampling factor – Increases the sampling period for which the min and max values are determined. This means that fewer data points are rendered and shown in the chart. Only applied if downsampling is enabled. (default: 1)
boost points threshold – If the defined number of data points is reached, the data is rendered by WebGL. Set this threshold to 0 to enable only the series threshold. Only applied if boost mode is enabled. (default: 5000)
boost series threshold – If the defined number of series is reached, the data is rendered by WebGL. Set this threshold to 0 to enable only the points threshold. Only applied if boost mode is enabled. (default: 50)

Y-Axis <number>:

id – ID of the axis. Must contain at least one letter since assigning the axes may not work correctly in case of numeric-only IDs.
title – Title of the axis.
title color – Color of the axis title.
visibility – Defines the visibility of the axis (default: true)
minimum – Lower threshold at which the data is displayed.
maximum – Upper threshold to which the data is displayed.
axis line width – Represented line weight of the axis (in pixels) (default: 0)
axis color – Represented color of the axis. (default: #ccd6eb)
axis position – Position of the axis (left / right) (default: left)
axis label – Display of the axis label (true / false) (default: true)
axis label alignment – Horizontal alignment of the axis label (left, center or right). This parameter should be set depending on the axis position, e.g. axis position = left, axis label alignment = right or center; axis position = right, axis label alignment = left or center. See highcharts API - yAxis.labels.reserveSpace for a more detailed description of label alignment (default: right)
axis label format – Defines a format string for the axis label (see highcharts API reference). E.g.: {value:.2f} mm shows only 2 decimal places and adds "mm" as unit in the axis label (default: {value})
axis label color – Color of the axis label.
axis label X offset – Defines the horizontal offset of the axis label (in pixels). This parameter should be set depending on the axis position, e.g. 15 if axis position = right or -15 if axis position = left.
crosshair enabled – Enabling the display of the crosshair (true, false) (default: false)
crosshair snap – Activates the snap of the crosshair (default: true)
crosshair width – Line width of the crosshairs (in pixels).
crosshair color – Color of the crosshair (hex code).
crosshair type – Used line type of crosshair (default: Solid)
tick interval – Interval of the main grid for orientation.
minor tick interval – Interval of the auxiliary grid for orientation aid.
grid width – Line weight of the main grid lines (in pixels) (default: 1)
grid color – Color of the main grid lines (default: #e6e6e6).
minor grid width – Line width of the auxiliary grid lines (in pixels) (default: 1)
minor grid color – Color of the auxiliary grid lines (default: #f2f2f2)

X-Axis:

title – Title of the axis.
title color – Color of the axis title.
timespan – Value of the time span to be displayed (without unit) (default: 60)
timespan unit – Unit of time to be displayed (default: second(s))
axis line width – Represented line weight of the axis (in pixels) (default: 1)
axis color – Represented color of the axis. (default: #ccd6eb)
axis position – Position of the axis (top / bottom) (default: bottom)
axis label – Display of the axis label (true / false).(Default: true)
axis label alignment – Horizontal alignment of the axis label (left, center or right).
axis label color – Color of the axis label.
crosshair enabled – Enabling the display of the crosshair (true, false) (default: false)
crosshair snap – Activate the snap of the crosshair (default: false)
crosshair width – Line width of the crosshairs (in pixels).
crosshair color – Color of the crosshair (hex code).
crosshair type – Used line type of crosshair (default: Solid)
xAxis type – Type of axis scaling. (default: datetime)
date time format – Format of the date output. (default: "% H:% M:% S")
tick interval – Interval of the main grid (in milliseconds) for orientation. If not defined, the interval is automatically set to a quarter of the defined timespan above. (default: 10000)
minor tick interval – Interval of the auxiliary grid for orientation aid.
grid line width – Line weight of the main grid lines (in pixels) (default: 1)
grid line color – Color of the main grid lines. (default: #e6e6e6)
minor grid width – Line width of the auxiliary grid lines (in pixels) (default: 1)
minor grid color – Color of the auxiliary grid lines. (default: #f2f2f2)

Series <number> (data set):

address – Node address of the value to be displayed.
interpolation – Interpolation of values (line, spline, step) (default: line)
name – Name of the series.
data archive – Name of archive that will be used for displaying historical values (default: ""). This parameter is optional and particularly relevant for Portal users and custom WebMI implementations, using more more than one data archive.
line width – Line width for displaying the values (in pixels) (default: 2)
color – Color for the representation of the values (default: #ccd6eb (1), #7cb5ec (2), #434348 (3), #90ed7d (4), #f7a35c (5), #8085e9 (6), #f15c80 (7), #e4d354 (8), #2b908f (9), #90ed7d (10-15)).
dash style – Line type for the representation of the values (default: Solid)
marker – Activate data point markers (default: true)
visibility – Visibility of the presentation at the initialization of the chart (default: true)
nonstop – Continuous presentation of missing values (default: true)
aggregate – Filter for aggregates of the specified address.
aggregate interval – Interval of the aggregate.
aggregate unit – Unit of aggregate.
x-axis – ID of the assigned x-axis.
y-axis – ID of the assigned y-axis.
value prefix – Adds prefix at the beginning of the shown value in the tooltip and legend.
value decimal places – Defines the displayed decimal places in the tooltip and legend.
value suffix – Adds suffix at the end of the shown value in the tooltip and legend.
exponential – If enabled, the values of this data set in the tooltip and legend are displayed in exponential notation. The number of displayed decimal places also affects the represented value.

Security: export menu

necessary right – The right needed for being able to export.
activation address – If the value of this address equals to "activation value", then the function will be active.
activation value – Value which activates the function.

Options:

zoom type – The zoom behavior (x axis, y axis or xy axis) when an area in the highchart is selected via left mouse click (default: x axis)
y-axis tick auto alignment – This option allows to align the ticks of several y-axes to improve the clarity of the chart (default: false)
exporting date format – Defines the date format that is used when exporting data to a CSV or an XLSX file. If empty (default), the default format of the used highcharts version is applied. See highcharts API reference - exporting.csv.dateFormat for more information on the format.

Export menu:

menu button line color – Color of the lines of the menu button (default: #676767)
menu button background color – Background color of the menu button (default: #ffffff)
menu button hover color – Background color of the menu button on mouseover (default: #e6e6e6)
menu button selected color – Background color of the menu button when clicked (default: #e6e6e6)
menu text color – Text color of the menu entries (default: #000000)
menu background color – Background color of the context menu (default: #ffffff)
menu hover text color – Text color of the menu entries on mouseover (default: #eeeeee)
menu hover background color – Background color of the menu entries on mouseover (default: #676767)

Example

Create an empty display and add this display by drag & drop. Set the desired addresses that should be displayed in the chart.

This display can be used stand alone with given parameters or together with toolbar and / or legend display, therefore the parameter "chartname" must be unique and equal on all trend displays that are in use.