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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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. }); 

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. }); 

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. }); 

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. }); 

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. });

Fires after the values are changed.

Code examples

Bind to the valueChanged event by type: jqxBarGauge.

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

Refreshes the BarGauge.

Code examples

Invoke the refresh method.

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

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

Code examples

Invoke the render method.

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

Returns an array of the BarGauge values.

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]);