Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


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

Skip to end of metadata
Go to start of metadata


General

Component Palette Icon:





Description

The Sparkline chart is a minimalistic chart component that displays a line-chart history for a single datapoint. Sparklines were invented by Edward Tufte as a way to show a great deal of contextual information in a very small amount of space. Sparklines are typically used to display the recent history (up to current time) of a datapoint so that the viewer can quickly discern the recent trend of a datapoint: is it rising? falling? oscillating? etc..

To use a sparkline, bind its Data property either to a Tag Historian realtime query, or to a database query. There should be two columns in this dataset: the first one a date column, the second a number. Each row will become a datapoint on the chart, and the dataset must be sorted by time in ascending order.

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

Instead of using axes to convey scale, the sparkline can display a band of color across the back of the chart which indicates the desired operating range of the datapoint. In this way, it is instantly obvious when a value is in its expected range, above that range, or below. The sparkline automatically configures its internal axes based on the data given to it. To display a desired range, fill in the props.desired.high and props.desired.low properties.

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
points

Data points to plot. Accepts the following: May be a dataset, or an array of values or of objects containing X or Y coordinates. Also may be a string formatted with X and Y values separated by a comma.

  • An array of numbers containing X or Y coordinates.
  • A string of space delimited points where x and y are separated by a comma, i.e. '0,20 1,35 2,15'
  • An array of objects, where each object contains an x and a y property, and where each property's value is a number.
  • A dataset of a single column of number type.
  • A dataset of two columns, the first representing the x value and the second column representing the y value. The first column can be either of type number or type date. Dates and Timestamps are converted to unix timestamps which is used as the x value.
array or dataset
colorColor of the line. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.color
widthThickness of the line, in pixels.value: numeric
opacity

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

The opacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.

value: numeric
dashArray

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

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
range

The following feature is new in Ignition version 8.0.3
Click here to check out the other new features
Settings for the upper and lower edge of the chart.

NameDescriptionProperty Type
highA fixed value for the upper edge of the chart as a number.value: numeric
lowA fixed value for the lower edge of the chart as a number.value: numeric
object
desired

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

Settings for the desired properties operating range.

NameDescriptionProperty Type
highThe high value of the desired operating range.value: numeric
lowThe low value of the desired operating range.value: numeric
stroke

Settings for the stroke. Options as follows:

NameDescriptionProperty Type
colorColor of the line. See Color Selector.color
widthWidth of the line in pixels.value: numeric
opacityOpacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.value: numeric
dashArrayThe 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 stroke length for the desired operating range) 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

Settings for the fill for the desired range. Options as follows:

NameDescriptionProperty Type
colorFill color of the desired range. See Color Selector.color
opacityOpacity of the fill ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.value: numeric
object

marker

The following feature is new in Ignition version 8.0.3
Click here to check out the other new features
Settings for the first, last, high, and low markers on the chart.

NameDescriptionProperty Type
first

Settings for the first marker on the chart.

NameDescriptionProperty Type
shapeShape of the marker used to indicate the first point. Options are circle, triangle, or square. Default is circle.value: string dropdown
sizeSize of the marker, in pixels.value: numeric
strokeSettings for the stroke for the first marker. Options as follows:
NameDescriptionProperty Type
colorColor of the line. See Color Selector.color
widthWidth of the line in pixels. .value: numeric
opacityOpacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.value: numeric
dashArrayThe 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 stroke length for the desired operating range) 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

Settings for the fill for the first marker. Options as follows:

NameDescriptionProperty Type
colorColor of the line. See Color Selector.color
opacityCursor line opacity. 0 is fully transparent, 1 is fully opaque.value: numeric
object
styleSets a style for this component. 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
last

Settings for the last marker on the chart.

NameDescriptionProperty Type
shapeShape of the last marker. Options are circle, triangle, or square. Default is circle.value: string dropdown
sizeSize of the last marker, in pixels.value: numeric
stroke

Settings for the stroke for the last marker. Options as follows:

NameDescriptionProperty Type
colorColor of the line. See Color Selector.color
widthWidth of the line in pixels. value: numeric
opacityOpacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.value: numeric
dashArrayThe 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 stroke length for the desired operating range) 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

Settings for the fill for the last marker. Options as follows:

NameDescriptionProperty Type
colorColor of the line. See Color Selector.color
opacityOpacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.value: numeric
object
styleSets a style for this component. 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
high

Settings for the high marker on the chart.

NameDescriptionProperty Type
shapeShape of the high marker. Options are circle, triangle, or square. Default is square.value: string dropdown
sizeSize of the high marker, in pixels.value: numeric
stroke

Settings for the stroke for the high marker. Options as follows:

NameDescriptionProperty Type
colorColor of the line. See Color Selector.color
widthWidth of the line in pixels. value: numeric
opacityOpacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.value: numeric
dashArrayThe 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 stroke length for the desired operating range) 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

Settings for the fill for the high marker. Options as follows:

NameDescriptionProperty Type
colorColor of the line. See Color Selector.color
opacityOpacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.value: numeric
object
styleSets a style for this component. 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
low

Settings for the low marker on the chart.

NameDescriptionProperty Type
shapeShape of the low marker. Options are circle, triangle, or square. Default is square.value: string dropdown
sizeSize of the marker, in pixels.value: numeric
stroke

Settings for the stroke for the low marker. Options as follows:

NameDescriptionProperty Type
colorColor of the line. See Color Selector.color
widthWidth of the line in pixels. value: numeric
opacityOpacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.value: numeric
dashArrayThe 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 stroke length for the desired operating range) 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

Settings for the fill for the low marker. Options as follows:

NameDescriptionProperty Type
colorColor of the line. See Color Selector.color
opacityOpacity of the line ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.value: numeric
object
styleSets a style for this component. 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
object
styleSets a style for this component. 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
Deprecated Properties
strokeDeprecated and renamed to "color. " Color of the line. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.color
stroke widthDeprecated and renamed to "width." Thickness of the line, in pixels.value: numeric




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

This example demonstrates what changes to the various marker properties can do. In addition, the desired range has been enabled. 

PropertyValue
props.width1
props.dashArray6 2 2 2
props.desired.high60
props.desired.low25
props.desired.stroke.color#AAAAAA
props.desired.stroke.width3
props.desired.stroke.opacity3
props.desired.fill.color#CCFFF
props.desired.fill.opacity4
props.marker.first.shapecircle
props.marker.first.size10
props.marker.first.stroke.color#000000
props.marker.first.fill.color#00AC00
props.marker.last.shapetriangle
props.marker.last.size20
props.marker.last.stroke.color#000000
props.marker.last.fill.color#EF4D4D
props.marker.low.shapesquare
props.marker.low.size7
props.marker.low.stroke.color#000000
props.marker.low.fill.color#0D9D9
props.marker.high.shapesquare
props.marker.high.size7
props.marker.high.stroke.color#000000
props.marker.high.fill.color#FF47FF
props.style.backgroundColor#E2F1Fa
props.style.borderStyleoutset
props.style.borderWidth7px
props.style.borderColor#9BBFBF


  • No labels