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:



Description
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, and radius.

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
valueNumeric value for the gauge to display. Default is 0.value: numeric
secondaryValueOptional secondary value for the gauge to display on a second axis. Default is 0.value: numeric
startAngleRadial position for the start of the gauge's axis. Default is 180.value: numeric
endAngleRadial position for the start of the gauge's axis. Default is 360.value: numeric
outerAxis

Sets the values for an outer axis on the gauge.

NameDescriptionProperty Type
dataWhat value this axis and its needle should display. Can be set to the value or secondary value of the gauge.value: string dropdown
showWhether the outer axis is displayed. Default is true (show).value: boolean
minValueMinimum gauge value for this axis. Default is zero (0).value: numeric
maxValueMaximum gauge value for this axis. Default is 120.value: numeric
widthWidth of the line (in pixels) that represents the outer axis.value: numeric
colorColor 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
percentRadiusRadius 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:

NameDescriptionProperty Type
startValue at which this range starts.value: numeric
endValue at which this range ends.value: numeric
widthWidth of this axis, in pixels.value: numeric
colorColor 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:

NameDescriptionProperty 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:

NameDescriptionProperty 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
object
innerAxis

Sets the values for an inner axis on the gauge.


NameDescriptionProperty Type
dataWhat value this axis and its needle should display. Can be set to the value or secondary value of the gauge.value: numeric
showWhether the inner axis is displayed on the gauge. Default is false (don't show). value: boolean
minValueMinimum gauge value for this axis. Default is zero (0).value: numeric
maxValueMaximum gauge value for this axis. Default is 80.value: numeric
widthWidth of the line (in pixels) that represents the inner axis.value: numeric
colorColor 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
percentRadiusRadius 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.

NameDescriptionProperty Type
startValue at which this range starts.value: numeric
endValue at which this range ends.value: numeric
widthWidth of this axis, in pixels.value: numeric
colorColor 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:

NameDescriptionProperty 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:

NameDescriptionProperty 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
object
backgroundColorColor 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
animateWhether needle should be animated in a sweeping motion when value changes. Default is false.value: boolean
reverseScaleIf true, the gauge will reverse the direction from minValue to maxValue on its dial.value: boolean
styleSets 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

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 (props.outerAxis.range.3) and configured it. 

PropertyValue
Value75
props.outerAxis.maxValue150
props.outerAxis.ranges.3.start120
props.outerAxis.ranges.3.end150
props.outerAxis.ranges.3.width20
props.outerAxis.ranges.3.color#C077D8
Example 2

PropertyValueStyle Category
props.startAngle90N/A
props.outerAxis.ranges.0.color#FFFF00N/A
props.outerAxis.ranges.1.color#FF8C00N/A
props.outerAxis.ranges.0.color#D90000N/A
props.style.fontWeightBoldtext
props.style.fontSize11pttext


  • No labels