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

Initializing jqxLinearGauge with the width property specified:

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

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

Initializing jqxLinearGauge with the height property specified:

   

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

Sets or gets gauge's value.

Initializing jqxLinearGauge with the value property specified:

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

Sets or gets gauge's minimum value.

Initializing jqxLinearGauge with the min property specified:

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

Sets or gets jqxLinearGauge's max value.

Initializing jqxLinearGauge with the max property specified:

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

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

Initializing jqxLinearGauge with the colorScheme property specified:

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

Sets or gets whether the jqxLinearGauge is disabled.

Initializing jqxLinearGauge with the disabled property specified:

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

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

Initializing jqxLinearGauge with the animationDuration property specified:

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

Sets or gets jqxLinearGauge's animation easing.

Possible easings are: 'linear', 'easeOutBack', 'easeInQuad', 'easeInOutCirc', 'easeInOutSine', 'easeOutCubic'. Initializing jqxLinearGauge with the easing property specified:

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

This property indicates whether the gauge's ranges will be visible. Initializing jqxLinearGauge with the showRanges property specified:

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

Sets or gets ranges offset from the ticks. Initializing jqxLinearGauge with the rangesOffset property specified:

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

Sets or gets the size of the ranges. This property can be set in percentage or in pixels. Initializing jqxLinearGauge with the rangeSize property specified:

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

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. Initializing jqxLinearGauge with the ticksOffset property specified:

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

Sets or gets the style of the line connecting all the ticks. Initializing jqxLinearGauge with the scaleStyle property specified:

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

Sets or gets the length of the scale. This property could be set in percentage or in pixels. Initializing jqxLinearGauge with the scaleLength property specified:

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

Sets or gets jqxLineaerGauge's orientation. Possible values for this property are: 'vertical', 'horizontal'. Initializing jqxLinearGauge with the orientation property specified:

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

Sets or gets jqxLineaerGauge's ticks position. If this property has value 'near' ticks will be visible only in the left side of the scale. If it's value is 'far' ticks will be visible only in the right side of the scale. If it's value is 'both' ticks will be visible in both sides. Initializing jqxLinearGauge with the ticksPosition property specified:

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

This property is array from objects. Each object is different range. The range is colored area with specified size. Here is a sample initialization of the jqxLinearGauge with the ranges array:

var ranges = [{

    startValue: 0,

    endValue: 35,

    style: {

        fill: '#dddddd',

        stroke: '#dddddd'

    }

},

{

    startValue: 35,

    endValue: 55,

    style: {

        fill: '#dddddd',

        stroke: '#dddddd'

    }

}];

$('#gauge').jqxLinearGauge({ ranges: ranges });

• 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).

Gets or sets the gauge's properties for it's minor ticks.
Here is a sample initialization of the jqxLinearGauge with ticksMinor property specified:

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

• 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)

Gets or sets the gauge's properties for it's major ticks.
Here is a sample initialization of the jqxLinearGauge with ticksMajor property specified:

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

• 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)

Gets or sets the gauge's properties for it's background.
Here is a sample initialization of the jqxLinearGauge with the background property specified:

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

• 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

Gets or sets the gauge's properties for it's pointer.
Here is a sample initialization of the jqxLinearGauge with the pointer property specified:

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

• 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.

Gets or sets the gauge's properties for it's labels.
Here is a sample initialization of the jqxLinearGauge with the labels property specified:

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

• 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.

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

Example:

    $('#gauge').bind('valueChanging', function (e) {

        alert('Value changed: ' + e.args.value);

    });

    $('#gauge').jqxLinearGauge('value', 220);

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

Example:

    $('#gauge').bind('valueChanged', function (e) {

        alert('Value changed: ' + e.args.value);

    });

    $('#gauge').jqxLinearGauge('value', 220);

This method disables the gauge.

Example:

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

This method enables the gauge.

Example:

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