Perspective - Gauge

The Gauge component in Perspective provides a way to show realtime values in a range as they change. The gauge can have one or two axis. It is fully customizable in its appearance, from colors, line widths, needle length, radius, and more.

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

The Gauge component has three pre-configured variants:

Half Circle - Default layout with a half-circle gauge.
3/4 Circle - Layout with a 3/4 circle gauge.
Full Axis - Layout with a full axis gauge.

For an example of each variant, see the examples section below.

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

value

Numeric value for the gauge to display. Default is 0.

value: numeric

secondaryValue

Optional secondary value for the gauge to display on a second axis. Default is 0.

value: numeric

startAngle

Radial position for the start of the gauge's axis. Default is 180.

value: numeric

endAngle

Radial position for the end of the gauge's axis. Default is 360.

value: numeric

outerAxis

Sets the values for an outer axis on the gauge.

Click here to see the outerAxis properties

Name

Description

Property Type

data

What value this axis and its needle should display. Can be set to the value or secondary value of the gauge.

value: string dropdown

show

Whether the outer axis is displayed. Default is true (show).

value: boolean

minValue

Minimum gauge value for this axis. Default is zero (0).

value: numeric

maxValue

Maximum gauge value for this axis. Default is 120.

value: numeric

width

Width of the line (in pixels) that represents the outer axis.

value: numeric

color

Color of the arc line that represents the outer axis. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.

color

percentRadius

Radius of the outer axis, as a percentage of the total chart radius.

value: numeric

ranges

Zones defined on the gauge arc line with a unique color. Array values always start at 0 and increment. Each array item has the following properties:

Name	Description	Property Type
start	Value at which this range starts.	value: numeric
end	Value at which this range ends.	value: numeric
width	Width of this axis, in pixels.	value: numeric
color	Color to apply to this range of the dial. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value.	color

array

needle

Settings for the needle on the gauge. Options as follows:

Name	Description	Property Type
origin	Distance from the gauge's center or at which the needle originates, as a percentage of the radius. For example, a value of 0 indicates the needle starts at the center point of the gauge. A value of 50 indicates it starts 50% from the center point.	value: numeric
reach	How far the needle reaches from the center of the gauge towards the outer dial, as a percentage of the radius. For example, a value of 100 indicates the needle will reach all the way to the outer axis.	value: numeric
color	Color of the gauge's needle. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.	color

object

tickMarks

Settings for the display of the tick marks on the outer access. Options as follows:

Name	Description	Property Type
color	Color of the tick marks. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.	color
thickness	Thickness of the tick marks, in pixels. Default is 1.	value: numeric
length	Length of the tick marks, in pixels. Default is 10.	value: numeric

object

innerAxis

Sets the values for an inner axis on the gauge.

Click here to see the innerAxis properties

Name

Description

Property Type

data

What value this axis and its needle should display. Can be set to the value or secondary value of the gauge.

value: numeric

show

Whether the inner axis is displayed on the gauge. Default is false (don't show).

value: boolean

minValue

Minimum gauge value for this axis. Default is zero (0).

value: numeric

maxValue

Maximum gauge value for this axis. Default is 80.

value: numeric

width

Width of the line (in pixels) that represents the inner axis.

value: numeric

color

Color of the arc line that represents the inner axis. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.

color

percentRadius

Radius of the inner axis, as a percentage of the total chart radius.

value: numeric

ranges

Number of zones defined on the gauge arc line with a unique color.

Name	Description	Property Type
start	Value at which this range starts.	value: numeric
end	Value at which this range ends.	value: numeric
width	Width of this axis, in pixels.	value: numeric
color	Color to apply to this range of the dial. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.	color

array

needle

Settings for the display of the needle on the inner access. Options as follows:

Name	Description	Property Type
origin	Distance from the gauge's center at which the needle originates, as a percentage of the radius. For example, a value of 0 indicates the needle starts at the center point of the gauge. For example, a value of 50 indicates it starts 50% from the center point.	value: numeric
reach	Length of the needle in percentage. For example, a value of 100 indicates the needle will reach all the way to the inner axis.	value: numeric
color	Color of the gauge's needle. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.	color

object

tickMarks

Settings for the display of the tick marks on the inner access. Options as follows:

Name	Description	Property Type
color	Color of the tick marks. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.	color
thickness	Thickness of the tick marks, in pixels. Default is 1.	value: numeric
length	Length of the tick marks, in pixels. Default is 10.	value: numeric

object

backgroundColor

Color applied as a background within the gauge. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.

color

animate

Whether needle should be animated in a sweeping motion when value changes. Default is false.

value: boolean

reverseScale

If true, the gauge will reverse the direction from minValue to maxValue on its dial.

value: boolean

style

Sets a style for this gauge. 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

Component Events

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

In this example we added a fourth axis (outerAxis.ranges.3) and configured it.

Property	Value
Value	75
props.outerAxis.maxValue	150
props.outerAxis.ranges.3.start	120
props.outerAxis.ranges.3.end	150
props.outerAxis.ranges.3.width	20
props.outerAxis.ranges.3.color	#C077D8

Example 2 - 3/4 Circle Variant

Start with the Gauge 3/4 Circle variant. Set the properties as follows:

Property	Value
props.startAngle	90
props.endAngle	360
props.outerAxis.ranges.0.color	#FFFF00
props.outerAxis.ranges.1.color	#FF8C00
props.outerAxis.ranges.2.color	#D90000

Example 3 - Full Axis Variant

Start with the Gauge Full Axis variant. Set the properties as follows:

Property	Value
props.startAngle	135
props.endAngle	405
props.outerAxis.maxValue	300
props.outerAxis.ranges.0.end	100
props.outerAxis.ranges.1.start	100
props.outerAxis.ranges.1.end	200
props.outerAxis.ranges.2.start	200
props.outerAxis.ranges.2.end	300
props.outerAxis.tickMarks.color	#000000
props.outerAxis.tickMarks.thickness	2
props.style.color	#000000
props.style.fontFamily	Verdana
props.style.fontSize	12
props.style.fontWeight	bold

OTHER USER MANUAL VERSIONS

GETTING STARTED

OTHER EDITIONS

LAUNCHERS

MODULES

PLATFORM

APPENDIX

TUTORIALS & HELPFUL TRICKS

PARTNER LINKS

RESOURCES

OTHER USER MANUALS

Offline Ignition Manual

Employees

Properties

Component Events

Examples

Example 1

Example 2 - 3/4 Circle Variant

Example 3 - Full Axis Variant