Interaction Properties
The Interaction property is an object containing properties to configure how a user interacts with the chart, including its menu, legend, and interaction modes.
| Name |
Description |
Property Type |
| mode |
Determines which additional chart functionality is enabled. At most one mode may be selected at a time. |
Mode |
| menu |
Properties for the cog icon menu. |
Menu |
| resetZoom |
|
|
| playPause |
Allows the user to play/pause the chart scrolling. |
playPause |
| export |
|
|
| rangeBrush |
Enables the drawing of rectangular ranges on the graph. |
Range Brush |
| xtrace |
Enables mouse coordinate information when hovered over and the placement of labels with information regarding each pen at a chosen x coordinate. |
X Trace |
| measurement |
Allows the user to draw lines and view their slope and length. The user may also select and highlight the specific axes that they wish to calculate a slope and length on. |
Slope |
| zoomToArea |
Allows the user to draw a rectangular area to zoom in to. |
Zoom to Area |
| panAndZoom |
Enables click-and-drag panning as well as pinch-zooming. |
Pan and Zoom |
| mouseWheelZoom |
Allows the user to use the mouse wheel to zoom in and out. |
Mouse Wheel Zoom |
| overview |
|
Overview |
| annotation |
Allows the user to add custom annotation to the chart. |
Annotation
|
ADD GRAPHIC SHOWING THE ANNOTATION????
Mode
The mode enumeration determines which interaction mode is active. The interaction menu sets this property on each mode button click. The user may choose to hide the interaction menu and script the change of this property instead.
Can be one of:
- None
- PanZoom
- Slope
- XTrace
- RangeBrush
- Annotate
- ZoomToArea
Object containing properties for the cog icon menu.
| Name |
Description |
Property Type |
| visible |
Toggles visibility of the menu |
Boolean |
PlayPause
Object containing properties for the play/pause button.
| Name |
Description |
Property Type |
| visible |
Toggles the visibility of the play/pause button |
Boolean |
Download as SVG, PNG
Allows the user to download an image of the chart as an SVG file.
RangeBrush
Object containing properties for the rangeBrush mode
| Name |
Description |
Property Type |
| visible |
Toggles the visibility of the range brush mode button in the menu. |
Boolean |
| maxInstances |
The maximum number of concurrent ranges. When this number is exceeded, the oldest ranges are deleted first. |
Integer |
| brush |
Object containing properties for the appearance of ranges. |
Brush |
| ranges |
An array of 2-element arrays containing x values representing each range. |
Range[] |
Brush
| Name |
Description |
Property Type |
| fill |
The color of the interior of ranges. |
Color |
| stroke |
The color of the stroke (outline) of ranges. |
Color |
| thickness |
The thickness of the outline of ranges. |
Integer |
| opacity |
The opacity of ranges (1: opaque, 0: invisible). |
Float |
Ranges
Range properties are stored on a per-axis basis as an array of property objects.
| Name |
Description |
Property Type |
| xAxis |
The x axis that this range is located on. |
String |
| start |
The x coordinate of the leftmost side of the range. |
Integer |
| end |
The x coordinate of the rightmost side of the range. |
Integer |
XTrace
Object containing properties for the xTrace mode.
| Name |
Description |
Property Type |
| visible |
Toggles the visibility of the xTrace mode button in the menu. |
Boolean |
| showToolTip |
Toggles the visibility of the tooltip that follows the cursor. |
Boolean |
| showAxisLabels |
Toggles the visibility of the coordinate labels following the cursor along the axis. |
Boolean |
| showXLine |
Toggles the visibility of the vertical line showing the x coordinate of the mouse. |
Boolean |
| showYLine |
Toggles the visibility of the horizontal line showing the y coordinates of the mouse. |
Boolean |
| maxInstances |
The maximum number of x-traces allowed on the chart. When this number is exceeded, the oldest traces are removed first. |
Integer |
| trace |
Object containing properties for the appearance of all xTrace functionality. |
Trace |
Trace
| Name |
Description |
Property Type |
| stroke |
The color of the outline of the lines representing the coordinates of the mouse, as well as the text within the tooltip and within the axes labels. |
Color |
| thickness |
The thickness of the lines representing the coordinates of the mouse. |
Integer |
| lineDash |
An array holding numeric values representing line dashing. Add an even amount of numbers to the array to create a repeating pattern. |
Array |
| fill |
The color of the fill of the lines representing the coordinates of the mouse. |
Color |
| font |
The font for all text present in xTrace mode. |
Font |
| fontSize |
The size of all text present in xTrace mode. |
Float |
Slope
Object containing properties for the slope mode.
| Name |
Description |
Property Type |
| visible |
Toggles the visibility of the slope mode button in the menu. |
Boolean |
| maxInstances |
The maximum number of concurrent lines allowed. When this number is exceeded, the oldest lines will be removed first. |
Integer |
| line |
Object containing properties for the appearance of all slope mode lines. |
Line |
| label |
Object containing properties for the appearance of all slope mode line labels. |
Label |
| axisHighlight |
Object containing properties for the appearance of highlights applied to each axis when selected. |
AxisHighlight |
Line
| Name |
Description |
Property Type |
| stroke |
The color of the outline of slope mode lines. |
Color |
| thickness |
The thickness of slope mode lines. |
Integer |
| lineDash |
An array holding numeric values representing line dashing. Enter an even amount of numbers to create a recurring pattern. |
Array |
| opacity |
The opacity of slope mode lines (1: opaque, 0: invisible). |
Integer |
Label
| Name |
Description |
Property Type |
| stroke |
The color of the outline of the line label. |
Color |
| fill |
The color of the interior of the line label. |
Color |
| fontFamily |
The font family of the text in the line label. |
String |
| fontSize |
The size of the text in the line label. |
Float |
AxisHighlight
| Name |
Description |
Property Type |
| fill |
The color of the axis highlight interior. |
Color |
| stroke |
The color of the axis highlight outline. |
Color |
| thickness |
The thickness of axis highlight outline. |
Integer |
Finding the slope between 2 points on the chart is easy using the slope mode.
ZoomToArea
Object containing properties for the zoomToArea mode.
| Name |
Description |
Property Type |
| visible |
Toggles the visibility of the zoomToArea mode button in the menu. |
Boolean |
| animated |
Toggles whether the zoom includes a gradual animation or immediately snaps to the area. |
Boolean |
PanAndZoom
Object containing properties for mouse/touch panning and pinch-zooming.
| Name |
Description |
Property Type |
| visible |
Toggles the visibility for the zoomPan mode button. |
Boolean |
| pinchZoom |
Object containing properties for pinch-zooming. |
PinchZoom |
| zoomPan |
Object containing properties for panning. |
ZoomPan |
| xAxisDrag |
Object containing properties for dragging on x axes. |
xAxisDrag |
| yAxisDrag |
Object containing properties for dragging on y axes. |
yAxisDrag |
| zoomExtents |
Object containing properties |
Object |
| enabled |
Determines whether zoom extents are enabled |
Boolean |
xAxisDrag
| Name |
Description |
Property Type |
| enabled |
Toggles dragging functionality on all x axes. If this is enabled, the user may drag on the x axes to select a range to zoom in on horizontally. |
Boolean |
yAxisDrag
| Name |
Description |
Property Type |
| enabled |
Toggles dragging functionality on all y axes. If this is enabled, the user may drag on the y axes to select a range to zoom in on vertically. |
Boolean |
ZoomPan
| Name |
Description |
Property Type |
| enabled |
Toggles panning functionality |
Boolean |
| axes |
Object containing all axes with zoomPan functionality enabled. |
Axes |
| executeOn |
The input that triggers panning |
Enum (add ref) |
| xyDirection |
Object containing properties that allow panning and zooming to be limited by the x or y axes. |
xyDirection |
⮱ZoomPan.PinchZoom
| Name |
Description |
Property Type |
Default Value |
| enabled |
Toggles pinch-zooming functionality. |
Boolean |
true |
| horizontalGrowthFactor |
Affects the horizontal pinch-zooming rate. |
Float |
1 |
| verticalGrowthFactor |
Affects the vertical pinch-zooming rate. |
Float |
1 |
⮱ZoomPan.axes
If the axes prop is left empty, Ignition will behave as though it contains all axes, and chart panning will be fully enabled.
| Name |
Description |
Property Type |
| x |
All x axes on which chart panning is enabled. |
Array |
| y |
All y axes on which chart panning is enabled. |
Array |
ZoomPan.xyDirection
| Name |
Description |
Property Type |
| xDirection |
Allows chart panning only on x axes. |
String |
| yDirection |
Allows chart panning only on y axes. |
String |
| xyDirection |
Allows free chart panning on both x and y axes. |
String |
MouseWheelZoom
Object containing properties for mouse wheel zooming.
| Name |
Description |
Property Type |
Default |
| enabled |
Determines whether mouse wheel zooming is enabled. |
Boolean |
true |
| growFactor |
Determines the rate of mouse wheel zooming (Should be set to a small number). |
Float |
0.001 |
| axes |
An object containing all axes with mouse wheel zooming functionality enabled. |
Axes |
{} |
Axes
| Name |
Description |
Property Type |
| x |
All x axes with mouse wheel zooming enabled. |
Array |
| y |
All y axes with mouse wheel zooming enabled. |
Array |
Overview
| Name |
Description |
Property Type |
| overview |
Object containing basic properties |
Object |
| visible |
Determines visibility |
Boolean |
| height |
??? |
Integer |
| axes |
??? |
Object |
| x |
|
Array |
| y |
|
Array |
Annotation
| Name |
Description |
Property Type |
| annotation |
Sets the annotation properties |
Object |
