API Reference for ejBulletGraph

23 Jun 202024 minutes to read

$(element).ejBulletGraph()

Example

  • HTML
    • <div id="bulletGraph1"></div> 
 
<script>
// Create BulletGraph
$('#bulletGraph1').ejBulletGraph();     
</script>

    Requires

    • module:jQuery.js

    • module:ej.core.js

    • module:ej.data.js

    • module:ej.bulletgraph.js

    Members

    applyRangeStrokeToLabels boolean

    Toggles the visibility of the range stroke color of the labels.

    Default Value

    • false

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
applyRangeStrokeToLabels : true                
});
</script>

    applyRangeStrokeToTicks boolean

    Toggles the visibility of the range stroke color of the ticks.

    Default Value

    • false

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
applyRangeStrokeToTicks : true               
});
</script>

    captionSettings object

    Contains property to customize the caption in bullet graph.

    captionSettings.enableTrim boolean

    Specifies whether trim the labels will be true or false.

    Default Value

    • true

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{ enableTrim : true }                    
});
</script>

    captionSettings.font object

    Contains property to customize the font of caption.

    captionSettings.font.color string

    Specifies the color of the text in caption.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{font :{color : "green"}}                  
});
</script>

    captionSettings.font.fontFamily string

    Specifies the fontFamily of caption. Caption text render with this fontFamily

    Default Value

    • “Segoe UI”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{font :{fontFamily : "Algerian"}}
});
</script>

    captionSettings.font.fontStyle enum

    Specifies the fontStyle of caption

    Name Type Description
    Normal string The texts are displayed in the default format
    Italic string The texts are displayed in italic format
    Oblique string The texts are displayed in the oblique format

    Specifies the fontStyle of caption. Caption text render with this fontStyle. See FontStyle

    Default Value

    • “Normal”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{font :{fontStyle : "italic"}}                    
});
</script>

    captionSettings.font.fontWeight enum

    Specifies the fontWeight of caption

    Name Type Description
    Normal string The texts are displayed in the default manner
    Bold string The texts are displayed in the Bold
    Bolder string The texts are displayed with increased boldness compared to the bold option
    Lighter string The texts are displayed with the decreased lightness

    Specifies the fontWeight of caption. Caption text render with this fontWeight. See FontWeight

    Default Value

    • “regular”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{font :{fontWeight : "lighter"}}                    
});
</script>

    captionSettings.font.opacity number

    Specifies the opacity of caption. Caption text render with this opacity.

    Default Value

    • 1

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{font :{opacity : 0.5}}                    
});
</script>

    captionSettings.font.size string

    Specifies the size of caption. Caption text render with this size

    Default Value

    • “12px”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{font :{size : "14px"}}                    
});
</script>

    captionSettings.indicator object

    Contains property to customize the indicator.

    captionSettings.indicator.font object

    Contains property to customize the font of indicator.

    captionSettings.indicator.font.color string

    Specifies the color of the indicator’s text.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{font : { color :"green" }}}                    
});
</script>

    captionSettings.indicator.font.fontFamily string

    Specifies the fontFamily of indicator. Indicator text render with this fontFamily.

    Default Value

    • “Segoe UI”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{font : { fontFamily :"Algerian" }}}                    
});
</script>

    captionSettings.indicator.font.fontStyle enum

    Specifies the fontStyle of indicator. Indicator text render with this fontStyle. See FontStyle

    Default Value

    • “Normal”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{font : { fontStyle :"italic" }}}                    
});
</script>

    captionSettings.indicator.font.fontWeight enum

    Specifies the fontWeight of indicator. Indicator text render with this fontWeight. See FontWeight

    Default Value

    • “regular”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{font : { fontWeight :"lighter" }}}                    
});
</script>

    captionSettings.indicator.font.opacity number

    Specifies the opacity of indicator text. Indicator text render with this Opacity.

    Default Value

    • 1

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{font : { opacity : 0.5 }}}                    
});
</script>

    captionSettings.indicator.font.size string

    Specifies the size of indicator. Indicator text render with this size.

    Default Value

    • “12px”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{font : { size :"14px" }}}                    
});
</script>

    captionSettings.indicator.location object

    Contains property to customize the location of indicator.

    captionSettings.indicator.location.x number

    Specifies the horizontal position of the indicator.

    Default Value

    • 10

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{location : { x :12 }}}                    
});
</script>

    captionSettings.indicator.location.y number

    Specifies the vertical position of the indicator.

    Default Value

    • 60

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{location : { y :60 }}}                    
});
</script>

    captionSettings.indicator.padding number

    Specifies the padding to be applied when text position is used.

    Default Value

    • 2

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{ indicator: {padding: 5}}                 
});
</script>

    captionSettings.indicator.symbol object

    Contains property to customize the symbol of indicator.

    captionSettings.indicator.symbol.border object

    Contains property to customize the border of indicator symbol.

    captionSettings.indicator.symbol.border.color string

    Specifies the border color of indicator symbol.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{symbol : { border: { color :"green" } }}}                    
});
</script>

    captionSettings.indicator.symbol.border.width number

    Specifies the border width of indicator symbol.

    Default Value

    • 1

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{symbol : { border: { width : 2 } }}}                    
});
</script>

    captionSettings.indicator.symbol.color string

    Specifies the color of indicator symbol.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{symbol : { color :"green" }}}                    
});
</script>

    captionSettings.indicator.symbol.imageURL string

    Specifies the URL of image that represents indicator symbol.

    Default Value

    • ””

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{symbol : { imageURL :"../BulletIndicator.png" }}}                    
});
</script>

    captionSettings.indicator.symbol.opacity number

    Specifies the opacity of indicator symbol.

    Default Value

    • 1

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{symbol : { opacity :0.5 }}}                    
});
</script>

    captionSettings.indicator.symbol.shape string

    Specifies the shape of indicator symbol.

    Default Value

    • ””

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{symbol : { shape :"triangle" }}}                    
});
</script>

    captionSettings.indicator.symbol.size object

    Contains property to customize the size of indicator symbol.

    captionSettings.indicator.symbol.size.height number

    Specifies the height of indicator symbol.

    Default Value

    • 10

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{symbol : { size : { height: 10 } }}}                    
});
</script>

    captionSettings.indicator.symbol.size.width number

    Specifies the width of indicator symbol.

    Default Value

    • 10

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{indicator :{symbol : { size : { width: 10 }}}                    
});
</script>

    captionSettings.indicator.text string

    Specifies the text to be displayed as indicator text. By default difference between current value and target will be displayed

    Default Value

    • ””

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{ indicator :{text : "Power Production"} }
});
</script>e

    captionSettings.indicator.textAlignment enum

    Specifies the alignment of indicator with respect to scale based on text position

    Name Type Description
    Near string The text is aligned near to the scale
    Far string The text is aligned far from the scale
    Center string The text is aligned center of the scale

    Specifies the alignment of indicator with respect to scale based on text position. Alignment will not be applied for float position.

    Default Value

    • ‘Near’

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{ indicator:{textAlignment: 'Far'}}
});
</script>

    captionSettings.indicator.textAnchor enum

    Specifies where indicator text should be anchored when indicator overlaps with other caption group text. Text will be anchored when overlapping caption group text are at same position. Anchoring is not applicable for float position.

    Name Type Description
    Start string The Start is used to anchor the text from beginning
    Middle string The Middle is used to anchor the text from the center
    End string The End is used to anchor the text from the end

    Specifies where indicator text should be anchored when indicator overlaps with other caption group text. Text will be anchored when overlapping caption group text are at same position. Anchoring is not applicable for float position.

    Default Value

    • ‘start’

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{ indicator: {textAnchor: 'end'}}
});
</script>

    captionSettings.indicator.textAngle number

    indicator text render in the specified angle.

    Default Value

    • 0

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{ indicator :{textAngle :10} }                    
});
</script>

    captionSettings.indicator.textPosition enum

    Specifies where indicator should be placed

    Name Type Description
    Top string The texts are positioned on the top of the quantitative scales
    Right string The texts are positioned to the right of the quantitative scales
    Left string The texts are positioned to the left of the quantitative scales
    Bottom string The texts are positioned to the bottom of the quantitative scales
    Float string The text can be placed at any location using the float property

    Specifies where indicator should be placed.

    Default Value

    • ‘float’

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{ indicator: {textPosition: 'Top'}}
});
</script>

    captionSettings.indicator.textSpacing number

    Specifies the space between indicator symbol and text.

    Default Value

    • 3

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{ indicator :{textSpacing :10} }                    
});
</script>

    captionSettings.indicator.visible boolean

    Specifies whether indicator will be visible or not.

    Default Value

    • false

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{ indicator :{visible : true} }                    
});
</script>

    captionSettings.location object

    Contains property to customize the location.

    captionSettings.location.x number

    Specifies the position in horizontal direction

    Default Value

    • 17

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{location :{x :15}}            
});
</script>

    captionSettings.location.y number

    Specifies the position in horizontal direction

    Default Value

    • 30

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{location :{y :15}}
});
</script>

    captionSettings.padding number

    Specifies the padding to be applied when text position is used.

    Default Value

    • 5

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{padding: 2}                 
});
</script>

    captionSettings.subTitle object

    Contains property to customize the subtitle.

    captionSettings.subTitle.font object

    Contains property to customize the font of subtitle.

    captionSettings.subTitle.font.color string

    Specifies the color of the subtitle’s text.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{subTitle :{font : { color :"green" }}}                    
});
</script>

    captionSettings.subTitle.font.fontFamily string

    Specifies the fontFamily of subtitle. Subtitle text render with this fontFamily.

    Default Value

    • “Segoe UI”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{subTitle :{font : { fontFamily :"Algerian" }}}                    
});
</script>

    captionSettings.subTitle.font.fontStyle enum

    Specifies the fontStyle of subtitle. Subtitle text render with this fontStyle. See FontStyle

    Default Value

    • “Normal”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{subTitle :{font : { fontStyle :"italic" }}}                    
});
</script>

    captionSettings.subTitle.font.fontWeight enum

    Specifies the fontWeight of subtitle. Subtitle text render with this fontWeight. See FontWeight

    Default Value

    • “regular”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{subTitle :{font : { fontWeight :"lighter" }}}                    
});
</script>

    captionSettings.subTitle.font.opacity number

    Specifies the opacity of subtitle. Subtitle text render with this opacity.

    Default Value

    • 1

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{subTitle :{font : { opacity :0.5 }}}                    
});
</script>

    captionSettings.subTitle.font.size string

    Specifies the size of subtitle. Subtitle text render with this size.

    Default Value

    • “12px”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{subTitle :{font : { size :"14px" }}}                    
});
</script>

    captionSettings.subTitle.location object

    Contains property to customize the location of subtitle.

    captionSettings.subTitle.location.x number

    Specifies the horizontal position of the subtitle.

    Default Value

    • 10

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{subTitle :{location : { x :12 }}}                    
});
</script>

    captionSettings.subTitle.location.y number

    Specifies the vertical position of the subtitle.

    Default Value

    • 45

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{subTitle :{location : { y :50 }}}                    
});
</script>

    captionSettings.subTitle.padding number

    Specifies the padding to be applied when text position is used.

    Default Value

    • 5

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{subTitle:{padding: 8}}
});
</script>

    captionSettings.subTitle.text string

    Specifies the text to be displayed as subtitle.

    Default Value

    • ””

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{ subTitle :{text : "Power Production"} }
});
</script>e

    captionSettings.subTitle.textAlignment enum

    Specifies the alignment of sub title text with respect to scale. Alignment will not be applied in float position.

    Default Value

    • ‘Near’

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{subTitle:{textAlignment: 'Far'}}
});
</script>

    captionSettings.subTitle.textAnchor enum

    Specifies where subtitle text should be anchored when sub title text overlaps with other caption group text. Text will be anchored when overlapping caption group text are at same position. Anchoring is not applicable for float position.

    Default Value

    • ‘start’

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{ subTitle: {textAnchor: 'end'}}
});
</script>

    captionSettings.subTitle.textAngle number

    Subtitle render in the specified angle.

    Default Value

    • 0

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{ subTitle :{textAngle :10} }                    
});
</script>

    captionSettings.subTitle.textPosition enum

    Specifies where sub title text should be placed.

    Default Value

    • ‘float’

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{ subTitle:{textPosition: 'Right'}}
});
</script>

    captionSettings.text string

    Specifies the text to be displayed on bullet graph.

    Default Value

    • ””

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{text : "Production"}
});
</script>

    captionSettings.textAlignment enum

    Specifies the alignment of caption text with respect to scale. This property will not be applied when text position is float.

    Default Value

    • ‘Near’

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{textAlignment: 'Center'}                 
});
</script>

    captionSettings.textAnchor enum

    Specifies caption text anchoring when caption text overlaps with other caption group text. Text will be anchored when overlapping caption group text are at same position. Anchoring is not applicable for float position.

    Default Value

    • ‘start’

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{textAnchor: 'middle'}
});
</script>

    captionSettings.textAngle number

    Specifies the angel in which the caption is rendered.

    Default Value

    • 0

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{textAngle : 5}                 
});
</script>

    captionSettings.textPosition enum

    Specifies how caption text should be placed.

    Default Value

    • ‘float’

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
captionSettings :{textPosition: 'Top'}                 
});
</script>

    comparativeMeasureValue number

    Comparative measure bar in bullet graph render till the specified value.

    Default Value

    • 0

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
comparativeMeasureValue : 1                    
});
</script>

    enableAnimation boolean

    Toggles the animation of bullet graph.

    Default Value

    • true

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
enableAnimation : false                 
});
</script>

    enableResizing boolean

    Controls whether bullet graph has to be responsive while resizing.

    Default Value

    • true

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
enableResizing : false                 
});
</script>

    flowDirection enum

    Specifies the direction of flow in bullet graph. Neither it may be backward nor forward.

    Name Type Description
    Forward string The BulletGraph is rendered from left to right
    Backward string The BulletGraph is rendered from right to left

    Specifies the direction of flow in bullet graph. Neither it may be backward nor forward.

    Default Value

    • “forward”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
flowDirection : "backward"                   
});
</script>

    height number

    Specifies the height of the bullet graph.

    Default Value

    • 90

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
height : 600                    
});
</script>

    isResponsive boolean

    Sets a value whether to make the bullet graph responsive on resize.

    Default Value

    • true

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
isResponsive : false                  
});
</script>

    enableGroupSeparator boolean

    Specifies to convert the date object to string, using locale settings.

    Default Value

    • false

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
enableGroupSeparator: true                  
});
</script>

    locale string

    Name of the culture based on which bulletgraph should be localized.

    Default Value

    • “en-US”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
locale : "en-US"                   
});
</script>

    orientation enum

    Bullet graph will render in the specified orientation.

    Name Type Description
    Horizontal string The BulletGraph is oriented in horizontal direction
    Vertical string The BulletGraph is oriented in vertical direction

    Bullet graph will render in the specified orientation.

    Default Value

    • “horizontal”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
orientation : "vertical"                   
});
</script>

    qualitativeRanges array

    Contains property to customize the qualitative ranges.

    qualitativeRanges.rangeEnd number

    Specifies the ending range to which the qualitative ranges will render.

    Default Value

    • 3

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
qualitativeRanges :[{rangeEnd : 4.5}]                  
});
</script>

    qualitativeRanges.rangeOpacity number

    Specifies the opacity for the qualitative ranges.

    Default Value

    • 1

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
qualitativeRanges :[{rangeOpacity : 0.5}]                 
});
</script>

    qualitativeRanges.rangeStroke string

    Specifies the stroke for the qualitative ranges.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
qualitativeRanges :[{rangeStroke : 5}]                 
});
</script>

    qualitativeRangeSize number

    Size of the qualitative range depends up on the specified value.

    Default Value

    • 32

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
qualitativeRangeSize : 35                  
});
</script>

    quantitativeScaleLength number

    Length of the quantitative range depends up on the specified value.

    Default Value

    • 475

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleLength :500                 
});
</script>

    quantitativeScaleSettings object

    Contains all the properties to customize quantitative scale.

    quantitativeScaleSettings.comparativeMeasureSettings object

    Contains property to customize the comparative measure.

    quantitativeScaleSettings.comparativeMeasureSettings.stroke number

    Specifies the stroke of the comparative measure.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { comparativeMeasureSettings :{ stroke :2} }                  
});
</script>

    quantitativeScaleSettings.comparativeMeasureSettings.width number

    Specifies the width of the comparative measure.

    Default Value

    • 5

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
 quantitativeScaleSettings : { comparativeMeasureSettings :{ width :6} }                     
});
</script>

    quantitativeScaleSettings.featuredMeasureSettings object

    Contains property to customize the featured measure.

    quantitativeScaleSettings.featuredMeasureSettings.stroke number

    Specifies the Stroke of the featured measure in bullet graph.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { featuredMeasureSettings :{stroke : 2} }
});
</script>

    quantitativeScaleSettings.featuredMeasureSettings.width number

    Specifies the width of the featured measure in bullet graph.

    Default Value

    • 2

    Example

  • HTML
    • <div id="ejBulletGraph"></div> 
<script>
        $("#bulletGraph1").ejBulletGraph({
   quantitativeScaleSettings: { featuredMeasureSettings: { width: 3 }},
   });
</script>

    quantitativeScaleSettings.featureMeasures array

    Contains property to customize the featured measure.

    quantitativeScaleSettings.featureMeasures.category string

    Specifies the category of feature measure.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { featureMeasures :[{ category :null}] }                  
});
</script>

    quantitativeScaleSettings.featureMeasures.comparativeMeasureValue number

    Comparative measure render till the specified value.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { featureMeasures :[{ comparativeMeasureValue :2}] }                  
});
</script>

    quantitativeScaleSettings.featureMeasures.value number

    Feature measure render till the specified value.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { featureMeasures :[{ value :2}] }                  
});
</script>

    quantitativeScaleSettings.fields object

    Contains property to customize the fields.

    quantitativeScaleSettings.fields.category string

    Specifies the category of the bullet graph.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
fields :{category : "ProductId"}                  
});
</script>

    quantitativeScaleSettings.fields.comparativeMeasure string

    Comparative measure render based on the values in the specified field.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
fields :{comparativeMeasure : "comparativeMeasureValue"}                  
});
</script>

    quantitativeScaleSettings.fields.dataSource object

    Specifies the dataSource for the bullet graph.

    Default Value

    • null

    Example

  • HTML
    • // To initialize with local JSON data to the dataSource
$("#SampleBullet").ejBulletGraph({
fields: {
dataSource: localData,
category: &ldquo;Category&rdquo;,
featureMeasures: &ldquo;FeatureValue&rdquo;,
comparativeMeasure: &ldquo;ComparativeValue&rdquo;
}
});
// where local JSON data assigned to the dataSource is as the below one
var localData = [{
                   FeatureValue: 8, ComparativeValue: 7.5,
                   Category: 1
               },
               {
                   FeatureValue: 9, ComparativeValue: 5,
                   Category: 2
               }];
// To initialize with remote data to the dataSource using DataManager
$("#SampleBullet").ejBulletGraph({
     fields: {
          dataSource: dataManager,
          query: queryString,
          category: "ProductID",
          featureMeasures: "UnitPrice",
          comparativeMeasure: "Quantity"
     }
});
// Data Manager creation
           var dataManager = ej.DataManager({
               url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
           });
  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
fields : {datasource :{ej.DataManger :{url : "http://mvc.syncfusion.com/Services/Northwnd.svc/" }} }                 
});
</script>

    quantitativeScaleSettings.fields.featureMeasures string

    Feature measure render based on the values in the specified field.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
fields :{featureMeasures : "UnitPrice"}                  
});
</script>

    quantitativeScaleSettings.fields.query string

    Specifies the query for fetching the values form data source to render the bullet graph.

    Default Value

    • null

    quantitativeScaleSettings.fields.tableName string

    Specifies the name of the table.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
fields :{tableName : "Product"}                 
});
</script>

    quantitativeScaleSettings.interval number

    Specifies the interval for the Graph.

    Default Value

    • 1

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { interval : 2 }
});
</script>

    quantitativeScaleSettings.labelSettings object

    Contains property to customize the labels.

    quantitativeScaleSettings.labelSettings.font object

    Contains property to customize the font of the labels in bullet graph.

    quantitativeScaleSettings.labelSettings.font.fontFamily string

    Specifies the fontFamily of labels in bullet graph. Labels render with this fontFamily.

    Default Value

    • “Segoe UI”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { labelSettings : { font :{ fontFamily : "Algerian" } } }                  
});
</script>

    quantitativeScaleSettings.labelSettings.font.fontStyle enum

    Specifies the fontStyle of labels in bullet graph. Labels render with this fontStyle. See FontStyle

    Default Value

    • “Normal”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { labelSettings : { font :{ fontStyle : "italic" } } }
});
</script>

    quantitativeScaleSettings.labelSettings.font.fontWeight enum

    Specifies the fontWeight of labels in bullet graph. Labels render with this fontWeight. See FontWeight

    Default Value

    • “regular”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { labelSettings : { font :{ fontWeight : "lighter" } } }
});
</script>

    quantitativeScaleSettings.labelSettings.font.opacity number

    Specifies the opacity of labels in bullet graph. Labels render with this opacity

    Default Value

    • 1

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { labelSettings : { font :{ opacity : 0.5 } } }
});
</script>

    quantitativeScaleSettings.labelSettings.labelPlacement enum

    Specifies the placement of labels in bullet graph scale.

    Name Type Description
    Inside string The Quantitative Scale Labels are placed inside the scale
    Outside string The Quantitative Scale labels are placed outside the scale

    Specifies the placement of labels in bullet graph scale.

    Default Value

    • outside

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { labelSettings : { labelPlacement : "inside" } }                  
});
</script>

    quantitativeScaleSettings.labelSettings.labelPrefix string

    Specifies the prefix to be added with labels in bullet graph.

    Default Value

    • Empty string

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { labelSettings : { labelPrefix : "$" } }                  
});
</script>

    quantitativeScaleSettings.labelSettings.labelSuffix string

    Specifies the suffix to be added after labels in bullet graph.

    Default Value

    • Empty string

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { labelSettings : { labelSuffix : "K" } }                  
});
</script>

    quantitativeScaleSettings.labelSettings.offset number

    Specifies the horizontal/vertical padding of labels.

    Default Value

    • 15

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { labelSettings : { offset : 25 } }                  
});
</script>

    quantitativeScaleSettings.labelSettings.position enum

    Specifies the position of the labels to render either above or below the graph. See Position

    Name Type Description
    Above string The labels are placed above the graph
    Below string The labels are placed below the graph

    Specifies the position of the labels to render either above or below the graph. See Position

    Default Value

    • “below”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { labelSettings : { position : "above" } }                  
});
</script>

    quantitativeScaleSettings.labelSettings.size number

    Specifies the Size of the labels.

    Default Value

    • 12

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { labelSettings : { size : 10 } }                  
});
</script>

    quantitativeScaleSettings.labelSettings.stroke string

    Specifies the stroke color of the labels in bullet graph.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { labelSettings : { stroke : "green" } }                  
});
</script>

    quantitativeScaleSettings.location object

    Contains property to customize the position of the quantitative scale

    quantitativeScaleSettings.location.x number

    This property specifies the x position for rendering quantitative scale.

    Default Value

    • 10

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { location : { x : 15 } } 
});
</script>

    quantitativeScaleSettings.location.y number

    This property specifies the y position for rendering quantitative scale.

    Default Value

    • 10

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { location : { y : 15 } }
});
</script>

    quantitativeScaleSettings.majorTickSettings object

    Contains property to customize the major tick lines.

    quantitativeScaleSettings.majorTickSettings.size number

    Specifies the size of the major ticks.

    Default Value

    • 13

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { majorTickSettings : { size : 15 } }
});
</script>

    quantitativeScaleSettings.majorTickSettings.stroke string

    Specifies the stroke color of the major tick lines.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { majorTickSettings : { stroke : "red" } }                  
});
</script>

    quantitativeScaleSettings.majorTickSettings.width number

    Specifies the width of the major tick lines.

    Default Value

    • 2

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { majorTickSettings : { width : 1 } }                  
});
</script>

    quantitativeScaleSettings.maximum number

    Specifies the maximum value of the Graph.

    Default Value

    • 10

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { maximum : 8 }                  
});
</script>

    quantitativeScaleSettings.minimum number

    Specifies the minimum value of the Graph.

    Default Value

    • 0

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { minimum : 1 }
});
</script>

    quantitativeScaleSettings.minorTickSettings object

    Contains property to customize the minor ticks.

    quantitativeScaleSettings.minorTickSettings.size number

    Specifies the size of minor ticks.

    Default Value

    • 7

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { minorTickSettings : { size : 10} }                  
});
</script>

    quantitativeScaleSettings.minorTickSettings.stroke string

    Specifies the stroke color of minor ticks in bullet graph.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { minorTickSettings : { stroke : "green" } }
});
</script>

    quantitativeScaleSettings.minorTickSettings.width number

    Specifies the width of the minor ticks in bullet graph.

    Default Value

    • 2

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { minorTickSettings : { width : 1 } }
});
</script>

    quantitativeScaleSettings.minorTicksPerInterval number

    The specified number of minor ticks will be rendered per interval.

    Default Value

    • 4

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { minorTicksPerInterval : 5 }
});
</script>

    quantitativeScaleSettings.tickPlacement enum

    Specifies the placement of ticks to render either inside or outside the scale.

    Name Type Description
    Inside string The quantitative scale ticks are placed inside the scale
    Outside string The quantitative scale ticks are placed outside the scale

    Specifies the placement of ticks to render either inside or outside the scale. See LabelPlacement

    Default Value

    • ej.datavisualization.BulletGraph.TickPlacement.Outside

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { tickPlacement : "inside" }
});
</script>

    quantitativeScaleSettings.tickPosition enum

    Specifies the position of the ticks to render either above,below or inside

    Name Type Description
    Below string The ticks are positioned below the Quantitative scale
    Above string The ticks are positioned above the Quantitative scale
    Cross string The ticks are placed inside the Quantitative scale

    Specifies the position of the ticks to render either above, below or inside the graph. See LabelPosition

    Default Value

    • ej.datavisualization.BulletGraph.TickPosition.Far

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
quantitativeScaleSettings : { tickPosition : "near" }
});
</script>

    theme string

    By specifying this property the user can change the theme of the bullet graph.

    Default Value

    • “flatlight”

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
theme : "flatdark"                  
});
</script>

    tooltipSettings object

    Contains all the properties to customize tooltip.

    tooltipSettings.captionTemplate string

    Specifies template for caption tooltip

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
tooltipSettings :{captionTemplate: "Tooltip"}
});
</script>

    tooltipSettings.enableCaptionTooltip boolean

    Toggles the visibility of caption tooltip

    Default Value

    • false

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
tooltipSettings :{enableCaptionTooltip: true}
});
</script>

    tooltipSettings.template string

    Specifies the ID of a div, which is to be displayed as tooltip.

    Default Value

    • null

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
tooltipSettings: { template : "tooltip"},
});
</script>

    tooltipSettings.visible boolean

    Toggles the visibility of tooltip

    Default Value

    • true

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
tooltipSettings :{visible: false}
});
</script>

    value number

    Feature measure bar in bullet graph render till the specified value.

    Default Value

    • 0

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
value : 1                    
});
</script>

    width number

    Specifies the width of the bullet graph.

    Default Value

    • 595

    Example

  • HTML
    • <div id="bulletGraph1"></div> 
<script>
$("#bulletGraph1").ejBulletGraph({
width : 600                    
});
</script>

    Methods

    destroy ()

    To destroy the bullet graph

    Returns: void

    Example

  • HTML
    • <div id="bulletgraph1">Bullet Graph</div> 
 
<script>
// Destroy Bullet graph
var graphObj = $("#bulletGraph1").data("ejBulletGraph");
graphObj.destroy(); // destroy the graph
</script>
  • HTML
    • <div id="bulletGraph1">BulletGraph</div> 
 
<script>
// destroy the Bullet graph
$("#bulletGraph1").ejButton("destroy"); 
</script>

    redraw()

    To redraw the bullet graph

    Returns: void

    Example

  • HTML
    • <div id="bulletgraph1">Bullet Graph</div> 
 
<script>
// Create Bullet graph
var graphObj = $("#bulletGraph1").data("ejBulletGraph");
graphObj.redraw(); // redraw the graph
</script>
  • HTML
    • <div id="bulletGraph1">BulletGraph</div> 
 
<script>
// redraw the Bullet graph
$("#butbulletGraph1ton1").ejButton("redraw");   
</script>

    setComparativeMeasureSymbol(index, measure)

    To set the value for comparative measure in bullet graph.

    Name Type Description
  • HTML
    • index
    		 number value for the graph
  • HTML
    • measure
    		 number value for the graph

    Returns: void

    Example

  • HTML
    • <div id="bulletGraph1">BulletGraph</div> 
 
<script>
// set the value for comparative measure
var btnObj = $("#bulletGraph1").data("ejBulletGraph");
btnObj.setComparativeMeasureSymbol(1,7); // set the value
</script>
  • HTML
    • <div id="bulletGraph1">BulletGraph</div> 
 
<script>
// set the value for comparative measure
$("#bulletGraph1").ejBulletGraph("setComparativeMeasureSymbol(1,7)");   
</script>

    setFeatureMeasureBarValue(index, measure)

    To set the value for feature measure bar.

    Name Type Description
  • HTML
    • index
    		 number value for the graph
  • HTML
    • measure
    		 number value for the graph

    Returns: void

    Example

  • HTML
    • <div id="bulletGraph1">Bulletgraph</div> 
 
<script>
// To set the value for feature measure bar.
var btnObj = $("#bulletGraph1").data("ejBulletGraph");
btnObj.setFeatureMeasureBarValue(1,8); // set the value
</script>
  • HTML
    • <div id="bulletGraph1">BulletGraph</div> 
 
<script>
// To set the value for feature measure bar.
$("#bulletGraph1").ejBulletGraph("setFeatureMeasureBarValue(1,8)");     
</script>

    Events

    drawCaption

    Fires on rendering the caption of bullet graph.

    Name Type Description
  • HTML
    • Object
    		 Object returns the object of the bullet graph.
  • HTML
    • scaleElement
    		 Element returns the options of the scale element.
  • HTML
    • captionElement
    		 Element returns the current captionSettings element.
  • HTML
    • captionType
    		 string returns the type of the captionSettings.

    Example

  • HTML
    • //drawCaption event for bulletgraph
$("#bulletGraph1").ejBulletGraph({
   drawCaption: function (args) {}
});

    drawCategory

    Fires on rendering the category.

    Name Type Description
  • HTML
    • Object
    		 Object returns the object of the bullet graph.
  • HTML
    • scaleElement
    		 Element returns the options of the scale element.
  • HTML
    • categoryElement
    		 Element returns the options of category element.
  • HTML
    • Value
    		 string returns the text value of the category that is drawn.

    Example

  • HTML
    • //drawCategory event for bulletgraph
$("#bulletGraph1").ejBulletGraph({
   drawCategory: function (args) {}
});

    drawComparativeMeasureSymbol

    Fires on rendering the comparative measure symbol.

    Name Type Description
  • HTML
    • Object
    		 Object returns the object of the bullet graph.
  • HTML
    • scaleElement
    		 Element returns the options of the scale element.
  • HTML
    • targetElement
    		 Element returns the options of comparative measure element.
  • HTML
    • Value
    		 number returns the value of the comparative measure symbol.

    Example

  • HTML
    • //drawComparativeMeasureSymbol event for bulletgraph
$("#bulletGraph1").ejBulletGraph({
   drawComparativeMeasureSymbol: function (args) {}
});

    drawFeatureMeasureBar

    Fires on rendering the feature measure bar.

    Name Type Description
  • HTML
    • Object
    		 Object returns the object of the bullet graph.
  • HTML
    • scaleElement
    		 Element returns the options of the scale element.
  • HTML
    • currentElement
    		 Element returns the options of feature measure element.
  • HTML
    • Value
    		 number returns the value of the feature measure bar.

    Example

  • HTML
    • //drawFeatureMeasureBar event for bulletgraph
$("#bulletGraph1").ejBulletGraph({
   drawFeatureMeasureBar: function (args) {}
});

    drawIndicator

    Fires on rendering the indicator of bullet graph.

    Name Type Description
  • HTML
    • indicatorSettings
    		 Object returns an object to customize bullet graph indicator text and symbol before rendering it.
  • HTML
    • model
    		 Object returns the object of bullet graph.
  • HTML
    • type
    		 string returns the type of event.
  • HTML
    • cancel
    		 boolean for canceling the event.

    Example

  • HTML
    • //drawIndicator event for bulletgraph
$("#bulletGraph1").ejBulletGraph({
   drawIndicator: function (args) {}
});

    drawLabels

    Fires on rendering the labels.

    Name Type Description
  • HTML
    • Object
    		 Object returns the object of the bullet graph.
  • HTML
    • scaleElement
    		 Element returns the options of the scale element.
  • HTML
    • tickElement
    		 Element returns the current label element.
  • HTML
    • labelType
    		 string returns the label type.

    Example

  • HTML
    • //drawLabels event for bulletgraph
$("#bulletGraph1").ejBulletGraph({
   drawLabels: function (args) {}
});

    drawTicks

    Fires on rendering the ticks.

    Name Type Description
  • HTML
    • model
    		 object returns the model of the bullet graph.
  • HTML
    • type
    		 string returns the name of the event.
  • HTML
    • cancel
    		 boolean if the event should be canceled; otherwise, false.
  • HTML
    • majorTickSettings
    		 object returns the settings for majorTicks.
  • HTML
    • minorTickSettings
    		 object returns the settings for minorTicks.
  • HTML
    • maximum
    		 number returns the maximum value.
  • HTML
    • minimum
    		 number returns the minimum value.
  • HTML
    • interval
    		 number returns the interval value.
  • HTML
    • minorTickPerInterval
    		 number returns the value of minorTicksPerInterval.

    Example

  • HTML
    • //drawTicks event for bulletgraph
$("#bulletGraph1").ejBulletGraph({
   drawTicks: function (args) {}
});

    drawQualitativeRanges

    Fires on rendering the qualitative ranges.

    Name Type Description
  • HTML
    • Object
    		 Object returns the object of the bullet graph.
  • HTML
    • rangeIndex
    		 number returns the index of current range.
  • HTML
    • rangeOptions
    		 Object returns the settings for current range.
  • HTML
    • rangeEndValue
    		 number returns the end value of current range.

    Example

  • HTML
    • //drawQualitativeRanges event for bulletgraph
$("#bulletGraph1").ejBulletGraph({
   drawQualitativeRanges: function (args) {}
});

    load

    Fires on loading bullet graph.

    Name Type Description
  • HTML
    • model
    		 object returns the model of the bullet graph.
  • HTML
    • type
    		 string returns the name of the event.
  • HTML
    • cancel
    		 boolean if the event should be canceled; otherwise, false.

    Example

  • HTML
    • //drawTicks event for bulletgraph
$("#bulletGraph1").ejBulletGraph({
   load: function (args) {}
});

    Click

    Fires, on clicking the bullet graph.

    Example

  • JS
    • //Click event for bullet graph

$("#bulletGraph1").ejBulletGraph({

    click: function (args) {
              //Do something
    }
   
});
    Name Type Description
  • JS
    • cancel
    		 boolean Set this option to true to cancel the event
  • JS
    • model
    		 object Instance of the bullet graph model object
  • JS
    • type
    		 string Name of the event
  • JS
    • data
    		 Object
    • location - X and Y co-ordinate of the points with respect to bullet graph area.
    • id - ID of the target element.
    • size - Width and height of the bullet graph.
    • pageX - x-coordinate of the pointer, relative to the page
    • pageY - y-coordinate of the pointer, relative to the page

    doubleClick

    Fires, on double clicking the bullet graph.

    Example

  • JS
    • //DoubleClick event for bullet graph

$("#bulletGraph1").ejBulletGraph({

    doubleClick: function (args) {
              //Do something
    }
   
});
    Name Type Description
  • JS
    • cancel
    		 boolean Set this option to true to cancel the event
  • JS
    • model
    		 object Instance of the bullet graph model object
  • JS
    • type
    		 string Name of the event
  • JS
    • data
    		 Object
    • location - X and Y co-ordinate of the points with respect to bullet graph area.
    • id - ID of the target element.
    • size - Width and height of the bullet graph.
    • pageX - x-coordinate of the pointer, relative to the page
    • pageY - y-coordinate of the pointer, relative to the page

    rightClick

    Fires, on right clicking the bullet graph.

    Example

  • JS
    • //RightClick event for bullet graph

$("#bulletGraph1").ejBulletGraph({
    rightClick: function (args) {
              //Do something
    }
   
});
    Name Type Description
  • JS
    • cancel
    		 boolean Set this option to true to cancel the event
  • JS
    • model
    		 object Instance of the bullet graph model object
  • JS
    • type
    		 string Name of the event
  • JS
    • data
    		 Object
    • location - X and Y co-ordinate of the points with respect to bullet graph area.
    • id - ID of the target element.
    • size - Width and height of the bullet graph.
    • pageX - x-coordinate of the pointer, relative to the page
    • pageY - y-coordinate of the pointer, relative to the page