Sets or gets jqxLinearGauge's animation duration [ms].

Code examples

Set the animationDuration property.

$('#jqxLinearGauge').jqxLinearGauge({animationDuration: 300 });

Get the animationDuration property.

var animationDuration = $('#jqxLinearGauge').jqxLinearGauge('animationDuration');

Sets or gets the gauge's properties for it's background.

Possible Values:

'borderType' - specifies the border type. Possible values are 'rectangle' and 'roundedRectangle'

'borderRadius' - sets the border radius

'visible' - indicates if the border will be visible

'style' - sets border style (color and thickness

'showGradient' - whether a gradient background will be used

Code examples

Set the background property.

$('#jqxLinearGauge').jqxLinearGauge({ background: { style: { stroke: '#cccccc', fill: '#cccccc'}, visible: true, backgroundType: 'rectangle' }});

Get the background property.

var background = $('#jqxLinearGauge').jqxLinearGauge('background');

Sets the gauge's color pallete. jqxLinearGauge suppports 11 color schemes from 'scheme01' to 'scheme11'.

Code examples

Set the colorScheme property.

$('#jqxLinearGauge').jqxLinearGauge({colorScheme: 'scheme06' });

Get the colorScheme property.

var colorScheme = $('#jqxLinearGauge').jqxLinearGauge('colorScheme');

Sets or gets whether the jqxLinearGauge is disabled.

Code examples

Set the disabled property.

$('#jqxLinearGauge').jqxLinearGauge({disabled: true });

Get the disabled property.

var disabled = $('#jqxLinearGauge').jqxLinearGauge('disabled');

Sets or gets jqxLinearGauge's animation easing.

Possible Values:

'linear'

'easeOutBack'

'easeInQuad'

'easeInOutCirc'

'easeInOutSine'

'easeOutCubic'

Code examples

Set the easing property.

$('#jqxLinearGauge').jqxLinearGauge({easing: 'easeInOutSine' });

Get the easing property.

var easing = $('#jqxLinearGauge').jqxLinearGauge('easing');

Sets or gets the gauge's height. This property accepts size in pixels and percentage.

Code examples

Set the height property.

$('#jqxLinearGauge').jqxLinearGauge({height: 400 });

Get the height property.

var width = $('#jqxLinearGauge').jqxLinearGauge('height');

Enables the jqxLinearGauge 64-bit number support.

Note: If this property is set to true, the properties value, min, max, ranges.startValue, ranges.endValue, ticksMinor.interval, ticksMajor.interval and labels.interval should be set to string values.

Code examples

Set the int64 property.

$('#jqxLinearGauge').jqxLinearGauge({ int64: true });

Get the int64 property.

var int64 = $('#jqxLinearGauge').jqxLinearGauge('int64');

Sets or gets the gauge's properties for it's labels.

Possible Values:

position - specifies the gauge's labels position. Possible values for this property are 'far', 'near' and 'both'. If 'near' is used labels will be visible only in the left hand side of the ticks. If the 'far' value is set ticks will be visible only in the right hand side of the ticks. Otherwise, if the 'both' value is used the labels will be shown in both sides of the ticks

style - specifies the gauge's pointer style. Here you can set it's fill or stroke color

interval - specifies labels's frequency

offset - specifies labels's offset from the ticks

formatValue - callback used for formatting the label. This function accepts two parameters. The first one is the label's value and the second one is the label's position

visible - indicates whether the labels will be visible

Code examples

Set the labels property.

$('#jqxLinearGauge').jqxLinearGauge({ labels: { position: 'far', interval: 20, offset: 3, visible: true }});

Get the labels property.

var labels = $('#jqxLinearGauge').jqxLinearGauge('labels');

Sets or gets gauge's minimum value.

Code examples

Set the min property.

$('#jqxLinearGauge').jqxLinearGauge({min: 10 });

Get the min property.

var min = $('#jqxLinearGauge').jqxLinearGauge('min');

Sets or gets jqxLinearGauge's max value.

Code examples

Set the max property.

$('#jqxLinearGauge').jqxLinearGauge({max: 200 });

Get the max property.

var max = $('#jqxLinearGauge').jqxLinearGauge('max');

Sets or gets jqxLineaerGauge's orientation.

Possible Values:

'vertical'

'horizontal'

Code examples

Set the orientation property.

$('#jqxLinearGauge').jqxLinearGauge({orientation: 'horizontal' });

Get the orientation property.

var orientation = $('#jqxLinearGauge').jqxLinearGauge('orientation');

Sets or gets the gauge's properties for it's pointer.

Possible Values:

'pointerType' - specifies the pointer type. Possible values for this property are  - 'default' and 'rectangle'. If it's value is 'default' the pointer will be column otherwise it'll be an arrow

'style' - specifies the gauge's pointer style. Here you can set it's fill or stroke color

'size' - specifies pointer's size. This property can be set in percents ('0%' - '100%') or in pixels

'visible' - indicates whether the pointer will be visible

'offset' - indicates the left offset of the pointer

Code examples

Set the pointer property.

$('#jqxLinearGauge').jqxLinearGauge({ pointer: { pointerType: 'arrow', size: '3%', visible: true, offset: 10 }});

Get the pointer property.

var pointer = $('#jqxLinearGauge').jqxLinearGauge('pointer');

Sets or gets ranges offset from the ticks.

Code examples

Set the rangesOffset property.

$('#jqxLinearGauge').jqxLinearGauge({rangesOffset: 5 });

Get the rangesOffset property.

var rangesOffset = $('#jqxLinearGauge').jqxLinearGauge('rangesOffset');

Sets or gets the size of the ranges. This property can be set in percentage or in pixels.

Code examples

Set the rangeSize property.

$('#jqxLinearGauge').jqxLinearGauge({rangeSize: '15%' });

Get the rangeSize property.

var rangeSize = $('#jqxLinearGauge').jqxLinearGauge('rangeSize');

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

Possible Values:

'startValue' - the value from which the range will start

'endValue' - the value where the current range will end

'style' - this property is object containing style information for the range. It accepts properties like 'fill', 'stroke', etc (typical for SVG/VML)

Code examples

Set the ticksPosition property.

var ranges = [{
    startValue: 0,
    endValue: 35,
    style: {
        fill: '#dddddd',
        stroke: '#dddddd'
    }
},
{
    startValue: 35,
    endValue: 55,
    style: {
        fill: '#dddddd',
        stroke: '#dddddd'
    }
}];
$('#jqxLinearGauge').jqxLinearGauge({ ranges: ranges });

Get the ranges property.

var ranges = $('#jqxLinearGauge').jqxLinearGauge('ranges');

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

Code examples

Set the showRanges property.

$('#jqxLinearGauge').jqxLinearGauge({showRanges: false });

Get the showRanges property.

var showRanges = $('#jqxLinearGauge').jqxLinearGauge('showRanges');

Sets or gets the style of the line connecting all the ticks.

Code examples

Set the scaleStyle property.

$('#jqxLinearGauge').jqxLinearGauge({scaleStyle: { stroke: '#000000', 'stroke-width': 3 } });

Get the scaleStyle property.

var scaleStyle = $('#jqxLinearGauge').jqxLinearGauge('scaleStyle');

Sets or gets the length of the scale. This property could be set in percentage or in pixels.

Code examples

Set the scaleLength property.

$('#jqxLinearGauge').jqxLinearGauge({scaleLength: '100px' });

Get the scaleLength property.

var scaleLength = $('#jqxLinearGauge').jqxLinearGauge('scaleLength');

Sets or gets the offset of the ticks. The first element of the array is the left offset and the second one is the top offset. This property can be set in pixels or percentage.

Code examples

Set the ticksOffset property.

$('#jqxLinearGauge').jqxLinearGauge({rangeSize: [0,3] });

Get the ticksOffset property.

var ticksOffset = $('#jqxLinearGauge').jqxLinearGauge('ticksOffset');

Sets or gets jqxLineaerGauge's ticks position.

Possible Values:

'near'-ticks will be visible only in the left side of the scale

'far'-ticks will be visible only in the right side of the scale

'both'-ticks will be visible in both sides

Code examples

Set the ticksPosition property.

$('#jqxLinearGauge').jqxLinearGauge({ticksPosition: 'far' });

Get the ticksPosition property.

var ticksPosition = $('#jqxLinearGauge').jqxLinearGauge('ticksPosition');

Sets or gets the gauge's properties for it's minor ticks.

Possible Values:

'size' - specifies the length of the tick. This property can be set in pixels or in percentage

'interval' - specifies the ticks frequency. With interval equals to 5 each fifth value of the gauge will have a minor tick

'visible' - indicates if the minor ticks will be visible

'style' - sets ticks style (color and thickness)

Code examples

Set the ticksPosition property.

$('#jqxLinearGauge').jqxLinearGauge({ ticksMinor: { size: '5%', interval: 15, style: { stroke: '#898989'}, visible: true }});

Get the ticksMinor property.

var ticksMinor = $('#jqxLinearGauge').jqxLinearGauge('ticksMinor');

Sets or gets the gauge's properties for it's major ticks.

Possible Values:

'size' - specifies the length of the tick. This property is measured in pixels or percentage

'interval' - specifies the ticks frequency. With interval equals to 5 each fifth value of the gauge will have a major tick

'visible' - indicates if the major ticks will be visible

'style' - sets ticks style (color and thickness)

Code examples

Set the ticksMajor property.

$('#jqxLinearGauge').jqxLinearGauge({ ticksMajor: { size: '10px', interval: 15, style: { stroke: '#898989'}, visible: true }});

Get the ticksMajor property.

var ticksMajor = $('#jqxLinearGauge').jqxLinearGauge('ticksMajor');

Sets or gets gauge's value.

Code examples

Set the value property.

$('#jqxLinearGauge').jqxLinearGauge({value: 15 });

Get the value property.

var value = $('#jqxLinearGauge').jqxLinearGauge('value');

Sets or gets the gauge's width. This property accepts size in pixels and percentage.

Code examples

Set the width property.

$('#jqxLinearGauge').jqxLinearGauge({width: 400 });

Get the width property.

var width = $('#jqxLinearGauge').jqxLinearGauge('width');

The event is raised when the gauge's value is changing.

Code examples

Bind to the valueChanging event by type: jqxLinearGauge.

    $('#jqxLinearGauge').bind('valueChanging', function (e) {
        alert('Value changed: ' + e.args.value);
    });
    $('#jqxLinearGauge').jqxLinearGauge('value', 220);

The event is raised when the gauge's value is changed.

Code examples

Bind to the valueChanged event by type: jqxLinearGauge.

    $('#jqxLinearGauge').bind('valueChanged', function (e) {
        alert('Value changed: ' + e.args.value);
    });
    $('#jqxLinearGauge').jqxLinearGauge('value', 220);

This method disables the gauge.

Code examples

Invoke the disable method.

    $('#jqxLinearGauge').jqxLinearGauge('disable');

This method enables the gauge.

Code examples

Invoke the enable method.

    $('#jqxLinearGauge').jqxLinearGauge('enable');

Sets or gets the value.

Code example

Invoke the val method.

// Get the value.

var value = $("#jqxLinearGauge").jqxLinearGauge('val');

// Get the value using jQuery's val()

var value = $("#jqxLinearGauge").val();

// Set value.

$("#jqxLinearGauge").jqxLinearGauge('val', 40);

// Set value using jQuery's val().

$("#jqxLinearGauge").val(40);