Sets ot gets the bulletcharts's animationDuration.

Possible values

number

'slow'

'fast'

Code examples

Set the animationDuration property.

$("#jqxBulletChart").jqxBulletChart( { animationDuration:'slow'});

Get the animationDuration property.

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

Sets ot gets the bulletcharts's bar size.

Code examples

Set the barSize property.

$("#jqxBulletChart").jqxBulletChart({ barSize: '40%' });

Get the barSize property.

var barSize = $('#jqxBulletChart').jqxBulletChart('barSize');

Sets ot gets the bulletcharts's description.

Code examples

Set the description property.

$("#jqxBulletChart").jqxBulletChart( { description:'New description'});

Get the description property.

var description = $('#jqxBulletChart').jqxBulletChart('description');

Disables the bullet chart.

Code examples

Set the disabled property.

$("#jqxBulletChart").jqxBulletChart( { disabled:true});

Get the disabled property.

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

Sets ot gets the bulletcharts's height.

Code examples

Set the height property.

$("#jqxBulletChart").jqxBulletChart({ height: 120 });

Get the height property.

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

Sets ot gets the bulletcharts's labelsFormat.

Possible values:

"null"

"d"-decimal numbers

"f"- floating-point numbers

"n"- integer numbers

"c" - currency numbers

"p"- percentage numbers

Code examples

Set the labelsFormat property.

$("#jqxBulletChart").jqxBulletChart( { labelsFormat:'c'});

Get the labelsFormat property.

var labelsFormat = $('#jqxBulletChart').jqxBulletChart('labelsFormat');

Sets ot gets the bulletcharts's labelsFormatFunction.

Code examples

Set the labelsFormatFunction property.

$("#jqxBulletChart").jqxBulletChart( { labelsFormatFunction: function (value, position) { if (position == "near") { return value + " °C";} else { return value; }; }});

Get the labelsFormatFunction property.

var labelsFormatFunction = $('#jqxBulletChart').jqxBulletChart('labelsFormatFunction');

Sets ot gets the bulletcharts's orientation.

Possible values:

"horizontal"

"vertical"

Code examples

Set the orientation property.

$("#jqxBulletChart").jqxBulletChart( { width:100, height:500,description:'vertical'});

Get the orientation property.

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

Sets ot gets the bulletcharts's pointer.

Code examples

Set the pointer property.

$("#jqxBulletChart").jqxBulletChart({ pointer: {value: 270, label: "Value", thickness: 8, color: "White" }});

Get the pointer property.

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

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code examples

Set the rtl property.

$("#jqxBulletChart").jqxBulletChart( { rtl:true});

Get the rtl property.

var rtl = $('#jqxBulletChart').jqxBulletChart('rtl');

Sets ot gets the bulletcharts's range.

Possible values

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

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

'color'- the colour of the range

'opacity'- the opacity of the range

Code examples

Set the ranges property.

$("#jqxBulletChart").jqxBulletChart({ranges: [{startValue: 0, endValue: 200,color: "Blue", opacity: 0.6}, { startValue: 200, endValue: 250, color: "Black", opacity: 0.3}] });

Get the ranges property.

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

Sets ot gets the bulletcharts's showTooltip.Requires jqxtooltip.js

Code examples

Set the showTooltip property.

$("#jqxBulletChart").jqxBulletChart( { showTooltip:false});

Get the showTooltip property.

var showTooltip = $('#jqxBulletChart').jqxBulletChart('showTooltip');

Sets ot gets the bulletcharts's target.

Code examples

Set the target property.

$("#jqxBulletChart").jqxBulletChart({ target: {value: 270, label: "Value", thickness: 8, color: "White" }});

Get the target property.

var target = $('#jqxBulletChart').jqxBulletChart('target');

Sets ot gets the bulletcharts's ticks.

Possible values for ticks.position

"near"- positions the ticks at the top of the ranges bar if the orientation is set to "horizontal" and at the left if the orientation is set to "vertical";

"far" - positions the ticks at the bottom of the ranges bar if the orientation is set to "horizontal" and at the right if the orientation is set to "vertical";

"both"

"none"

Code examples

Set the ticks property.

$("#jqxBulletChart").jqxBulletChart({ticks: { position: "near", interval: 20,size: 10 }});

Get the ticks property.

var ticks = $('#jqxBulletChart').jqxBulletChart('ticks');

Sets ot gets the bulletcharts's title.

Code examples

Set the title property.

$("#jqxBulletChart").jqxBulletChart( { title:'New title'});

Get the title property.

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

Sets ot gets the bulletcharts's tooltipFormatFunction.Requires jqxtooltip.js

Code examples

Set the tooltipFormatFunction property.

$("#jqxBulletChart").jqxBulletChart( { tooltipFormatFunction: function (pointerValue, targetValue) { return "Current: " + pointerValue + "; Average: " + targetValue + "";}});

Get the tooltipFormatFunction property.

var tooltipFormatFunction = $('#jqxBulletChart').jqxBulletChart('tooltipFormatFunction');

Sets ot gets the bulletcharts's width.

Code examples

Set the width property.

$("#jqxBulletChart").jqxBulletChart({ width: 500 });

Get the width property.

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

This event is triggered when the value is changed.

Code examples

Bind to the change event by type: jqxBulletChart.

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

Destroy the jqxBulletChart widget.

Code examples

Invoke the destroy method.

$('#jqxBulletChart').jqxBulletChart('destroy'); 

Renders the jqxBulletChart widget.

Code examples

Invoke the render method.

$('#jqxBulletChart').jqxBulletChart('render'); 

Refresh the jqxBulletChart widget.

Code examples

Invoke the refresh method.

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

Sets or gets the selected value.

Code examples

Invoke the val method.

//Get the value.

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

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

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

//Set value.

$("#jqxBulletChart").jqxBulletChart('val', 50); 

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

$("#jqxBulletChart").val(50);