jqxBarGauge API Reference

Name Type Default

animationDuration Number 1000

Determines the animation in milliseconds. To disable this property - set it to0 (zero).

Code examples


// select the BarGauge element and set the animation settings.
$('#jqxBarGauge').jqxBarGauge({
    values: values,
    animationDuration: 500
});

Get the animation property.

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

Try it: animation is set to 0.5 seconds duration

backgroundColor String '#e0e0e0'

Sets or gets the jqxBarGauge background color.

Code examples

Set the backgroundColor property.

$('#jqxBarGauge').jqxBarGauge({ backgroundColor: 'rosybrown' });

Get the backgroundColor property.

var backgroundColor = $('#jqxBarGauge').jqxBarGauge('backgroundColor');

Try it: backgroundColor is set to 'mistyrose'

barSpacing Number 4

Sets or gets the space between the segments of the jqxBarGauge.

Code examples

Set the barSpacing property.

$('#jqxBarGauge').jqxBarGauge({ barSpacing: 2 });

Get the barSpacing property.

var barSpacing = $('#jqxBarGauge').jqxBarGauge('barSpacing');

Try it: barSpacing is set to '12'

baseValue Number null

Sets the base value of jqxBarGauge.

Code examples

Set the baseValue property.

$('#jqxBarGauge').jqxBarGauge({ baseValue: 10 });

Get the baseValue property.

var baseValue = $('#jqxBarGauge').jqxBarGauge('baseValue');

Try it: baseValue is set to '30'

colorScheme String 'scheme01'

Sets the jqxBarGauge's color palette. jqxBarGauge suppports 27 color schemes from 'scheme01' to 'scheme27'. I's possible to set custom scheme in combination with "customColorScheme" property.

Code examples

Set the colorScheme property.

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

Get the colorScheme property.

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

Try it: colorScheme is set to 'scheme02'

customColorScheme String 'scheme01'

Sets custom color palette in the BarGauge. This is used in combination with "colorScheme" property.

Code examples

Set the customColorScheme property.


$('#jqxBarGauge').jqxBarGauge({ 
    colorScheme: 'customColors',
    customColorScheme: {
        name: 'customColors',
        colors: ["blue", "green", "red"]
    }
});

CustomColorScheme Properties:

name - sets the name of color scheme, corresponding with the value of "colorScheme" property.
colors - sets the array of colors.

Get the customColorScheme property.

var customColorScheme = $('#jqxBarGauge').jqxBarGauge('customColorScheme');

Try it: customColorScheme is set to custom colors

disabled Boolean false

Sets or gets the values of the disabled property of jqxBarGauge. By default is false.

Code examples

Set the disabled property.

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

Get the disabled property.

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

Try it: disabled is set to false

endAngle Number 0

Sets or gets the endAngle of the BarGauge. Used to create geometry of the arc in the space.

Code examples

Set the endAngle property.


$('#jqxBarGauge').jqxBarGauge({
    startAngle: 320,
    endAngle: 0
});

Get the endAngle property.

var endAngle = $('#jqxBarGauge').jqxBarGauge('endAngle');

Try it: endAngle is set to custom degrees

formatFunction Object null

Sets or gets the formatFunction of the BarGauge. Used to make changes on the particular segment.

Code examples

Set the formatFunction property.


$('#jqxBarGauge').jqxBarGauge({
    formatFunction: {
        value: 45,
        index: 0,
        color: '#CA71AF'
    }
});

The formatFunction is a string or object with properties.

value - set value of the segment with expected index.
index - set index of the BarGauge that will be changed.
color - set color.

Get the formatFunction property.

var formatFunction = $('#jqxBarGauge').jqxBarGauge('formatFunction');

Try it: formatFunction is set with custom settings

height Number 400

Sets or gets the BarGauge's height.

Code examples

Set the height property.

$('#jqxBarGauge').jqxBarGauge({ height: 450 });

Get the height property.

var height = $('#jqxBarGauge').jqxBarGauge('height');

Try it: height is set to 900

labels Object null

This property is used to make fine settings on BarGauge labels at each segment.

Code examples

Set the labels property.


$('#jqxBarGauge').jqxBarGauge({
    values: values,
    labels: {
        connectorColor: 'red',
        connectorWidth: 1,
        font: {
            color: 'darkseagreen',
            size: 12,
        },
        formatFunction: function (value, index) {
            return value + ' €';
        }
        indent: 15,
        precision: 1,
        visible: true
    }
});

Labels Properties:

connectorColor - sets the connector's color of the BarGauge can set this color as a string.
connectorWidth - sets the connector's width of the BarGauge.
font - sets the font of the labels in jqxBarGauge. This is an object with following members:
- color - sets the color of the labels.
- family - sets the font family of the labels.
- size - sets the size of the labels.
formatFunction - sets a custom rendering function. The formatFunction function is called when a labels is appearing in the jqxBarGauge. You can use it to override the built-in labels rendering. The formatFunction function has 1 parameter passed by jqxBarGauge - value that is rendered by the BarGauge.
With following members:
- index - set index
- value - set value
indent - sets the indent of the BarGauge. The distance of the last segment to the labels.
precision - sets the precision of the displayed values in the BarGauge.
visible - sets the visible of the BarGauge. Acceptable values: true or false.

Get the labels property.

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

Try it: labels is set to { connectorColor: 'cornflowerblue', connectorWidth: 4, formatFunction: function (value) { return '(' + value + ')'; }, indent: 35, ... }

max Number 100

Sets or gets the end value of BarGauge.

Code examples

Set the max property.

$('#jqxBarGauge').jqxBarGauge({ max: 50 });

Get the max property.

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

Try it: max is set to '60'

min Number 0

Sets or gets BarGauge's min. This property specifies the beggining of the BarGauge's scale.

Code examples

Set the min property.

$('#jqxBarGauge').jqxBarGauge({ min: 0 });

Get the min property.

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

Try it: min is set to -25

relativeInnerRadius Number 0.3

Sets or gets the relativeInnerRadius of jqxBarGauge. It's value represents the proportion between inner and outer radius.

Code examples

Set the relativeInnerRadius property.

$('#jqxBarGauge').jqxBarGauge({ relativeInnerRadius: 0.5 });

Get the pathModified property.

var relativeInnerRadius = $('#jqxBarGauge').jqxBarGauge('relativeInnerRadius');

Try it: relativeInnerRadius is set to 0

rendered Function null

This function is called when the BarGauge is initialized and the binding is complete.

Code examples

Set the rendered property.


$('#jqxBarGauge').jqxBarGauge({
    rendered: function () {
        // Create some functionality
    }
});

var rendered = $('#jqxBarGauge').jqxBarGauge('rendered');

Try it: rendered is set to a custom function

startAngle Number 225

Sets or gets the startAngle of the BarGauge. Used to create geometry of the arc in the space.

Code examples

Set the startAngle property.


$('#jqxBarGauge').jqxBarGauge({    
    startAngle: 320,
    endAngle: 0
});

Get the startAngle property.

var startAngle = $('#jqxBarGauge').jqxBarGauge('startAngle');

Try it: startAngle is set to custom degrees

title Object|String null

Sets or gets the BarGauge's title. This property can be string or object with custom title settings.

Code examples

Set the title property.


$('#jqxBarGauge').jqxBarGauge({
    values: [11, 22, 33, 55, 88, 143],
    title: {
        text: 'Ranking',
        font: {
            color: 'rosybrown',
            size: 25,
            opacity: 0.5,
            family: "'Helvetica Neue', 'Arial'",
            weight: 200
        },
        horizontalAlignment: 'center',
        margin: {
            bottom: 0,
            left: 0,
            right: 0,
            top: 0
        },
        subtitle: {
            text: '(top 100)',
            font: {
                color: 'mistyrose ',
                family: 'MS Georgia',
                opacity: 1,
                size: 16,
                weight: 200
            }
        },
        verticalAlignment: 'top'
    }
});

The title is a string or object with properties.

font - sets the font of the title in BarGauge. This is an object with following members:
- color - sets color for the text.
- family - sets family for the text. For example: family: 'MS Georgia' 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', 'Verdana'.
- opacity - sets opacity for the text. From 0 to 1 (ex. 0.45).
- size - sets size for the text.
- weight - sets weight for the text.
horizontalAlignment - horizontal position of the title. Possible values: 'center', 'left', 'right'
margin - one value for space around the title. It is possible to set different space to each side:
- bottom - default value (bottom: 0)
- left - default value (left: 0)
- right - default value (right: 0)
- top - default value (top: 0)
subtitle - sets subtitle of the BarGauge. Second way to set subtitle is with object.
Possible settings:
- text - content of the subtitle
- font - sets fine settings with object This is an object with following members:
  - color - set the color of the subtitle.
  - family - set the font family of the subtitle.
  - opacity - set the font opacity of the subtitle.
  - size - set the size of the subtitle.
  - weight - set the font weight of the subtitle.
text - content of the title
verticalAlignment - vertical position of the title. Possible values: 'top', 'bottom'

Get the title property.

var title = $('#jqxBarGauge').jqxBarGauge('title');

Try it: title is set custom settings

tooltip Object null

Sets or gets the BarGauge's tooltip.

Code examples

Set the tooltip properties.


$('#jqxBarGauge').jqxBarGauge({
    values: [11, 22, 33, 55, 88, 143],
    tooltip: {
       classname: "myTooltip",
       formatFunction: function (value, index) {
           return value + ' €';
       },
       visible: true,
       precision: 0
    }
});

The tooltip is an object with following properties:

classname - set a class for each one tooltip.
formatFunction - This function is called when the user hover a segment of BarGauge and show details in desirable view.
With following members:
- index - set index
- value - set value
precision - set a precision of the formatted value displayed in a tooltip.
visible - set whether or not tooltips are visible in the BarGauge.

Get the tooltip property.

var tooltip = $('#jqxBarGauge').jqxBarGauge('tooltip');

Try it: tooltip is set to a custom functionality

useGradient Boolean true

Sets or gets useGradient of the BarGauge. Change visualization of the segments between flat color or with gradient.

Code examples

Set the useGradient property.

$('#jqxBarGauge').jqxBarGauge({ useGradient: false });

Get the useGradient property.

var useGradient = $('#jqxBarGauge').jqxBarGauge('useGradient');

Try it: useGradient is set to false

values Array []

Sets or gets array of values for the BarGauge.

Code examples

Set the values property.

$('#jqxBarGauge').jqxBarGauge({ values: [11, 22, 33, 55, 88, 143] });

Get the values property.

var values = $('#jqxBarGauge').jqxBarGauge('values');

Try it: values is set to an array

width Number 400

Sets or gets the BarGauge's width.

Code examples

Set the width property.

$('#jqxBarGauge').jqxBarGauge({ width: 850 });

Get the width property.

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

Try it: width is set to 850

drawEnd Event

The event is raised when the BarGauge finish rendering. Commonly used in combination with drawStart event.

Code examples

Bind to the drawEnd event by type: jqxBarGauge.

$('#jqxBarGauge').bind('drawEnd', function () { // Some code here. });

Try it: Bind to the drawEnd event by type: jqxBarGauge.

drawStart Event

The event is raised when the BarGauge starts rendering again. Commonly used in combination with drawEnd event.

Code examples

Bind to the drawStart event by type: jqxBarGauge.

$('#jqxBarGauge').bind('drawStart', function () { // Some code here. });

Try it: Bind to the drawStart event by type: jqxBarGauge.

initialized Event

Fires when the jqxBarGauge is rendered for the first time. The BarGauge is initialized.

Code examples

Bind to the initialized event by type: jqxBarGauge.

$('#jqxBarGauge').bind('initialized', function () { // Some code here. });

Try it: Bind to the initialized event by type: jqxBarGauge.

tooltipClose Event

Fires when a BarGauge's tooltip is closed.

Code examples

Bind to the tooltipClose event by type: jqxBarGauge.

$('#jqxBarGauge').on('tooltipClose', function () { // Some code here. });

Try it: Bind to the tooltipClose event by type: jqxBarGauge.

tooltipOpen Event

Fires when a BarGauge's tooltip is open.

Code examples

Bind to the tooltipOpen event by type: jqxBarGauge.

$('#jqxBarGauge').on('tooltipOpen', function () { // Some code here. });

Try it: Bind to the tooltipOpen event by type: jqxBarGauge.

valueChanged Event

Fires after the values are changed.

Code examples

Bind to the valueChanged event by type: jqxBarGauge.

$('#jqxBarGauge').on('valueChanged', function () { // Some code here. });

Try it: Bind to the valueChanged event by type: jqxBarGauge.

refresh Method

Refreshes the BarGauge.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the refresh method.


$('#jqxBarGauge').jqxBarGauge('refresh');

Try it: Invoke the refresh and redraws the widget.

render Method

Renders the BarGauge contents. This method completely refreshes the BarGauge.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the render method.


$('#jqxBarGauge').jqxBarGauge('refresh');

Try it: Invoke the render method.

val Method

Returns an array of the BarGauge values.

Parameter	Type	Description
Array

Return Value
Array

Code examples

Invoke the val method.

// Get the value.

var values = $("#jqxGauge").jqxGauge('val');

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

var values = $("#jqxGauge").val();

// Set values.

$("#jqxGauge").jqxGauge('val', [14, 27, 35]);

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

$("#jqxGauge").val([14, 27, 35]);

Try it: Gets values in array from the BarGauge

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

Events

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Methods

Code examples

Code examples

Code examples