Name | Description | Property Type |
---|
config | Configuration for the data feeding the chart. Click here for the config properties Name | Description | Property Type |
---|
penNamePathDepth |
The following feature is new in Ignition version 8.1.24
Click here to check out the other new features
This value will set the depth of the tag path to include in the pen name. Using the Sample Quick Start project as an example, the realistic0 Tag has a parent folder of realistic and a grandparent folder of sample-tags. So the pen name in the Power Chart will be realistic0 if the penNamePathDepth is set to 1, which is the default value. If the penNamePathDepth is set to 3, the pen name in the Power Chart would be sample_tags/realistic/realistic1. You can also add new Tags with path depth values that differ from existing Tags if needed for your project. | value: numeric | tagBrowserStartPath | A path to a nested Tag History provider structure from which browsing will start. The path is expected to contain key-value pairs separated by ":/" characters. Example:
histprov:Sample_SQLite_Database:/drv:My_Gateway:My_Tag_Provider:/tag:My_Folder/Another_Folder
- histprov - The name of the Tag Historian Provider
- drv - The historian driver, which is typically a combination of a gateway name and tag provider name separated by a colon. Example:
gateway:tagProvider - tag - A path to a node that has children. Typically should lead to either a folder or the root node of a UDT instance. If omitted, then the path will lead to the root of the drv,
While providing a path to this property, the tag component can be omitted, which will set the starting path for the Tag Browser panel to the root of a particular driver. For example:
histprov:Sample_SQLite_Database:/drv:My_Gateway:My_Tag_Provider:/
| value: string | mode | The type of query that is being made against the data source. Options are realtime or historical. | value: string | refreshRate | Duration (in milliseconds) that data will be queried for updated results. (realtime mode only) | value: numeric | pointCount | Number of data points returned for the selected time range.
Note: Changing the pointCount property's value to -1 will retrieve pen data points as it is stored in the database. In other words, this is the same as setting a Tag History binding's Query Mode to "AsStored". While querying data with this mode, multiple value changes at the same timestamp will result in multiple rows, one row for each unique value.
| value: numeric | startDate | Start date for a historical data query. (historical mode only) | value: string | endDate | End date for a historical data query. (historical mode only) | value: string | dateFormat | The date format displayed when in historical mode using a MomentJS date string (https://momentjs.com). (historical mode only) | value: string | timeFormat | The time format displayed when in historical mode using using a MomentJS time string (https://momentjs.com). (historical mode only) | value: string | rangeSelectorPen | The pen that will drive the data display of the range selector. (historical mode only) | value: string | unitOfTime | Time unit used for a realtime data query. (realtime mode only) | value: numeric | measureOfTime | Time measurement used for a realtime data query. Options are seconds, minutes, hours, days, weeks, months, or years. (realtime mode only) | value: string | rangeStartDate | Start date for the modified chart data range that the user has selected, either with the range brush or by panning/zooming. Read-only. | value: date | rangeEndDate | End date for the modified chart data range that the user has selected either with the range brush or by panning/zooming. Read-only. | value: date | responsiveDesignWidth | A number (in pixels) that will be used as the switch over width to the responsive design for the chart so it fits better on mobile devices. The mobile breakpoint is 750px, and is configurable. | value: numeric | visibility |
The following feature is new in Ignition version 8.1.2
Click here to check out the other new features
Settings to show/hide elements within the component interface. Click here for the visibility properties... Name | Description | Property Type |
---|
showTagBrowser | Flag representing the visible state of the Tag Browser. Toggling this property will show or hide the Tag Browser. | value: boolean | showDateRangeSelector | Flag representing the visible state of the Date Range Selector. Toggling this property will show or hide the Date Range Selector. | value: boolean | showPenControlDisplay | Flag representing the visible state of the Pen Control display. Toggling this property will show or hide the Pen Control display. | value: boolean | buttons | Settings to show/hide the buttons used in the interface Click here to see buttons properties... Name | Description | Property Type |
---|
showTagBrowserButton | Flag representing the visible state of the "Open Tag Browser" and "Close Tag Browser" buttons. | value: boolean | showPanZoomButton | Flag representing the visible state of the "Pan/Zoom" toggle button. | value: boolean | showXTraceButton | Flag representing the visible state of the "X Trace" toggle button. | value: boolean | showRangeBrushButton | Flag representing the visible state of the "Range Brush" toggle button. | value: boolean | showAnnotationButton | Flag representing the visible state of the "Annotation" toggle button. | value: boolean | showFullscreenButton | Flag representing the visible state of the "Fullscreen" toggle button. | value: boolean | showSettingsButton | Flag representing the visible state of the "Settings" toggle button. | value: boolean | showMoreButton | Flag representing the visible state of the "Show More" toggle button. | value: boolean |
| object |
| object | export |
The following feature is new in Ignition version 8.1.2
Click here to check out the other new features
Settings to control the format of data exported from the chart via the More button's "Export" option. Click here for the export properties... Name | Description | Property Type |
---|
dateFormat | The date format of the exported data. See https://numeraljs.com for formats. | value: string | timeFormat | The time format of the exported data. See https://momentjs.com for formats. | value: string |
| object |
| object |
interaction | Configuration for the presentation of, and interaction with, chart data. Name | Description | Property Type |
---|
mode | Current user interaction mode of the chart. Options are panAndZoom, xTrace, rangeBrush, or annotation. panAndZoom | Configuration settings for the chart in panAndZoom mode. Click here to see the panAndZoom properties Name | Description | Property Type |
---|
freeRange |
The following feature is new in Ignition version 8.1.18
Click here to check out the other new features
When enabled, this setting allows panning and zooming to dictate the time range used for the chart display. | value: boolean |
| object | xTrace | Configuration settings for the chart in xTrace mode. Click here to see the xTrace properties Name | Description | Property Type |
---|
values | An array of read-only timestamp values representing the visible x-trace positions. | array | infoBox | Configuration to build the box portion of the x-trace display. Click here to see the infoBox properties Name | Description | Property Type |
---|
visible | Whether or not the box is visible. | value: boolean | showTime | Whether or not the time value above the box is visible. | value: boolean | width | The width of the box. | value: numeric | dataFormat | A numeral.js data format for displaying the data for this axis. See https://numeraljs.com for formats.
The following feature is new in Ignition version 8.1.2
Click here to check out the other new features
As of Ignition 8.1.2, setting the dataFormat property to an empty string will result in no formatting being applied to the value. Useful in cases where a binding is returning the data in a preformatted state. | value:string | dateFormat | The date format displayed when in historical mode using a MomentJS date string (https://momentjs.com). | value: string | timeFormat | The time format displayed when in historical mode using using a MomentJS time string (https://momentjs.com). | value: string | stroke | A configuration object describing the properties that will be applied to the stroke of the box. Name | Description | Property Type |
---|
color | The color to apply to the line stroke, if applicable. | color | width | The width to apply to the line stroke, if applicable. | value: numeric | opacity | The opacity to apply to the line stroke, if applicable. | value: numeric | dashArray | The spacing to apply between dashes of the line stroke, if applicable. | value: numeric |
| object | fill | The fill configuration. Name | Description | Property Type |
---|
color | The color to apply to the trend fill, if applicable. | color | opacity | The opacity to apply to the trend fill, if applicable. | value: numeric |
| object | style | Style for the box. Full menu of style options is available. You can also specify a style class. | object |
| object | line | Configuration to build the vertical line portion of the x-trace display. Click here to see the line properties Name | Description | Property Type |
---|
visible | Whether or not the line is visible. | value: boolean | color | The color to apply to the line stroke, if applicable. | color | width | The width to apply to the line stroke, if applicable. | value: numeric | opacity | The opacity to apply to the line stroke, if applicable. | value: numeric | dashArray | The spacing to apply between dashes of the line stroke, if applicable. | value: numeric | style | Style for the box. Full menu of style options is available. You can also specify a style class. | object |
| object |
| object | rangeBrush | Configuration settings for the chart in rangeBrush mode. Click here to see the rangeBrush properties Name | Description | Property Type |
---|
values | An array of config objects to build each range brush. Name | Description | Property Type |
---|
start | The start timestamp position. | value: string | end | The end timestamp position. | value: string |
| array | active | Configuration to build the active range brush display. Name | Description | Property Type |
---|
color | The color of the active range brush. | color | opacity | The opacity of the active range brush. | value: numeric | style | Style settings for the active range brush. Full menu of style options is available. You can also specify a style class. | object |
| object | inactive | Configuration to build the inactive range brush displays. Name | Description | Property Type |
---|
color | The color of the inactive range brush. | color | opacity | The opacity of the inactive range brush. | value: numeric | style | Style settings for the inactive range brush. Full menu of style options is available. You can also specify a style class. | object |
| object |
| object | annotation | Configuration settings for the chart in annotation mode. Click here to see the annotation properties
|
|
|
---|
infoBox | Configuration to build the box portion of the annotation display. Click here to see the infoBox properties Name | Description | Property Type |
---|
visible | Whether or not the box is visible. | value: boolean | showTime | Whether or not the time value above the box is visible. | value: boolean | width | The width of the box. | value: numeric | dateFormat | The date format displayed when in historical mode using a MomentJS date string (https://momentjs.com). | value: string | timeFormat | The time format displayed when in historical mode using using a MomentJS time string (https://momentjs.com). | value: string | stroke | A configuration object describing the properties that will be applied to the stroke of the box. Name | Description | Property Type |
---|
color | The color to apply to the line stroke, if applicable. | color | width | The width to apply to the line stroke, if applicable. | value: numeric | opacity | The opacity to apply to the line stroke, if applicable. | value: numeric | dashArray | The spacing to apply between dashes of the line stroke, if applicable. | value: numeric |
| object | fill | The fill configuration. Name | Description | Property Type |
---|
color | The color to apply to the trend fill, if applicable. | color | opacity | The opacity to apply to the trend fill, if applicable. | value: numeric |
| object | font |
The following feature is new in Ignition version 8.1.17
Click here to check out the other new features
A configuration object describing the properties that will be applied to the font of text in the annotation. Name | Description | Property Type |
---|
color | The text color of the annotation label and datetime text. | color | size | The font size of the annotation label and datetime text. | value: numeric | style | Custom CSS styles to apply to the annotation text. Any style that applies to an SVG line element can be used. See also style options. | object |
| object | style | Style for the box. Full menu of style options is available. You can also specify a style class. | object |
| object | line | Configuration to build the connecting line portion of the annotation display. Click here to see the line properties Name | Description | Property Type |
---|
visible | Whether or not the line is visible. | value: boolean | color | The color to apply to the line stroke, if applicable. | color | width | The width to apply to the line stroke, if applicable. | value: numeric | opacity | The opacity to apply to the line stroke, if applicable. | value: numeric | dashArray | The spacing to apply between dashes of the line stroke, if applicable. | value: numeric | style | Style for the box. Full menu of style options is available. You can also specify a style class. | object |
| object | dot | Configuration to build the dot portion of the annotation display. Name | Description | Property Type |
---|
visible | Whether or not the dot portion is visible. | value: boolean | color | The color to apply to the dot. | color | radius | The radius of the dot. | value: numeric | opacity | The opacity of the dot. | value: numeric | styke | The style settings for the dot. Full menu of style options is available. You can also specify a style class. | object |
| object |
| object |
| value: string | fullscreen | Flag representing the full screen presentation mode of the chart.
| value: boolean | chartZoomLevel |
The following feature is new in Ignition version 8.1.11
Click here to check out the other new features
Read-only value that corresponds to the current zoom level on the chart. External changes to this value will not update the level of zoom displayed on the chart. | value: numeric | rangeZoomLevel |
The following feature is new in Ignition version 8.1.11
Click here to check out the other new features
Read-only value that corresponds to the current zoom level on the range brush when the chart is in Historical Mode. External changes to this value will not update the level of zoom displayed on the chart. | value: numeric |
| object |
axes | Collection of predefined axes against which the data visualizations can be drawn. Click here for the axes properties Name | Description | Property Type |
---|
name | The name of the axis. | value: string | position | The side of the plot upon which the axis should be drawn. Options are left or right. | value: string | width | The width of the axis. | value: numeric | color | The color of the Y axis vertical bar. | color | dataFormat | A numeral.js data format for displaying the data displayed in the pen control portion of the chart for this axis. See https://numeraljs.com for formats. | value: string | range | Configuration for the upper and lower limits of the axis. Name | Description | Property Type |
---|
auto | If true, the minimum and maximum displaying values for the axis will be auto calculated.
This feature was changed in Ignition version 8.1.16:
Auto range Y axes are now constrained to the upper/lower limits of the pen data bound to said axis.
| value: boolean | min | Minimum range value. If no value is provided, a minimum value will be calculated from the data bound to this axis. | value: numeric | max | Maximum range value. If no value is provided, a maximum value will be calculated from the data bound to this axis. | value: numeric |
| object | label | The label configuration for the Y axis. Name | Description | Property Type |
---|
text | The text of the Y axis label. | value: string | offset | Offset the Y axis label from its default position. This enables you to fine tune the label location, which may be necessary depending on the scale and how much room the tick labels take up. Value may be positive or negative. Default is 0. | value: numeric | font | Font configuration for the Y access label. Font size and color options for the font. | object | style | Style for the Y access label. Full menu of style options is available. You can also specify a style class. | object |
| object | tick | Tick configuration. Name | Description | Property Type |
---|
color | The color of the ticks.
| color | count |
The following feature is new in Ignition version 8.1.11
Click here to check out the other new features
Number of ticks to display on the Y axis. Default value is Auto. When the tick count is Auto, Y axis ticks will be added/removed based on the height of the chart, and the tick spacing is adjusted around whole numbers. | value: numeric or string | label | Tick label configuration Name | Description | Property Type |
---|
font | Label font configuration. Font size and color options for the font. | object | format |
The following feature is new in Ignition version 8.1.11
Click here to check out the other new features
Sets the numeric format for the tick label. The value must be a valid D3 Format value. Default value is Auto. When the tick label format is Auto, the D3 format ~f is used. This creates a fixed point that will trim any insignificant trailing zeroes. | value: string | style | Style for the tick label. Full menu of style options is available. You can also specify a style class . | object |
| object | style | Style for the tick. Full menu of style options is available. You can also specify a style class . | object |
| object | grid |
The following feature is new in Ignition version 8.1.16
Click here to check out the other new features
Configuration for gridlines to display on this axis. Name | Description | Property Type |
---|
visible | Visible state of the gridlines. Gridlines are shown only for axes that connect directly to the chart. Any satellite axes will display their tick configurations instead of gridlines. | value: boolean | color | Color of the gridlines. | color | opacity | Opacity of the gridlines. | value: numeric | dashArray | Dashed appearance of the gridlines. | value: numeric | style | Style for the gridlines. Full menu of style options is available. You can also specify a style class . | object |
| object | style | Style for the display. Full menu of style options is available. You can also specify a style class. | object |
| array |
pens | Visual representation of each active item Click here for the pens properties Name | Description | Property Type |
---|
name | Name of the pen. | value: string | visible | Whether or not the pen is visible on the chart. | value: boolean | enabled | Availability of the pen on the chart and pen configuration panel. | value: boolean | selectable | Flag to allow the pen to be responsive to user selection. | value: boolean | axis | Name of an axis in the "axes" array to plot against. If left blank, a default axis will be created based on data values. | value: string | plot | The plot to which this pen is bound. | value: numeric | display | Configuration that drives the display of the pen. Name | Description | Property Type |
---|
type | The type of chart to be built. Options are line, area, bar, or scatter. | value: string | interpolation | Type of curve that should be used to draw the line portion of the chart. Options are: curveBasis, curveBasisOpen,curveCardinal, curveCardinalOpen, curveCatmullRom, curveCatmullRomOpen, curveLinear, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, or curveStepBefore. More information on the interpolation methods above can be found in D3's documentation. | value: string | breakLine | If true, the line will be broken on either side of bad/missing data values. If false, bad/missing data values are removed and the adjoining points are connected. | value: boolean | styles | Settings for the display when it is normal, highlighted, selected, or muted. Name | Description | Property Type |
---|
normal | An object providing style configuration for the “normal” state (no user interaction) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties. | object | highlighted | An object providing style configuration for the “highlighted” state (mouse hover) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties. The highlighted property uses the same configuration properties as the 'normal' property above. | object | selected | An object providing style configuration for the “selected” state (mouse click) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties. | object | muted | An object providing style configuration for the “muted” state (non selected) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties. | object |
Each of these four display settings has the same set of properties. Click here to see the properties Name | Description | Property Type |
---|
stroke | A configuration object describing the properties that will be applied to the stroke of the trend type being displayed (if applicable). The line , and area trend types will have these styles applied to them. Name | Description | Property Type |
---|
color | The color to apply to the line stroke, if applicable. | color | width | The width to apply to the line stroke, if applicable. | value: numeric | opacity | The opacity to apply to the line stroke, if applicable. | value: numeric | dashArray | The spacing to apply between dashes of the line stroke, if applicable. | value: numeric |
| object | fill | The fill configuration. Name | Description | Property Type |
---|
color | The color to apply to the trend fill, if applicable. | color | opacity | The opacity to apply to the trend fill, if applicable. | value: numeric |
| object |
| object |
| object | data | Name | Description | Property Type |
---|
source | Source or tag path of the data behind the pen.
This feature was changed in Ignition version 8.1.14:
Non-historical tag paths are converted to a historical format ( e.g. histprov:default:/tag:_Simulator_/Ramp/Ramp0) . Any updates to the pen via the UI will write the converted path back to this property. This keeps all of the data.source properties in a historical format while still allowing an initial non-historical tag path to add pen data to the chart display. | value: string | aggregateMode | Mode to use to group the data. Options are: default (MinMax), Average, MinMax, LastValue, SimpleAverage, Sum, Minimum, Maximum, DurationOn, DurationOff, CountOn, CountOff, Count, Range, Variance, StdDev, PctGood, or PctBad. | value: string |
| object |
| array |
plots | A plot represents a row containing one or more pens. Click here for the pens properties Name | Description | Property Type |
---|
relativeWeight | Ratio between all plots. | value: numeric | color | Background color of the plot. | color | markers | An array of markers that can be added to the plot to better visualize the data being displayed. Name | Description | Property Type |
---|
type | Type of marker to add to the plot. Options are line or band. | value: string | axis | Name of the axis against which the marker should be drawn. This must be specified for the marker to be drawn. | value: string | value | Value where the line marker should be drawn. | value: numeric | display | Configuration for the display of the marker. Click here to see the display properties Name | Description | Property Type |
---|
color | Color of the marker | color | width | Width of the line. | value: numeric | opacity | Opacity of the marker | value: numeric | dashArray | Dashed appearance of the marker. | value: numeric | label | Configuration for the label of the marker. Name | Description | Property Type |
---|
text | Text for the label. | value: string | position | The position of the label relative to the line. Options are right or left. | value: string | font | Label font configuration. Font size and color options for the font. | object | style | Style for the label. Full menu of style options is available. You can also specify a style class | object |
| object | style | Style for the display. Full menu of style options is available. You can also specify a style class. | object |
| object |
| array | style | Style for the individual plot. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class | object |
| array |
dataColumns | Configuration for the data columns that can be shown in tabular displays throughout the chart. Name | Description | Property Type |
---|
penControl | Configuration for the data columns that can display for pens. Click here for the penControl properties Name | Description | Property Type |
---|
currentValue | Show the "current value" column for the pen based on the time range. | value: boolean | minimum | Show the "minimum" column for the pen based on the time range. | value: boolean | maximum | Show the "minimum" column for the pen based on the time range. | value: boolean | average | Show the "average" column for the pen based on the time range. | value: boolean | axis | Show the "axis" column for the pen. | value: boolean | plot | Show the "plot" column for the pen. | value: boolean | xTrace | Show the "xTrace" column for the pen based on the time range. | value: boolean |
| object | rangeSelection | Configuration for the data columns that can display for the range brush. Click here for the rangeSelection properties Name | Description | Property Type |
---|
first | Show the "first" column for the pen based on the time range. | value: boolean | last | Show the "last" column for the pen based on the time range. | value: boolean | average | Show the "average" column for the pen based on the time range. | value: boolean | minimum | Show the "minimum" column for the pen based on the time range. | value: boolean | maximum | Show the "minimum" column for the pen based on the time range. | value: boolean | median | Show the "median" column for the pen based on the time range. | value: boolean | delta | Show the "delta" column for the pen based on the time range. | value: boolean | sum | Show the "median" column for the pen based on the time range. | value: boolean | ucl | Show the "UCL" column for the pen based on the time range. | value: boolean | lcl | Show the "LCL" column for the pen based on the time range. | value: boolean | standardDeviation | Show the "standardDeviation" column for the pen based on the time range. | value: boolean |
| object |
|
|
title | Configuration for the title of the chart. Name | Description | Property Type |
---|
visible | Whether or not the title is visible. | value: boolean | text | The text for the title. | value: string | font | Title font configuration. Font size and color options for the font. | object | style | Style for the display. Full menu of style options is available. You can also specify a style class. | object |
| object |
timeAxis | Configuration for the time axis (X axis) of the chart. Name | Description | Property Type |
---|
visible | Whether or not the time axis is visible. | value: boolean | tickCount | The number of ticks on the axis.
The following feature is new in Ignition version 8.1.22
Click here to check out the other new features
Setting the tickCount to 0 will automatically scale the chart's X Axis based on the zoom level, panning, and scrolling. | value: numeric | height | The height of the time axis. | value: numeric | color | The color of the axis. | color | tick | Tick configuration. Name | Description | Property Type |
---|
color | The color of the ticks. | color | label | Tick label configuration Name | Description | Property Type |
---|
angled | Whether or not the tick labels are angled. | value: boolean | format | Date/time format displayed by each tick using a MomentJS data string (https://momentjs.com). | value: string | font | Label font configuration. Font size and color options for the font. | object | style | Style for the tick label. Full menu of style options is available. You can also specify a style class . | object |
| object | style | Style for the tick. Full menu of style options is available. You can also specify a style class . | object |
| object | grid |
The following feature is new in Ignition version 8.1.16
Click here to check out the other new features
Configuration for gridlines to display on this axis. Name | Description | Property Type |
---|
visible | Visible state of the gridlines. Gridlines are shown only for axes that connect directly to the chart. Any satellite axes will display their tick configurations instead of gridlines. | value: boolean | color | Color of the gridlines. | color | opacity | Opacity of the gridlines. | value: numeric | dashArray | Dashed appearance of the gridlines. | value: numeric | style | Style for the gridlines. Full menu of style options is available. You can also specify a style class . | object |
| object | style | Sets a style for this timeAxis. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class . | object |
|
|
legend | Configuration for the display of the legend for the chart. Name | Description | Property Type |
---|
visible | Whether or not the legend is visible. | value: boolean |
| object |
style | Sets a style for this chart. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class . | object |