jQuery BulletChart API

Name Type Default

animationDuration Function null

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

Try it: animationDuration is set to 'slow'

barSize Array 50%

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

Try it: barSize is set to '40%'

description String 'Description'

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

Try it: description is set to 'New description'

disabled Boolean false

Disables the bullet chart.

Code examples

Set the disabled property.

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

Get the disabled property.

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

Try it: disabled is set to true

height Number/String 100

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

Try it: height is set to 120

labelsFormat String null

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

Try it: labelsFormat is set to 'c'

labelsFormatFunction Function null

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

Try it: labelsFormatFunction is set to a custom function

orientation String "horizontal"

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

Try it: orientation is set to 'vertical'

pointer Object { value: 65, label: "Value", size: "25%", color: "" }

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

Try it: pointer is set to a custom object

rtl Boolean false

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

Try it: rtl is set to true

ranges Array [{ startValue: 0, endValue: 50, color: "#000000", opacity: 0.7 }, { startValue: 50, endValue: 80, color: "#000000", opacity: 0.5 }, { startValue: 80, endValue: 100, color: "#000000", opacity: 0.3}]

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

Try it: ranges is set to a custom array

showTooltip Boolean true

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

Try it: showTooltip is set to false

target Object { value: 85, label: "Target", size: 4, color: "" };

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

Try it: target is set to a custom object

ticks Object { position: "far", interval: 20, size: 10 }

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

Try it: ticks is set to a custom object

title String 'Title'

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

Try it: title is set to 'New title'

tooltipFormatFunction Function null

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

Try it: tooltipFormatFunction is set to a custom function

width Number/String 500

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

Try it: width is set to 600

change Event

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

Try it: Bind to the change event by type: jqxBulletChart.

destroy Method

Destroy the jqxBulletChart widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

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

Try it: destroy the jqxBulletChart.

render Method

Renders the jqxBulletChart widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the render method.

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

Try it: render the bulletchart

refresh Method

Refresh the jqxBulletChart widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the refresh method.

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

Try it: refresh the bulletchart

val Method

Sets or gets the selected value.

Parameter	Type	Description
value(optional)	Number

Return Value
Number

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

Try it: change the jqxBulletChart's value.

Properties

Possible values

Code examples

Code examples

Code examples

Code examples

Code examples

Possible values:

Code examples

Code examples

Possible values:

Code examples

Code examples

Code examples

Possible values

Code examples

Code examples

Code examples

Possible values for ticks.position

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Methods

Code examples

Code examples

Code examples

Code examples