Perspective - Time Series Chart

The following feature is new in Ignition version 8.0.3
Click here to check out the other new features

General

Component Palette Icon:

Description

The Time Series component provides an efficient way to visualize data from a variety of different data sources as chart data. Time series chart requires that the X axis of the chart represents time and the Y axis represents values. The Time Series Chart includes the following features:

Zoom or pan in and out via mouse wheel interaction.
X-Trace display showing data at the hovered time position.
Multiple chart display types (Area, Bar, Line, and Scatter).
Multiple Y axes with the ability to align to the left or right side of the chart.
Multiple plots as well as multiple trends per plot.
Baselines and markers.
Custom axes.
Time range showing the overall range of the data being displayed in the chart
Simple display customization for the axes, different trend display types, baselines, and markers.
Label and Title properties have their own dedicate styling properties, such as color and size.

By default, the charts contain example data, but typically a tag history binding or named query binding will be used to feed data to the charts.

The Chart Range Selector provides a complement to this chart. The Time Series Chart and Chart Range Selector components are most powerful when paired together.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective.
This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

Name Description Property Type

enablePanZoom

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.

value: boolean

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). When using a dataset, the Time column should be the first column.	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

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

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

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

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

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

legend

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

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

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

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

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

style

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.

object

The following feature is new in Ignition version 8.0.5
Click here to check out the other new features

User Interaction

The Time Series component properties have impact on the way a user can interact with a chart in the runtime.

Interaction	Description
Zoom	The user can zoom in and out on the Time Series chart. When zoomed to any level past its base time range, the Time Series chart will display an expand icon in the upper right corner. Click on the icon to return the chart to its base range.
Pan	The user can pan across the Time Series chart. When panned past its base time range, the Time Series chart will display an expand icon in the upper right corner. Click on the icon to return the chart to its base range.
Refresh	The Time Series Chart will not refresh its time range if it is zoomed in. It maintains the zoom while polling. Click on the icon to return the chart to its base range and refresh the data.
Pinch Zoom	The following feature is new in Ignition version 8.0.6 Click here to check out the other new features On a mobile device, the user can now pinch-zoom the Time Series chart. Zooms must originate from within the boundaries of the displaying chart data.
Tracker Position	The following feature is new in Ignition version 8.0.6 Click here to check out the other new features On a mobile device, the user can move the tracker position on the Time Series chart via touch.

Perspective Component Events

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Example - Tag History

This example shows how to display Tag History data on a Time Series Chart.

Begin by configuring tag history on a tag of your choice.
From the Perspective section of the Project Browser on your Designer, right click on the Views folder and select New View... to create a new view.
This will bring up the New View window. Give your view a name and select the Coordinate Root Container Type. The Page URL setting will remain unchecked for this example.
From the Perspective Component Palette, drag and drop a Time Series Chart onto your newly created view.
From the Perspective Property Editor, go to the chart's series[0].data property and click on the binding icon to bring up the Edit binding window like in the image below.
Set the Time Range to be Historical. The default Start Date value is dateArithmetic(now(0), -1, 'hour') and the default End Date value is now(0) which means we will see historical data going back 1 hour from now.
For the Tag History Binding configuration, click on the Tag icon on the right of the Select Tags table and drill down to select the Tag from Step 1, then click OK.
Click OK on the Binding Editor window to accept the binding changes. Now you should see a trend representative of the historical data for a Tag as shown in the image below.

User Manual

GETTING STARTED

MODULES AND PLATFORM

APPENDIX

TUTORIALS & HELPFUL TRICKS

GLOSSARY

STRATEGIC PARTNER LINKS

RESOURCES

ALL USER MANUAL VERSIONS