| Name | Description | Property Type |
|---|
|
The following feature is new in Ignition version 8.0.5
Click here to check out the other new features
Allows the chart to be panned and zoomed. The chart cannot be zoomed out past its base range. | |
| series | A list of series entries used as the base data source for the chart display. Each series will be a new line drawn on the chart. At a minimum, the Time Series component requires at least one complete series entry to display data. With no other configuration provided, an initial display will be created from the series data (required). Each series entry requires the following properties: Click here to see the series properties | Description | Property Type |
|
|---|
| name | The name of the series. A name must be provided or one will be added. This will also be used as the label of the auto-generated Y axis in the chart (required). | value: string | | data | Data can be an object containing a time entry and value entries (all must be numbers) (required). Each value entry must be labeled with the column name to which it corresponds. Data can also be an array containing value entries (all must be numbers). Each value entry consists of a timestamp (which must be the first value) and one or more values that were captured at that time. Finally, data can also be in the form of a DataSet, for example, the data property can be bound to a Tag History binding to display either realtime data, or historical data (via start and end dates).
| object or array |
| array |
| plots | A list of plots (subplots) for the chart. At least one entry is required. Plot entries contain properties that allow much finer control over the way that the series data can be displayed. Each plot will be represented by its own row in the component (plots always stretch to fill the width of the chart). A plot contains the following properties:
| Name | Description | Property Type |
|---|
| trends | If specified, a trend will become the display mechanism for the plot in which it resides. It describes the way that the data should look, and provides different display types as opposed to the line display type that is provided when building from series data. Multiple trends will be built on top of each other in the same plot. An axis will be generated for each trend, unless they share a common axis (either custom created, or generated from series data). A trend contains the following properties: (optional) Click here to see the trends properties | Name | Description | Property Type |
|---|
| visible | If specified, this is the visible state of the trend. If not visible, the trend data will be hidden, but the time range of the trend will still be represented in the overall time range of the plot. | value: boolean | | type | The type of chart to create (required). Options are area, bar, line, and scatter. | value: string dropdown | | series | The series used to feed data to this trend (required). | value: string | | interpolation | The 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, curve MonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore. More information on the interpolation methods above can be found in D3's documentation. | value: string dropdown | | breakLine | This property will be available when a trend of type line is being used. 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 | | stack | This property will be available when a trend of type area or bar is being used. If true, the multiple columns of the chart will stack on top of each other. | value: boolean | | axis | If specified, the name of an axis that is described in the axesproperty of the plot to which this trend belongs. This axis will be used as the Y axis for the trend. | value: string | | radius | This property will be available when a trend of type scatter is being used. A number specifying the radius (in pixels) of the displaying points. | value: numeric | | columns | If provided, only the columns in this list will be shown. Any style properties provided here will also override any existing style currently in place. A column contains the following properties: | Name | Description | Property Type |
|---|
| key | This needs to match a column name from the series to which this trend is bound (required). Once in place, this will allow the style configuration provided here to override the styles provided in the defaultStyles property. | value: string | | color | If provided, this value will override any previous color values for the column (both stroke and fill). Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | value: string | | styles | If provided, the styles for the state values listed here will override any previous state values. The state value options are: | Name | Description | Property Type |
|---|
| normal | Takes the same configuration options as the same named state value under the defaultStyles property. | object | | highlighted | Takes the same configuration options as the same named state value under the defaultStyles property. | object | | selected | Takes the same configuration options as the same named state value under the defaultStyles property. | object | | muted | Takes the same configuration options as the same named state value under the defaultStyles property. | object |
| object |
| array | | baselines | If specified, a line will be drawn on the trend based upon a given type of functionality. Options as follows: | Name | Description | Property Type |
|---|
| visible | Whether the baseline is visible or not. | value: boolean | | function | The type of baseline that will be drawn (required). Options are min, max, avg, ucl (upper control limit), and lcl (lower control limit).
| value: string | | column | The column against which the baseline should be calculated. If not specified, the first column in the series to which the trend is bound will be used. | value: string | | axis | The axis against which the baseline should be calculated. The trend must be bound to an axis for this to work correctly. | value: string | | color | The color of the line. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | value: string | | width | The width of the line, in pixels. | value: numeric | | opacity | The opacity of the line, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. | value: numeric | | dashArray | The dashed appearance (SVG dashed array) of the line. The pattern of dashes and gaps used to paint the stroke. It's a list of space separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2". | value: numeric | | label | The configuration used for the label drawn on the baseline. | Name | Description | Property Type |
|---|
| text | The label text. | value: string | | position | The position of the label relative to the baseline. | value: string | | font | The font style for the label. | Name | Description | Property Type |
|---|
| color | The color of the label text. | value: string | | size | The font size, in pixels, of the label text. | value: numeric |
| object | | style | Custom CSS styles to apply to the baseline label. Any style that applies to an SVG text element can be used. See also style options. | object |
| object | | style | Custom CSS styles to apply to the line portion of the baseline. Any style that applies to an SVG line element can be used. See also style options. | object |
|
|
| array | | axes | A list of axis entries for that can be used for the plot. These can be used to override the Y Axis that is generated based on data in the series to which each trend is bound. An axis entry has the following properties. Click here to see the axes properities | Name | Description | Property Type |
|---|
| name | The name of the axis (required). Also used as the display label of the axis. | value: string | | min | The minimum value of the axis (required).
The following feature is new in Ignition version 8.0.10
Click here to check out the other new features
The minimum range value of the axis. If no value is specified, auto range will be used. A minimum value will be calculated from the data bound to this axis. | value: numeric | | max | The maximum value of the axis (required).
The following feature is new in Ignition version 8.0.10
Click here to check out the other new features
The maximum range value of the axis. If no value is specified, auto range will be used. A maximum value will be calculated from the data bound to this axis | value: numeric | | alignment | The side of the trend upon which the axis should be presented (required). | value: string | | width | The width of the axis, in pixels (required). | value: numeric | | label | The configuration of the Y axis label. | Name | Description | Property Type |
|---|
| visible | Whether or not the label is visible. | value: boolean | | text | The text for the label. | value: string | | offset | Offset the Y axis label from its default position. This allows you to fine tune the label location, which may be necessary depending on the scale and how much room the tick labels take up. This may be positive or negative. | value: numeric | | font | The settings for the label's font. | Name | Description | Property Type |
|---|
| color | The color of the label text. | value: string | | size | The font size, in pixels, of the label text. | value: numeric |
| object | | style | Custom CSS styles to apply to the Y axis label. Any style that applies to an SVG text element can be used. See also style options. | object |
| object | | tick | The configuration for the ticks drawn on the axis. | Name | Description | Property Type |
|---|
| color | The color of the ticks. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | value: string | | label | The settings for the label on the tick. | Name | Description | Property Type |
|---|
| font | The font style for the label. | Name | Description | Property Type |
|---|
| color | The color of the label text. | value: string | | size | The font size, in pixels, of the label text. | value: numeric |
| object | | style | Custom CSS styles to apply to the baseline label. Any style that applies to an SVG text element can be used. See also style options. | object |
| object | | style | Custom CSS styles to apply to the ticks. Any style that applies to an SVG text element can be used. See also style options. | object |
| object |
| array | | markers | Settings for the markers, a list of visual indicators that can be added to the plot (optional). These are meant to draw emphasis to the data. In this first release, the line marker will be the only available option. Click here to see the markers properties | Name | Description | Property Type |
|---|
| visible | Indicates whether or not the marker is visible. | value: boolean | | value | The numeric value represented by the marker. | value: numeric | | type | The type of marker. Currently the only option is line. | value: string | | axis | The axis against which the marker should be drawn (required). | value: string | | line | The configuration for the line portion of the marker. | Name | Description | Property Type |
|---|
| width | The width of the marker line, in pixels. | value: numeric | | color | The color of the marker line. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | value: string | | opacity | The opacity of the marker line, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. | value: numeric | | dashArray | The pattern of dashes and gaps (SVG dashed array) used to paint the marker line. It's a list of space separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5 3 2" is equivalent to "5 3 2 5 3 2". | value: numeric | | label | The configuration for marker's label. | Name | Description | Property Type |
|---|
| text | The marker label text. | value: string | | position | The position of the label relative to the line. | value: string | | font | The font settings for the label. | Name | Description | Property Type |
|---|
| color | The color of the label text. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | value: string | | size | The font size, in pixels, of the label text. | value: numeric | | style | Custom CSS styles to apply to the marker label. Any style that applies to an SVG text element can be used. See also style options. | object |
| object | | style | Custom CSS styles to apply to the marker line. Any style that applies to an SVG line element can be used. See also style options. | object
|
| object | | style | Custom CSS styles to apply to the marker line. Any style that applies to an SVG line element can be used. See also style options. | object |
| object |
| array |
| array |
| title | Settings for the title of the chart. Click here to see the title properties | Name | Description | Property Type |
|---|
| visible | Indicates whether or not the title is visible. Default is false. | value: boolean | | text | Text for the title of the chart. | value: string | | height | The vertical space taken up by the title. | value: numeric | | font | Title font configuration. Options as follows: | Name | Description | Property Type |
|---|
| color | Color of the title text. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | value: string | | size | The font size, in pixels, of the title text. | value: numeric |
| object | | style | Sets a style for the title. 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 |
| object |
| timeAxis | This property provides settings for the X Axis. Note that multiple plots share the same axis. (required) | Name | Description | Property Type |
|---|
| visible | The visible state of the the axis. | value: boolean | | tickCount | The number of ticks on the axis (as a multiple of 2, 5, or 10). | value: numeric | | height | The height of the axis. | value: numeric | | color | The color of the axis. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | value: string | | tick | The configuration of the ticks on the axis. Click here to see tick properties | Name | Description | Property Type |
|---|
| color | The color of the ticks. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | value: string | | label | The configuration of the label drawn on the tick. | Name | Description | Property Type |
|---|
| angled | If set to true, the tick labels will be angled rather than horizontal. | value: boolean | format |
The following feature is new in Ignition version 8.0.11
Click here to check out the other new features
The date/time format displayed by each tick using a MomentjS date string (https://momentjs.com/). Default is “Auto”, where the property attempts to figure out the best format. For a listing of suggested formats, refer to https://momentjs.com/docs/#/parsing/string-format/ | value: string | | font | The settings for the label's font. | Name | Description | Property Type |
|---|
| color | Color of the label text. | value: string | | size | The font size, in pixels, of the label text. | value: numeric |
| object | | style | Custom CSS styles to apply to the tick labels. Any style that applies to an SVG text element can be used. See also style options. | object |
|
|
| object | | style | A style object containing properties which are applied to the horizontal line of the axis. Any property that would apply to an SVG line element can be used here. See also style options. | object |
| object |
| timeRange | An object describing the presentation of the time range display below the chart. The following properties are available: | Name | Description | Property Type |
|---|
| visible | The visible state of the time range display as a whole. | value: boolean | | dateFormat | The date format of the range using a MomentJS date string. | value: string | | timeFormat | The time format of the range using a MomentJS date string. | value: string |
| object |
| xTrace | Configuration to build the x-trace display when hovering over the chart. Click here to see the xTrace properties. | Name | Description | Property Type |
|---|
value |
The following feature is new in Ignition version 8.0.10
Click here to check out the other new features
A read only timestamp representing the current x-trace position. If there is no active x-trace position, this value will be an empty string. | value: string | | visible | The visible state of the x-trace display. | value: boolean | | infoBox | Configuration to build the box portion of the x-trace display. | Name | Description | Property Type |
|---|
| visible | The visible state of the box. | value: boolean | | showTime | Whether to display the timestamp of the current X Trace value above the info box. | value: boolean | | width | Width of the info box, in pixels. | value: numeric | dateFormat |
The following feature is new in Ignition version 8.0.11
Click here to check out the other new features
The date format of the xtrace date/time display using a Momentjs date string (https://momentjscom/). Options are: [7-18-2019], [2019-7-18], [07-18-2019], [2019-07-18], [Jul 18th 19], [Jul 18th 2019], or none. | value: string | timeFormat |
The following feature is new in Ignition version 8.0.11
Click here to check out the other new features
The time format of the xtrace date/time display using a MomentJS time string (https://momentjs.com/). Options are: 12 hour [8:41:06], 12 hour w/ period [8:41:06 AM], 24 hour [08:41:06], 24 hour w/milliseconds [08:41:06:269], Unix Millisecond Timestamp [1563464737269], Unix Timestamp [1563464737], or none. | value: string | | dataFormat | A NumeralJS value used to format the data found at the current timestamp of the X Trace display. See numeral.js for a list of available data formats. Options are: number [1,000.12], integer [1,200], four decimal precision [1.1200], percent [10.12%], scientific [1.01E+03], accounting [$(1,000.12)], financial [(1,000.12)], currency [$1,000.12], currency (rounded) [$1,012], duration [24:01:00], abbreviation [1.2k], or ordinal [100th]. | value: string | | stroke | A configuration object describing the properties that will be applied to the stroke of the box display. | Name | Description | Property Type |
|---|
| color | The color of the box stroke. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | value: string | | width | The width of the box stroke, in pixels. | value: numeric | | opacity | The opacity of the box stroke, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. | value: numeric | | dashArray | The dashed appearance (SVG dashed array) of the box stroke. It's a list of space separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2". | value: numeric |
| object | | fill | A configuration object describing the properties that will be applied to the fill of the box display. | Name | Description | Property Type |
|---|
| color | The color of the box fill. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | value: string | | opacity | The opacity of the box fill, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. | value: numeric |
| object | | style | Custom CSS styles to apply to the info box. Any style that applies to an SVG line element can be used. See also style options. | object |
| object | | line | Configuration to build the vertical line portion of the x-trace display. | Name | Description | Property Type |
|---|
| visible | The visible state of the line. | value: boolean | | color | The color of the line. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | value: string | | width | The width of the line, in pixels. | value: numeric | | opacity | The opacity of the line, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. | value: numeric | | dashArray | The dashed appearance (SVG dashed array) of the line. It's a list of space separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2". | value: numeric | | style | Custom CSS styles to apply to the line. Any style that applies to an SVG line element can be used. See also style options. | object |
| value: string |
| object |
|
The following feature is new in Ignition version 8.0.6
Click here to check out the other new features
Configuration for the display and position of the legend for the Time Series Chart. | Name | Description | Property Type |
|---|
| visible | The visible state of the legend. Default is false. | value: boolean | | position | The position of the legend. Options are top, right, bottom, or left. | value: dropdown string | | style | A style object containing properties which are applied to the legend. See also style options. You can also specify a style class. | object |
| |
| defaultStyles | An object providing style settings to the chart trends as a whole. Click here to see the defaultStyles properties | Name | Description | Property Type |
|---|
| colorScheme | Specifies a Color Brewer color scheme to use on the series. See ColorBrewer2.org for available color schemes. | value: string | | colors | A list of colors to apply to the columns (in order) for each trend. If these values are provided, they will override the value provided for the colorScheme. | value: string | | 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. | 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 |
|---|
| width | The width of the trend stroke, in pixels. | value: numeric | | opacity | The opacity of the trend stroke, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. | value: numeric | | dashArray | The dashed appearance (SVG dashed array) of the trend stroke. It's a list of space separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2". | value: numeric |
| object | | fill | A configuration object describing the properties that will be applied to the fill of the trend type being displayed (if applicable). area, and box, and scatter trend types will have these styles applied to them. | Name | Description | Property Type |
|---|
| opacity | The opacity of the trend fill, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. | value: numeric |
| object |
| 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. | Name | Description | Property Type |
|---|
| stroke | A configuration object describing the properties that will be applied to the stroke for the “highlighted” state (mouse hover) of a column, or data entry, in a trend. The line, and area trend types will have these styles applied to them. | Name | Description | Property Type |
|---|
| opacity | The opacity of the trend stroke, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. | value: numeric |
| object | | fill | A configuration object describing the properties that will be applied to the stroke for the “highlighted” state (mouse hover) of a column, or data entry, in a trend.The area, and box, and scatter trend types will have these styles applied to them. | Name | Description | Property Type |
|---|
| opacity | The opacity of the trend fill, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. | value: numeric |
| object |
| 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. | Name | Description | Property Type |
|---|
| stroke | A configuration object describing the properties that will be applied to the stroke for the “selected” state (mouse hover) of a column, or data entry, in a trend. The line, and area trend types will have these styles applied to them. | Name | Description | Property Type |
|---|
| opacity | The opacity of the trend stroke, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. | value: numeric |
| object | | fill | A configuration object describing the properties that will be applied to the stroke for the “selected” state (mouse hover) of a column, or data entry, in a trend. The area, and box, and scatter trend types will have these styles applied to them. | Name | Description | Property Type |
|---|
| opacity | The opacity of the trend fill, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. | value: numeric |
| object |
| 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. | Name | Description | Property Type |
|---|
| stroke | A configuration object describing the properties that will be applied to the stroke for the “muted” state (mouse hover) of a column, or data entry, in a trend. The line, and area trend types will have these styles applied to them. | Name | Description | Property Type |
|---|
| opacity | The opacity of the trend stroke, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. | value: numeric |
| object | | fill | A configuration object describing the properties that will be applied to the stroke for the “muted” state (mouse hover) of a column, or data entry, in a trend.The area, and box, and scatter trend types will have these styles applied to them. | Name | Description | Property Type |
|---|
| opacity | The opacity of the trend fill, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. | value: numeric |
| object |
| object |
| object |
|
The following feature is new in Ignition version 8.0.6
Click here to check out the other new features
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. | |
to bring up the Edit binding window like in the image below.
on the right of the Select Tags table and drill down to select the Tag from Step 1, then click OK. 
