User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL USER MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Employees

Sign In

Skip to end of metadata
Go to start of metadata

General

Component Palette Icon:



IULocgo


XY Chart

Description

The XY Chart displays data trends. It provides a flexible way to display either timeseries or X-Y data by entering data in the dataSources property. It is fully customizable in its appearance, from labels, colors, line widths, legend, scroll bars, and text styles.

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.

NameDescriptionProperty Type
dataSources

Objects that are the data source for the chart. When configured to show a date or time on the x-axis, the chart expects that each entry in a data source is already sorted in ascending timestamp order. It is highly advised that you sort the contents of any given data source. 

array
title

Chart title configuration.

NameDescriptionProperty Type
textThe chart title text.value: string
appearance

Appearance related title options.

NameDescriptionProperty Type
colorColor for the title.value: string
font

Font settings.

NameDescriptionProperty Type
sizeSpecifies the size of the font in pixels (px) or points (pt). If you enter just a number, Perspective assumes the value is in pixels.value: numeric
weightSets how thick or thin characters in the text are displayed.value: numeric
object
paddingPadding space around the title. Values can be set for the top, bottom, left, and right.object



value: string
subtitle

Chart subtitle configuration.

NameDescriptionProperty Type
textThe chart subtitle text.value: string
appearance

Appearance related subtitle settings.

NameDescriptionProperty Type
colorColor for the title.value: string
font

Font settings.

NameDescriptionProperty Type
sizeSpecifies the size of the font in pixels (px) or points (pt). If you enter just a number, Perspective assumes the value is in pixels.value: numeric
weightSets how thick or thin characters in the text are displayed.value: numeric
object
paddingPadding space around the subtitle. Values can be set for the top, bottom, left, and right.object
object

legend

Settings for the chart legend.

NameDescriptionProperty Type
enabledWhether the legend is enabled for this chart. Default is true (enabled).value: boolean
positionWhere the legend is located in relation to the chart (left, right, top, bottom, or absolute). Default is bottom.value: string dropdown
absoluteSettings used to position the legend when the position property is set to absolute.Values can entered for x and y.object
markers

Settings for the markers.

NameDescriptionProperty Type
enabledEnables all series markers used in the legend.value: boolean
widthThe width of each marker, in pixels.value: numeric
heightThe height of each marker, in pixels.value: numeric
mirrorLookOfSeriesMarkers will be drawn to mirror the look of the series elements. Important: Customizing markers beyond width and height requires that this value is set to false.value: boolean
stroke

Settings for the marker line stroke.

NameDescriptionProperty Type
colorMarker line stroke color.value: string
widthMarker line stroke width.value: numeric
opacityMarker line stroke opacity. 0 is fully transparent, 1 is fully opaque.value: numeric


object
cornerRadiusCorner radius applied to the rectangle marker. Values can be set for the topLeft, topRight, bottomLeft, and bottomRight.value: string dropdown
icon

Settings for the icon on the legend.

NameDescriptionProperty Type
pathShorthand path to the icon source, in this format: library/iconName. The materials icon library is a the primary source for icons in Ignition, see https://fonts.google.com/icons?selected=Material+Icons.value: string
colorColor of the icon.value: string
verticalCenterThe vertical anchor point for the icon. Options are none, top, middle, bottomvalue: string dropdown
horizontalCenterThe horizontal anchor point for the icon. Options are none, left, middle, rightvalue: string dropdown
widthWidth of the icon.value: numeric
heightHeight of the icon.value: numeric
object
object
labels

Settings for the labels on the legend.

NameDescriptionProperty Type
textA template string which is applied to all the labels. Default is [bold]{name}[/].value: string
font

Font settings for the labels.

NameDescriptionProperty Type
weightThe weight of the font.value: numeric
colorThe color of the font.value: string
sizeThe font size.value: numeric
object
object
object
cursor

Settings for the chart cursor.

NameDescriptionProperty Type
enabledEnables all chart cursors that are set to show.value: boolean
seriesBinds the chart cursor to a specified series' data source.value: string
lineX

The chart cursor configuration for the line that intersects the X axis. Options as follows:

NameDescriptionProperty Type
enabled The chart cursor configuration for the line that intersects the X axis.
value: boolean
stroke

Settings for the stroke. Options as follows:

NameDescriptionProperty Type
colorCursor line stroke color. See Color Selector.color
widthCursor line stroke widthvalue: numeric
opacityCursor line opacity. 0 is fully transparent, 1 is fully opaque.value: numeric
dashArraySVG dashed array. The pattern of dashes and gaps used to paint the stroke. It's a list of comma 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".array
object
object
lineY

The chart cursor configuration for the line that intersects the Y axis. Options as follows:


NameDescriptionProperty Type
enabledThe chart cursor configuration for the line that intersects the Y axis.value: boolean
stroke

Settings for the stroke. Options as follows:

NameDescriptionProperty Type
colorCursor line stroke color. See Color Selector.color
widthCursor line stroke widthvalue: numeric
opacityCursor line opacity. 0 is fully transparent, 1 is fully opaque.value: numeric
dashArraySVG dashed array. The pattern of dashes and gaps used to paint the stroke. It's a list of comma 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".array
object
integer


object
enableTransitionsWhether the transition animations are enabled for this chart. Default is false (disabled).boolean
scrollBars

Configuration for the scroll bars on the chart. Options as follows:

NameDescriptionProperty Type
horizontal

Settings for horizontal scrollbars. Options as follows:

NameDescriptionProperty Type
enabled Whether the horizontal scrollbar is enabled for this chart. Default is true (enabled).value: boolean
series Binds the horizontal scroll bar to a series.array
object
vertical

Settings for vertical scrollbars. Options as follows:

NameDescriptionProperty Type
enabledWhether the vertical scrollbar is enabled for this chart. Default is true (enabled).value: boolean
seriesBinds the vertical scroll bar to a series.array
object
object
background

Configuration for the background of the chart.

NameDescriptionProperty Type
renderSets the render mode for the chart background. Options are none, gradient, or color. Default is none.value: string dropdown
gradient

Sets the gradient configuration for the chart background. Options are:

NameDescriptionProperty Type
direction Sets the direction of the gradient. Options are linear or radial.value: string dropdown
rotation Gradient rotation. Applies only to the linear gradient. Default is 0.value: numeric
colors

Colors to be used in the gradient.

array
object
colorColor to be used in background if color property is set under render. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value.color
opacityOpacity of background of the chart. 0 is fully transparent, 1 is fully opaque.value: numeric
object
xAxes

Configuration properties for the X Axes of the chart. Options as follows:

NameDescriptionProperty Type
nameA unique name to identify this axis configuration object. This field is required in order to configure the series.value: string
label

Enables or disables a label for the x axis.

NameDescriptionProperty Type
enabledEnables a label drawn alongside this axis.value: boolean
text Label text.value: string
colorLabel color. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.color
object
inversedIndicates if the scale of the axis should be flipped.value: boolean
visibleMake the label visible, if label is enabled.value: boolean
tooltip

Tool tip configuration for the axis. Options as follows:

NameDescriptionProperty Type
enabled Enables the tooltip. Default is true.value: boolean
text Tooltip text.value: string
cornerRadius Radius for the corner of tooltip.value: numeric
pointerLength Length (in pixels) for the pointer on the tooltip.value: numeric
background Configuration for the color and opacity of the background of the tooltip. See Color Selector.color
object
renderSets the axis type to render. Options are category, date, or value. Default is date.value: string dropdown
category

Category axis configuration. Applied when render is set to category. Groups data items into categories and allots equal space for each. Break settings tell the category axis to remove a certain range from its scale. Options as follows:

NameDescriptionProperty Type
enabled Enables a break range. Default is false.value: boolean
startCategory Start point of the break.value: string 
endCategory End point of the break.value: string 
size The break size as a decimal percentage of the removed values.value: numeric
object
date

Date axis configuration. Applied when render is set to date. Uses data and time scale. Options as follows:

NameDescriptionProperty Type
baseInterval Adjusts the granularity of the time scale. Otherwise will adjust intelligently by default. Options as follows:
NameDescriptionProperty Type
enabledEnables or disables baseInteval.value: boolean
timeUnitSpecifies the base time to apply to this time scale. Options are minute, second, hour, day, week, or year.value: string dropdown
countSpecifies how many time units each data item was collected.value: numeric
skipEmptyPeriodsRemoves empty time units from display. Using this feature affects performance. Will reset the use of axis breaks if true.value: boolean
object
range

You can optionally adjust the date range. Otherwise will auto adjust by default. Options as follows:

NameDescriptionProperty Type
maxMaximum date in this range.value: string
minMinimum date in this range.value: string
useStrictStrictly enforces start and end values.value: boolean


object
break

Tells the date axis to remove a certain range from its scale. Options as follows:

NameDescriptionProperty Type
inputFormatSets the date format of the axis value from the data source.value: string dropdown
formatSets the date format for the axis labels.value: string dropdown


object



object
value

Value axis configuration. Applied when render is set to date. Uses data and time scale. Options as follows:

NameDescriptionProperty Type
range

You can optionally adjust the date range. Otherwise will auto adjust by default. Options as follows:

NameDescriptionProperty Type
maxMaximum date in this range.value: string
minMinimum date in this range.value: string
useStrictStrictly enforces start and end values.value: boolean
object
logarithmicUse logarithmic scale. Useful if data varies greatly within the relevant series. Default is false.value: boolean
break

Tells the value axis to remove a certain range from its scale. Options as follows:

NameDescriptionProperty Type
enabledEnables a break range. Default is false.value: boolean
startValueStart point of the break.value: numeric
endValueEnd point of the break.value: numeric
sizeThe break size as a decimal percentage of the removed values.value: numeric


object
formatA number format string to be applied against numbers if in number rendering mode. Options are number, integer, four decimal precision, percent, scientific, currency, currency (rounded), or abbreviation.value: string dropdown
object
appearance

Appearance options for the x axis. Options as follows:

NameDescriptionProperty Type
opposite Renders the axis on the opposite side. Default is falsevalue: boolean
inside Renders the axis labels on the inside of the axis. Default is false.value: boolean
labels

Axis label configuration:

NameDescriptionProperty Type
colorAxis label color.color
opacityAxis label opacity.value: numeric
rotationRotation of the label. Default is 0.value: numeric
wrapWhether or not to wrap the label text.value: boolean
object
grid

Configures the color, opacity and SVG dashed array of the grid lines.

NameDescriptionProperty Type
colorAxis grid color.color
opacityAxis grid opacity.value: numeric
dashArraySVG dashed array. The pattern of dashes and gaps used to paint the stroke. It's a list of comma 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: string
minDistanceThe minimum distance between grid lines.value: numeric
positionDefines the grid's relative position within the chart. A range from 0 to 1, with 0 meaning start and 1 meaning end.value: numeric


object
font

Configures the axis font size and weight.

NameDescriptionProperty Type
sizeAxis font size.value: numeric
weightAxis font weight.value: numeric


object
object
array
yAxes

Configuration properties for the Y Axes of the chart.

NameDescriptionProperty Type
nameA unique name to identify this axis configuration object. This field is required in order to configure the series.value: string 
label

Enables or disables a label for the y axis. Options as follows:

NameDescriptionProperty Type
enabledEnables a label drawn alongside this axis.value: boolean
textLabel text.value: string
colorLabel color. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.color
value: boolean
inversedIndicates if the scale of the axis should be flipped.value: boolean
visibleMake the label visible, if label is enabled.value: boolean
tooltip

Tool tip configuration for the axis. Options as follows:

NameDescriptionProperty Type
enabledEnables the tooltip. Default is true.value: boolean
textTooltip text.value: string
cornerRadiusRadius for the corner of tooltip.value: numeric
pointerLengthLength (in pixels) for the pointer on the tooltip.value: numeric
backgroundConfiguration for the color and opacity of the background of the tooltip.color
object
renderSets the axis type to render. Options are category, date, or value. Default is date.value: string dropdown
category

Applied when render is set to category. Category axis configuration. Groups data items into categories and allots equal space for each. Options as follows:

NameDescriptionProperty Type
enabledEnables a break range. Default is false.value: boolean
startCategoryStart point of the break.value: string 
endCategoryEnd point of the break.value: string 
sizeThe break size as a decimal percentage of the removed values.value: numeric

date

Applied when render is set to date. Date axis configuration. Uses data and time scale. Options as follows:

NameDescriptionProperty Type
baseIntervalAdjust the granularity of the time scale. Otherwise will adjust intelligently by default.


NameDescriptionProperty Type
enabledEnables or disables baseInteval.value: boolean
timeUnitSpecifies the base time to apply to this time scale. Options are minute, second, hour, day, week, or year.value: string dropdown
countSpecifies how many time units each data item was collected.value: numeric
skipEmptyPeriodsRemoves empty time units from display. Using this feature affects performance. Will reset the use of axis breaks if true.value: boolean
object
range

You can optionally adjust the date range. Otherwise will auto adjust by default. Options as follows:

NameDescriptionProperty Type
maxMaximum date in this range.value: string
minMinimum date in this range.value: string
useStrictStrictly enforces start and end values.value: boolean
object
break

Tells the date axis to remove a certain range from its scale. Options as follows:

NameDescriptionProperty Type
enabledEnables a break range. Default is false.value: boolean
startDateStart date of the break.value: string 
endDateEnd date of the break.value: string 
sizeThe break size as a decimal percentage of the removed values.value: numeric
object
inputFormat

Sets the date format of the axis value from the data source.

value: string dropdown
formatSets the date format for the axis labels. Options are date, time, or date and time.value: string dropdown
object
value

Applied when render is set to value. Value axis configuration. Uses data and time scale. Options as follows:

NameDescriptionProperty Type
range

You can optionally adjust the date range. Otherwise will auto adjust by default. Options as follows:

NameDescriptionProperty Type
maxMaximum date in this range.value: string
minMinimum date in this range.value: string
useStrictStrictly enforces start and end values.value: boolean
object
logarithmicUse logarithmic scale. Useful if data varies greatly within the relevant series.value: boolean
break

Tells the value axis to remove a certain range from its scale. Options as follows:

NameDescriptionProperty Type
enabledEnables a break range. Default is false.value: boolean
startValueStart point of the break.value: numeric
endValueEnd point of the break.value: numeric
sizeThe break size as a decimal percentage of the removed values.value: numeric
object
formatA number format string to be applied against numbers if in number rendering mode. Options are number, integer, four decimal precision, percent, scientific, currency, currency (rounded), or abbreviation.value: string dropdown
object
appearance

Appearance options for the y axis. Options as follows:

NameDescriptionProperty Type
oppositeRenders the axis on the opposite side. Default is falsevalue: boolean
insideRenders the axis labels on the inside of the axis. Default is false.value: boolean
labels

Axis label configuration:

NameDescriptionProperty Type
colorAxis label color.color
opacityAxis label opacity.value: numeric
rotationRotation of the label. Default is 0.value: numeric
wrapWhether or not to wrap the label text.value: boolean
object
grid

Configures the color, opacity and SVG dashed array of the grid lines.

NameDescriptionProperty Type
colorAxis grid color.color
opacityAxis grid opacity.value: numeric
dashArraySVG dashed array. The pattern of dashes and gaps used to paint the grid. It's a list of comma separated lengths (in pixels) and percentages (percentage of the total grid 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: string
minDistanceThe minimum distance between grid lines.value: numeric
positionDefines the grid's relative position within the chart. A range from 0 to 1, with 0 meaning start and 1 meaning end.value: numeric
object
font

Configures the font size and weight.

NameDescriptionProperty Type
sizeAxis font size.value: numeric
weightAxis font weight.value: numeric


object
object
array
series

An array of series configurations to apply to this chart.

NameDescriptionProperty Type
nameA unique name to identify this application of this series. value: string
label

Series label to use with legend.

NameDescriptionProperty Type
textLabel text.value: string


object
visibleEnables series visibility. Default is true.value: boolean
hiddenInLegendHides the series in the legend. Default is false.value: boolean
defaultStateSeries default state configuration. Default is true (visible).value: boolean
data

Data settings for the series. Options as follows:

NameDescriptionProperty Type
source Name of the data source to bind to this series.value: string
xThe y value key from the specified data source to be used in this series. Value is a string value if the data source is a dataset or an array of objects. Value is an index if the data source is an array of arrays.value: string or index
yThe y value key from the specified data source to be used in this series. Value is a string value if the data source is a dataset or an array of objects. Value is an index if the data source is an array of arrays.value: string or index
object
xAxisName of the x axis configuration object to be used with this series.value: string
yAxisName of the y axis configuration object to be used with this series.value: string
zIndexSets the series stack order relative to other series.value: numeric
tooltip

Tool tip configuration for the series. Options as follows:

NameDescriptionProperty Type
enabledEnables the tooltip. Default is true.value: boolean
textA format string to apply to the tooltip text.value: string
cornerRadiusRadius for the corner of tooltip.value: numeric
pointerLengthLength (in pixels) for the pointer on the tooltip.value: numeric
background

Configuration for the color and opacity of the background of the tooltip.

NameDescriptionProperty Type
colorBackground color. See Color Selector.color
opacityBackground opacity.value: numeric
object
object
renderThe series render mode. Options are candlestick, column, line, stepLine. Default is line.value: string dropdown
candlestick

When render is set to candlestick. These are the candlestick settings. Options as follows:

NameDescriptionProperty Type
open

Open data settings

NameDescriptionProperty Type
xName of the field that holds the open data for the horizontal axis.value: string
yName of the field that holds the open data for the vertical axis.value: string
object
high

High data settings.

NameDescriptionProperty Type
xName of the field that holds the high data for the horizontal axis.value: string
yName of the field that holds the high data for the vertical axis.value: string
object
low

Low data settings.

NameDescriptionProperty Type
xName of the field that holds the low data for the horizontal axis.value: string
yName of the field that holds the low data for the vertical axis.value: string
object
appearance

Appearance settings.

NameDescriptionProperty Type
fill
NameDescriptionProperty Type
colorCursor line stroke color.color
opacityOpacity of the stroke.value: numeric
object
stroke

Series stroke configuration.

NameDescriptionProperty Type
colorCursor line stroke color.color
opacityOpacity of the stroke.value: numeric
widthWidth of the stroke, in pixels.value: numeric
object
stackedStacks this column series.value: boolean
deriveFieldsFromData



fill
NameDescriptionProperty Type
colorCursor line stroke color.color
opacityOpacity of the stroke.value: numeric

stroke
NameDescriptionProperty Type
colorCursor line stroke color.color
opacityOpacity of the stroke.value: numeric
widthWidth of the stroke, in pixels.value: numeric

object
heatRules

These heat rules apply to the fill of the columns.

NameDescriptionProperty Type
enabledWhether or not heat rules are enabled. Default is false.value: boolean
maxColor for max.value: string
minColor for min.value: string
dataField
value: string
object
object


object
column

When render is set to column. These are the column settings. Options as follows:

NameDescriptionProperty Type
open

Open settings.

NameDescriptionProperty Type
xName of the field that holds the open data for the horizontal axis.value: string
yName of the field that holds the open data for the vertical axis.value: string
object
appearance

Appearance settings.

NameDescriptionProperty Type
fill

Fill settings.

NameDescriptionProperty Type
colorCursor line stroke color.color
opacityOpacity of the stroke.value: numeric
object
stroke

Stroke settings.

NameDescriptionProperty Type
colorCursor line stroke color.color
opacityOpacity of the stroke.value: numeric
widthWidth of the stroke, in pixels.value: numeric
object
widthPercentvalue: numeric
heightPercentvalue: numeric
stackedStacks this column series.value: boolean

deriveFieldsFromData

NameDescriptionProperty Type
fill

Fill settings.

NameDescriptionProperty Type
colorCursor line stroke color.color
opacityOpacity of the stroke.value: numeric
object
stroke

Stroke settings.

NameDescriptionProperty Type
colorCursor line stroke color.color
opacityOpacity of the stroke.value: numeric
widthWidth of the stroke, in pixels.value: numeric
object
object
heatRules

These heat rules apply to the fill of the columns.

NameDescriptionProperty Type
enabledWhether or not heat rules are enabled. Default is false.value: boolean
maxColor for max.value: string
minColor for min.value: string
dataField
value: string
object
object




object
line

When render is set to line. These are the line settings. Options as follows:

NameDescriptionProperty Type
open

Configures the open data.

NameDescriptionProperty Type
xName of the field that holds the open data for the horizontal axisvalue:string
yName of the field that holds the open data for the vertical axisvalue:string
object
appearance

Configures the appearance of the line series. Options as follows:

NameDescriptionProperty Type
connect Connects the lines over empty data points. Default is true.value: boolean
tensionX Horizontal tension setting of the line. Range is 0 to 1. A 1 value indicates high tension, so the line is maximally attracted to the points it connects (i.e. straight line). A 0 value means the opposite. Default is 1.value: numeric
tensionY Vertical tension setting of the line. Range is 0 to 1. A 1 value indicates high tension, so the line is maximally attracted to the points it connects (i.e. straight line). A 0 value means the opposite. Default is 1.value: numeric
minDistance The minimum distance (in pixels) between two points. Default is 0.5.value: numeric
stroke

Series stroke configuration. Options as follows:

NameDescriptionProperty Type
widthWidth of the stroke, in pixels. Default is 3.value: numeric
opacityOpacity of the stroke.value: numeric
colorCursor line stroke color.color
dashArraySVG dash array. The pattern of dashes and gaps used to paint the stroke. It's a list of comma 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".array


object
fill

Series color configuration.

NameDescriptionProperty Type
colorThe color to draw this series.value: color
opacityOpacity as a percentage from 0 to 1. 0 is transparent, 1 is opaque.value: float


object
bullets

Series bullet configuration. Type of bullet to render (circle or rectangle) for each pen.

NameDescriptionProperty Type
enabledEnables bullets.value: boolean
renderType of bullet to render. Options are circle, rectangle, or icon.value: string dropdown
widthBullet width.value: numeric
heightBullet height.value: numeric
label

Label properties.

NameDescriptionProperty Type
textLabel text.value: string
position.dxLabel x position.value: numeric
position.dyLabel y position.value: numeric
object
tooltip

Tooltip configuration.

NameDescriptionProperty Type
enabledEnables the tooltip.value: boolean
textTooltip text. Can be a format string.value: string
cornerRadiusThe corner radius.value: numeric
pointerLengthThe pointer length.value: numeric
backgroundBackground color and opacity for the tool tip.object
object
fill

Fill settings.

NameDescriptionProperty Type
colorThe fill color for the bullets in this series. See Color Selector.color
opacityThe bullet opacity.value: numeric
object
stroke

Stroke settings.

NameDescriptionProperty Type
widthWidth of the stroke, in pixels. Default is 3.value: numeric
opacityOpacity of the stroke.value: numeric
colorCursor line stroke color.color
object
rotationRotation of the bullet.value: numeric
deriveFieldsFromData

Settings for derived fields.

NameDescriptionProperty Type
fill

Fill settings.

NameDescriptionProperty Type
colorThe fill color for the derived fields in this series. See Color Selector.color
opacityThe derived field opacity.value: numeric
object
stroke

Stroke settings.

NameDescriptionProperty Type
colorCursor line stroke color.color
opacityOpacity of the stroke.value: numeric
widthWidth of the stroke, in pixels.value: numeric
object
rotationDerived field rotation (0-360).value: numeric
object
heatRules

These heat rules apply to the radius of a circular bullet.

NameDescriptionProperty Type
enabledWhether or not heat rules are enabled. Default is false.value: boolean
maxColor for max.value: string
minColor for min.value: string
dataFieldThe data field.value: string
object


array
object
object
stepLine

When render is set to stepLine. These are the stepLine settings. Options as follows:

NameDescriptionProperty Type
open

Configures the open data.

NameDescriptionProperty Type
xName of the field that holds the open data for the horizontal axisvalue:string
yName of the field that holds the open data for the vertical axisvalue:string
object
appearance

Configures the following options:

NameDescriptionProperty Type
connectConnects the lines over empty data points. Default is true.value: boolean
tensionXHorizontal tension setting of the line. Used to create smooth or sharp lines Range is 0 to 1. A 1 value indicates high tension, so the line is maximally attracted to the points it connects (i.e. straight line). A 0 value means the opposite. Default is 1.value: numeric
tensionYVertical tension setting of the line. Used to create smooth or sharp lines Range is 0 to 1. A 1 value indicates high tension, so the line is maximally attracted to the points it connects (i.e. straight line). A 0 value means the opposite. Default is 1.value: numeric
minDistanceThe minimum distance (in pixels) between two points. Default is 0.5.value: numeric
stroke

Series stroke configuration. Options are as follows:

NameDescriptionProperty Type
widthWidth of the stroke, in pixels. Default is 3.value: numeric
opacityOpacity of the stroke. 0 is fully transparent, 1 is fully opaque. Default is 1.value: numeric
colorColor of border around each pie section.  See Color Selector.color
dashArraySVG dashed array. The pattern of dashes and gaps used to paint the stroke. It's a list of comma 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".array


object
fill

Fill settings.

NameDescriptionProperty Type
colorThe fill color for the columns in this series. See Color Selector.color
opacityThe column opacity.value: numeric
object
bullets

Series bullet configuration.

NameDescriptionProperty Type
enabledEnables bullets.value: boolean
renderType of bullet to render. Options are circle or label.value: string dropdown
widthBullet width.value: numeric
heightBullet height.value: numeric
label

Label settings.

NameDescriptionProperty Type
textLabel text.value: string
positionLabel position.object
object
tooltip

Tooltip settings.

NameDescriptionProperty Type
enabledEnables the tooltip.value: boolean
textTooltip text. Can be a format string.value: string
cornerRadiusThe corner radius.value: numeric
pointerLengthThe pointer length.value: numeric
backgroundBackground color and opacity for the tool tip.object
object
fill

Fill settings.

NameDescriptionProperty Type
colorThe fill color for the columns in this series. See Color Selector.color
opacityThe column opacity.value: numeric
object
stroke

Stroke settings.

NameDescriptionProperty Type
colorCursor line stroke color.color
opacityOpacity of the stroke.value: numeric
widthWidth of the stroke, in pixels.value: numeric
object
rotationBullet rotation. Value can be 0 to 360.value: numeric
deriveFieldsFromData

Settings for derived fields.

NameDescriptionProperty Type
fill

Fill settings.

NameDescriptionProperty Type
colorThe fill color for the columns in this series. See Color Selector.color
opacityThe column opacity.value: numeric
object
stroke

Stroke settings.

NameDescriptionProperty Type
colorCursor line stroke color.color
opacityOpacity of the stroke.value: numeric
widthWidth of the stroke, in pixels.value: numeric
object
rotationBullet rotation (0-360).value: numeric
object
heatRules

These heat rules apply to the radius of a circular bullet.

NameDescriptionProperty Type
enabledWhether or not heat rules are enabled. Default is false.value: boolean
maxColor for max.value: string
minColor for min.value: string
dataField
value: string
object



object
object
object
array
styleSets 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

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.

Examples
Example 1

This example demonstrates how to configure a Heatmap, where the value of each cross axis is represented as a color along a gradient. This style of chart is largely accomplished by setting the series "render" property to "column", and enabling "heatRules". 

The data used in this example is shown in the code block below: The x-axis is set to the "year" key, while the y-axis is set to the "fruit" key. The "dataField" property under "heatRules" is set to the "count" key. 

year - the x-axis

fruit - the y-axis

count - determines the color used in the block. 

[
  {
    "year": 2015,
    "fruit": "apple",
    "count": 20
  },
  {
    "year": 2015,
    "fruit": "orange",
    "count": 400
  },
  {
    "year": 2015,
    "fruit": "banana",
    "count": 150
  },
  {
    "year": 2016,
    "fruit": "apple",
    "count": 200
  },
  {
    "year": 2016,
    "fruit": "orange",
    "count": 300
  },
  {
    "year": 2016,
    "fruit": "banana",
    "count": 400
  },
  {
    "year": 2017,
    "fruit": "apple",
    "count": 200
  },
  {
    "year": 2017,
    "fruit": "orange",
    "count": 400
  },
  {
    "year": 2017,
    "fruit": "banana",
    "count": 30
  }
]

Notable Property Configurations

The example requires both an X axis and a Y axis. In addition to a series

PROPS PathProperty DescriptionValue
xAxes.0.renderMakes the chart group values in the X Axis, and provides equal padding between each category. Partially responsible for rendering boxes on the chart. category
yAxes.0.renderMakes the chart group values in the Y Axis, and provides equal padding between each category. Partially responsible for rendering boxes on the chart.  category
series.0.renderWhen combined with "category" renders for the X and Y axes, allows the categories boxes to be rendered on the chart. column
series.0.column.appearance.heatRules.enabledMakes the chart change the color on each category based on dataField key ("count", in our example), applying the min and max colors. true
series.0.column.appearance.heatRules.maxThe property represents which color to use for higher values.#26E3B1
series.0.column.appearance.heatRules.minThe property represents which color to use for lower values. 

#E5DBDB (pick a color you want to represent low colors)

series.0.column.appearance.heatRules.dataFieldDetermines which key in the underlying data should be used to determine the color of thcount

Example Configuration

The JSON string below can be used to replicate the heatmap example. Simply copy the contents of the code block below (double click on any part of the JSON to select all of it) , and paste it into a container in your designer. 

[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "legend": {
        "enabled": false
      },
      "xAxes": [
        {
          "name": "year",
          "label": {
            "enabled": true,
            "text": "year",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "category",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": true,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": 60,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "yAxes": [
        {
          "name": "fruit",
          "label": {
            "enabled": true,
            "text": "fruit",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "category",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d/yyyy HH:mm:ss"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": null,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "series": [
        {
          "name": "count",
          "label": {
            "text": "Process Temp"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "data",
            "x": "year",
            "y": "fruit"
          },
          "xAxis": "year",
          "yAxis": "fruit",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueY}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "column",
          "candlestick": {
            "open": {
              "x": "",
              "y": ""
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "column": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "width": null,
              "height": null,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": true,
                "max": "#26E3B1",
                "min": "#E5DBDB",
                "dataField": "count"
              }
            }
          },
          "line": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": false,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "stepLine": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          }
        }
      ],
      "style": {
        "marginRight": "100px",
        "paddingRight": "100px"
      },
      "dataSources": {
        "data": [
          {
            "year": 2015,
            "fruit": "apple",
            "count": 20
          },
          {
            "year": 2015,
            "fruit": "orange",
            "count": 400
          },
          {
            "year": 2015,
            "fruit": "banana",
            "count": 150
          },
          {
            "year": 2016,
            "fruit": "apple",
            "count": 200
          },
          {
            "year": 2016,
            "fruit": "orange",
            "count": 300
          },
          {
            "year": 2016,
            "fruit": "banana",
            "count": 400
          },
          {
            "year": 2017,
            "fruit": "apple",
            "count": 200
          },
          {
            "year": 2017,
            "fruit": "orange",
            "count": 400
          },
          {
            "year": 2017,
            "fruit": "banana",
            "count": 30
          }
        ]
      }
    },
    "meta": {
      "name": "XYChart"
    },
    "position": {
      "basis": "536px"
    },
    "custom": {}
  }
]
Example 2

XY Chart Gantt Style Example

In addition to basic data plotting, an XY Chart can be used to plot horizontal bar across different lanes, in this fashion: 

This can useful when it comes to machine downtime scheduling, shift scheduling, and maintenance scheduling. To achieve this functionality with the XY Chart, follow the example below:

  1.  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.
  2.  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.



  3. From the Perspective Component Palette, drag and drop a XY Chart onto your newly created view. 
  4. Click to select your newly added XY Chart and from the property editor, click on the + icon next to the dataSources property and select Array to create a new data source array and name it schedule_data. 



  5. Right click on your newly created schedule_data dataSource and paste the following: 

    [
      {
        "name": "John",
        "fromDate": "2018-01-01 08:00",
        "toDate": "2018-01-01 10:00",
        "color": "#67b7dc"
      },
      {
        "name": "John",
        "fromDate": "2018-01-01 12:00",
        "toDate": "2018-01-01 15:00",
        "color": "#67b7dc"
      },
      {
        "name": "John",
        "fromDate": "2018-01-01 15:30",
        "toDate": "2018-01-01 21:30",
        "color": "#67b7dc"
      },
      {
        "name": "Jane",
        "fromDate": "2018-01-01 09:00",
        "toDate": "2018-01-01 12:00",
        "color": "#67b7dc"
      },
      {
        "name": "Jane",
        "fromDate": "2018-01-01 13:00",
        "toDate": "2018-01-01 17:00",
        "color": "#67b7dc"
      },
      {
        "name": "Peter",
        "fromDate": "2018-01-01 11:00",
        "toDate": "2018-01-01 16:00",
        "color": "#67b7dc"
      },
      {
        "name": "Peter",
        "fromDate": "2018-01-01 16:00",
        "toDate": "2018-01-01 19:00",
        "color": "#67b7dc"
      }
    ]

    It is important to note that any data that you wish to plot on the XY Chart to build a Gantt Chart needs to come in the format specified by the schedule_data property above. 

  6. Set XY Chart's variables cursor.series and scrollbars.horizontal.series to "schedule data".
  7. Set the X axes properties as follows:
    1. Configure the X axes date format by setting the property xAxes[0].date.format to be a date format that works for you. For this example, we chose date time from the dropdown, which sets it to "M/d/yyyy HH:mm:ss".
    2. Set the properties xAxes[0].appearance.grid.minDistance to NULL.

  8. Set the Y axes properties as follows:
    1. Delete the yAxes[1] property since it will not be used.
    2. Set the property yAxes[0].name to "Operator".
    3. Disable the Y axes label by setting the yAxes[0].label.enabled property to false.
    4. Set the yAxes[0].label.text property to "Schedule Data". 
    5. Set the property yAxes[0].render to "category".
    6. Set your yAxes[0].appearance.grid.position to "0".

  9. Set the series properties as follows:
    1. Delete the series[1] property since it will not be used.
    2. Set your series[0].name to "schedule data". This links your Horizontal Scroll bar from step 6 to your chart's series.
    3. Set your series[0].data.source to "schedule_data". This links your chart's series to your data source from step 4.
    4. Configure your series[0].data.x to be "toDate" and your series[0].data.y to be "name". 
    5. Configure your series[0].xAxis to be "time" and your series[0].yAxis to be "Operator". 
    6. Set your series[0].render property to "column".
    7. Your series[0].column.open.x property must be set to "fromDate".
    8. To help with data visualization, set your series[0].tooltip.text to "{name}: [bold]{fromDate} - {toDate}[/]".

  10. Lastly, we can map the color key in our data source to each block of data. Set series[0].column.deriveFieldsFromData.fill.color to "color".
  11. Save your project.
  12. Put the Designer into Preview mode to see the chart in action. 

Following these steps should result in the chart below: 





  • No labels