Gauge API Reference

analogDisplayType string needle

Sets the type of gauge's indicator Possible values: 'needle', 'fill', 'line'.

Code examples

Set the analogDisplayType property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.analogDisplayType = 'line';

Get the analogDisplayType property.

 let gauge = document.querySelector('jqx-gauge');

 let analogDisplayType = gauge.analogDisplayType;

coerce boolean false

With the coerce property true, the value is set to the nearest value allowed by the interval property.

Code examples

Set the coerce property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.coerce = false;

Get the coerce property.

 let gauge = document.querySelector('jqx-gauge');

 let coerce = gauge.coerce;

decimalSeparator string "."

Sets or gets the char to use as the decimal separator in numeric values.

Code examples

Set the decimalSeparator property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.decimalSeparator = '.';

Get the decimalSeparator property.

 let gauge = document.querySelector('jqx-gauge');

 let decimalSeparator = gauge.decimalSeparator;

digitalDisplay boolean false

Enables or disables the digital display of the widget.

Code examples

Set the digitalDisplay property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.digitalDisplay = false;

Get the digitalDisplay property.

 let gauge = document.querySelector('jqx-gauge');

 let digitalDisplay = gauge.digitalDisplay;

digitalDisplayPosition string bottom

Sets the position of the digital display. Possible values: 'top', 'bottom', 'right', 'left', 'center'.

Code examples

Set the digitalDisplayPosition property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.digitalDisplayPosition = 'New Placeholder';

Get the digitalDisplayPosition property.

 let gauge = document.querySelector('jqx-gauge');

 let digitalDisplayPosition = gauge.digitalDisplayPosition;

disabled boolean false

Enables or disables the widget.

Code examples

Set the disabled property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.disabled = false;

Get the disabled property.

 let gauge = document.querySelector('jqx-gauge');

 let disabled = gauge.disabled;

drawNeedle function null

Callback function which allows rendering on a custom needle. Applicable only on analogDisplayType needle.

Code examples

Set the drawNeedle property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.drawNeedle = customDrawNeedleFunction;

Get the drawNeedle property.

 let gauge = document.querySelector('jqx-gauge');

 let drawNeedle = gauge.drawNeedle;

endAngle number 210

Sets or gets gauge's endAngle. This property specifies the end of the gauge's scale and is measured in degrees.

Code examples

Set the endAngle property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.endAngle = 300;

Get the endAngle property.

 let gauge = document.querySelector('jqx-gauge');

 let endAngle = gauge.endAngle;

interval any 1

When cooerce property is true, all values coerce to the interval's value.

Code examples

Set the interval property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.interval = 10;

Get the interval property.

 let gauge = document.querySelector('jqx-gauge');

 let interval = gauge.interval;

inverted boolean false

Sets the direction of the gauge. If is true - positions of the gauge's start and end are changed.

Code examples

Set the inverted property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.inverted = false;

Get the inverted property.

 let gauge = document.querySelector('jqx-gauge');

 let inverted = gauge.inverted;

labelFormatFunction function null

A callback function that can be used to format the values displayed on the gauge labels.

Code examples

Set the labelFormatFunction property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.labelFormatFunction = function (value) { return value + '$'; };

Get the labelFormatFunction property.

 let gauge = document.querySelector('jqx-gauge');

 let labelFormatFunction = gauge.labelFormatFunction;

labelsVisibility string all

Sets or gets the widget's label visibility Possible values: 'all', 'endPoints', 'none'.

Code examples

Set the labelsVisibility property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.labelsVisibility = 'none';

Get the labelsVisibility property.

 let gauge = document.querySelector('jqx-gauge');

 let labelsVisibility = gauge.labelsVisibility;

language string en

Sets or gets the language. Used in conjunction with the property messages.

Code examples

Set the language property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.language = 'fr';

Get the language property.

 let gauge = document.querySelector('jqx-gauge');

 let language = gauge.language;

logarithmicScale boolean false

Enables/disables the usage of logarithmic scale in the widget.

Code examples

Set the logarithmicScale property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.logarithmicScale = false;

Get the logarithmicScale property.

 let gauge = document.querySelector('jqx-gauge');

 let logarithmicScale = gauge.logarithmicScale;

max any 100

Sets or gets the maximum value of the widget.

Code examples

Set the max property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.max = 50;

Get the max property.

 let gauge = document.querySelector('jqx-gauge');

 let max = gauge.max;

mechanicalAction string switchWhileDragging

Sets or gets the type of used mechanical action. Possible values: 'switchUntilReleased', 'switchWhenReleased', 'switchWhileDragging'.

Code examples

Set the mechanicalAction property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.mechanicalAction = 'switchWhenReleased';

Get the mechanicalAction property.

 let gauge = document.querySelector('jqx-gauge');

 let mechanicalAction = gauge.mechanicalAction;

messages object { "en": { "missingReference": "{{elementType}}: Missing reference to {{files}}.", "significantPrecisionDigits": "{{elementType}}: the properties significantDigits and precisionDigits cannot be set at the same time.", "invalidMinOrMax": "{{elementType}}: Invalid {{property}} value. Max cannot be lower than Min.", "noInteger": "{{elementType}}: precisionDigits could be set only on floatingPoint scaleType." } }

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.

Code examples

Set the messages property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.messages = { "de": { "missingReference": "{{elementType}}: Fehlende Bezugnahme auf {{files}}.", "significantPrecisionDigits": "{{elementType}}: Die Eigenschaften significantDigits und precisionDigits koennen nicht gleichzeitig eingestellt werden.", "invalidMinOrMax": "{{elementType}}: Ungültiger Wert {{property}}. Max darf nicht niedriger sein als Min.", "noInteger": "{{elementType}}: PrecisionDigits konnte nur auf floatingPoint scaleType gesetzt werden." } };

Get the messages property.

 let gauge = document.querySelector('jqx-gauge');

 let messages = gauge.messages;

min any 0

Sets or gets the minimum value of the widget.

Code examples

Set the min property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.min = 50;

Get the min property.

 let gauge = document.querySelector('jqx-gauge');

 let min = gauge.min;

needlePosition string center

Sets the position of the needle when analogDisplayType is 'needle'. Possible values: 'center', 'edge'.

Code examples

Set the needlePosition property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.needlePosition = 'edge';

Get the needlePosition property.

 let gauge = document.querySelector('jqx-gauge');

 let needlePosition = gauge.needlePosition;

precisionDigits number null

Determines the number of digits after the decimal point. Applicable only when scaleType is 'integer'.

Code examples

Set the precisionDigits property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.precisionDigits = 6;

Get the precisionDigits property.

 let gauge = document.querySelector('jqx-gauge');

 let precisionDigits = gauge.precisionDigits;

ranges array

This property is array of objects. Each object is different range. The range is colored area with specified size.

Code examples

Set the ranges property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.ranges = [{ startValue: 0, endValue: 60, className: 'range1' }, { startValue: 60, endValue: 100, className: 'range2' }];

Get the ranges property.

 let gauge = document.querySelector('jqx-gauge');

 let ranges = gauge.ranges;

readonly boolean false

When the widget is read only the users cannot interact with it.

Code examples

Set the readonly property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.readonly = true;

Get the readonly property.

 let gauge = document.querySelector('jqx-gauge');

 let readonly = gauge.readonly;

scalePosition string inside

Sets the position of the widget's scales. Possible values: 'outside', 'inside', 'none'.

Code examples

Set the scalePosition property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.scalePosition = 'outside';

Get the scalePosition property.

 let gauge = document.querySelector('jqx-gauge');

 let scalePosition = gauge.scalePosition;

scaleType string floatingPoint

Sets the type of the gauge's scale. Possible values: 'floatingPoint', 'integer'.

Code examples

Set the scaleType property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.scaleType = 'floatingPoint';

Get the scaleType property.

 let gauge = document.querySelector('jqx-gauge');

 let scaleType = gauge.scaleType;

scientificNotation boolean false

Enables/disables scientific notation.

Code examples

Set the scientificNotation property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.scientificNotation = true;

Get the scientificNotation property.

 let gauge = document.querySelector('jqx-gauge');

 let scientificNotation = gauge.scientificNotation;

showRanges boolean false

This property indicates whether the gauge's ranges will be visible.

Code examples

Set the showRanges property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.showRanges = true;

Get the showRanges property.

 let gauge = document.querySelector('jqx-gauge');

 let showRanges = gauge.showRanges;

showUnit boolean false

Enables/disables displaying of the units.

Code examples

Set the showUnit property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.showUnit = false;

Get the showUnit property.

 let gauge = document.querySelector('jqx-gauge');

 let showUnit = gauge.showUnit;

significantDigits number null

Determining how many significant digits are in a number. Applicable only when scaleType is 'integer'.

Code examples

Set the significantDigits property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.significantDigits = 2;

Get the significantDigits property.

 let gauge = document.querySelector('jqx-gauge');

 let significantDigits = gauge.significantDigits;

startAngle number -30

Sets or gets gauge's startAngle. This property specifies the beggining of the gauge's scale and is measured in degrees.

Code examples

Set the startAngle property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.startAngle = 20;

Get the startAngle property.

 let gauge = document.querySelector('jqx-gauge');

 let startAngle = gauge.startAngle;

ticksPosition string scale

Sets or gets the position of the ticks in jqxTank widget. Possible values: 'scale', 'track'.

Code examples

Set the ticksPosition property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.ticksPosition = 'scale';

Get the ticksPosition property.

 let gauge = document.querySelector('jqx-gauge');

 let ticksPosition = gauge.ticksPosition;

ticksVisibility string minor

Sets or gets the visibility of the ticks. Possible values: 'major', 'minor', 'none'.

Code examples

Set the ticksVisibility property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.ticksVisibility = 'none';

Get the ticksVisibility property.

 let gauge = document.querySelector('jqx-gauge');

 let ticksVisibility = gauge.ticksVisibility;

unit string kg

Sets or gets the name of unit used in the widget.

Code examples

Set the unit property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.unit = 'cm';

Get the unit property.

 let gauge = document.querySelector('jqx-gauge');

 let unit = gauge.unit;

value number 0

Sets or gets the value of the widget.

Code examples

Set the value property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.value = 100;

Get the value property.

 let gauge = document.querySelector('jqx-gauge');

 let value = gauge.value;

wordLength string int32

Sets or gets the word length. Applicable only when scaleType is 'integer'. Possible values: 'int8', 'uint8', 'int16', 'uint16', 'int32', 'uint32', 'int64', 'uint64'.

Code examples

Set the wordLength property.

 let gauge = document.querySelector('jqx-gauge');

 gauge.wordLength = 'int16';

Get the wordLength property.

 let gauge = document.querySelector('jqx-gauge');

 let wordLength = gauge.wordLength;

change Event

This event is triggered when the value of the widget is changed using the mouse or keyboard.

Code examples

Bind to the change event by type: jqxGauge

 let gauge = document.querySelector('jqx-gauge');

 gauge.addEventListener('change', function (event) {
     // event handling code goes here.
 }

val Method

Properties

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Methods

Code examples