API Reference for ejDigitalGauge

23 Jun 202024 minutes to read

The Digital gauge can be easily configured to the DOM element, such as div. you can create a digital gauge with a highly customizable look and feel.

$(element).ejDigitalGauge(options)

Name	Type	Description
HTML options	object	For setting the Digital gauge

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$('#DigitalCore').ejDigitalGauge();         
</script>

Requires

• module:jQuery.js

• module:jquery.easing.js

• module:ej.common.all.js

• module:excanvas.js

Members

exportSettings object

This provides options for customizing export settings

exportSettings.filename string

Specifies the downloading filename

Default Value

• “DigitalGauge”

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({ 
    exportSettings: { 
                     filename : "myGauge" 
                } 
    });
</script>

exportSettings.type enum

Specifies the format of the file to export

Name	Type	Description
PNG	string	The gauge will be exported in .png format
JPG	string	The gauge will be exported in .jpg format

Default Value

• “png”

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({ 
    exportSettings: { 
                      type : "jpg"
                } 
    });
</script>

exportSettings.action string

Specifies the name of the action URL

Default Value

• ””

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({ 
    exportSettings: { 
                     action : "http://js.syncfusion.com/ExportingServices/api/JSDigitalGaugeExport/Export"
                } 
    });
</script>

exportSettings.mode enum

Specifies the mode of exporting

Name	Type	Description
Server Side	string	The Gauge is exported at server side
Client Side	string	The Gauge is exported at client side

Default Value

• “client”

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({ 
    exportSettings: { 
                      mode : "server"
                } 
    });
</script>

frameobject

Specifies the frame of the Digital gauge.

Default Value

• {backgroundImageUrl: null, innerWidth: 6, outerWidth: 10}

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({ frame:{backgroundImageUrl: null, innerWidth:6, outerWidth:10}});
</script>

frame.backgroundImageUrl string

Specifies the URL of an image to be displayed as background of the Digital gauge.

Default Value

• null

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({frame:{ backgroundImageUrl: "styles\images\Car.png" }});
</script>

frame.innerWidth number

Specifies the inner width for the frame, when the background image has been set for the Digital gauge..

Default Value

• 6

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({frame:{ innerWidth: 30 }});
</script>

frame.outerWidth number

Specifies the outer width of the frame, when the background image has been set for the Digital gauge.

Default Value

• 10

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({frame: { outerWidth: 30 } });
</script>

height number

Specifies the height of the DigitalGauge.

Default Value

• 150

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({ height: 60 }); 
</script>

isResponsive boolean

Specifies the resize option of the DigitalGauge.

Default Value

• false

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({ isResponsive: true }); 
</script>

enableResize boolean

Specifies the responsiveness of the Digital gauge

Default Value

• false

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({ enableResize: true }); 
</script>

itemsarray

Specifies the items for the DigitalGauge.

Default Value

• null

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({width: 500});
</script>

items.characterSettingsobject

Specifies the Character settings for the DigitalGauge.

Default Value

• null

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ characterSettings: {count: 4} }] });
</script>

items.characterSettings.count number

Specifies the CharacterCount value for the DigitalGauge.

Default Value

• 4

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ characterSettings: {count: 4} }] });
</script>

items.characterSettings.opacity number

Specifies the opacity value for the DigitalGauge.

Default Value

• 1

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ characterSettings: {opacity: 1} }] });
</script>

items.characterSettings.spacing number

Specifies the value for spacing between the characters

Default Value

• 2

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ characterSettings: {spacing: 3} }] });
</script>

items.characterSettings.type enum

Specifies the character type for the text to be displayed.

Name	Type	Description
SevenSegment	string	Characters are displayed in Seven Segment Format
FourteenSegment	string	Characters are displayed in Fourteen Segment Format
SixteenSegment	string	Characters are displayed in Sixteen Segment format
EightCrossEightDotMatrix	string	Characters are displayed in EightCrossEightDotMatrix format
EightCrossEightSquareMatrix	string	Characters are displayed in EightCrossEightSquareMatrix format

Specifies the character type for the text to be displayed. See CharacterType

Default Value

• ej.datavisualization.DigitalGauge.CharacterType.EightCrossEightDotMatrix

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{characterSettings:{ type: "eightcrosseightdotmatrix" }}] });
</script>

items.enableCustomFont boolean

Enable/Disable the custom font to be applied to the text in the gauge.

Default Value

• false

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ enableCustomFont: true }] });
</script>

items.fontobject

Set the specific font for the text, when the enableCustomFont is set to true

Default Value

• null

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{enableCustomFont: true ,font: { size: "12px",fontFamily: "Segou",fontStyle: "bold"}}]});
</script>

items.font.fontFamily string

Set the font family value

Default Value

• Arial

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{enableCustomFont: true ,font: { fontFamily: "Segou"}}]});
</script>

items.font.fontStyle enum

Set the font style for the font

Name	Type	Description
Normal	string	The texts are displayed in the default format
Bold	string	The texts are displayed in the bold format
Italic	string	The texts are displayed in italic format
Underline	string	The texts are displayed in underlined format
Strikeout	string	The texts are displayed in the strike out format

Set the font style for the font. See FontStyle

Default Value

• italic

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{enableCustomFont: true ,font: { fontStyle: "bold" }}]});
</script>

items.font.size string

Set the font size value

Default Value

• 11px

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{enableCustomFont: true,font: { size: "18px"}}]});
</script>

items.positionobject

Set the location for the text, where it needs to be placed within the gauge.

Default Value

• null

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{position: { x: 10, y: 20 } }]});
</script>

items.position.x number

Set the horizontal location for the text, where it needs to be placed within the gauge.

Default Value

• 0

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{position : { x: 10,y:0} }]});
</script>

items.position.y number

Set the vertical location for the text, where it needs to be placed within the gauge.

Default Value

• 0

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{position: { x:0,y: 20 } }]});
</script>

items.segmentSettingsobject

Set the segment settings for the digital gauge.

Default Value

• null

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ segmentSettings: {length: 2} }] });
</script>

items.segmentSettings.color string

Set the color for the text segments.

Default Value

• null

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ segmentSettings: {color: "#FF1F2F"} }] });
</script>

items.segmentSettings.gradientobject

Set the gradient for the text segments.

Default Value

• null

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ segmentSettings: {gradient: { colorInfo: [{ colorStop: 0, color: "Green" }, { colorStop: 1, color: "Yellow" }] } } }] });
</script>

items.segmentSettings.length number

Set the length for the text segments.

Default Value

• 2

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ segmentSettings: {length: 2} }] });
</script>

items.segmentSettings.opacity number

Set the opacity for the text segments.

Default Value

• 0

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ segmentSettings: {opacity: 2} }] });
</script>

items.segmentSettings.spacing number

Set the spacing for the text segments.

Default Value

• 1

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ segmentSettings: {spacing: 1} }] });
</script>

items.segmentSettings.width number

Set the width for the text segments.

Default Value

• 1

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ segmentSettings: {width: 1} }] });
</script>

items.shadowBlur number

Set the value for enabling/disabling the blurring effect for the shadows of the text

Default Value

• 0

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ shadowBlur:  1 }] });
</script>

items.shadowColor string

Specifies the color of the text shadow.

Default Value

• null

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({ items: [{shadowColor: "#FF1F2F" }]});
</script>

items.shadowOffsetX number

Set the x offset value for the shadow of the text, indicating the location where it needs to be displayed.

Default Value

• 1

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ shadowOffsetX:  2 }] });
</script>

items.shadowOffsetY number

Set the y offset value for the shadow of the text, indicating the location where it needs to be displayed.

Default Value

• 1

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ shadowOffsetY:  2 }] });
</script>

items.textAlign string

Set the alignment of the text that is displayed within the gauge.See TextAlign

Default Value

• “left”

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ textAlign:  "right" }] });
</script>

items.textColor string

Specifies the color of the text.

Default Value

• null

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({ items: [{textColor: "#FF1F2F" }]});
</script>

items.value string

Specifies the text value.

Default Value

• null

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({ items: [{value: "Welcome" }]});
</script>

matrixSegmentData object

Specifies the matrixSegmentData for the DigitalGauge.

segmentData object

Specifies the segmentData for the DigitalGauge.

themes string

Specifies the themes for the Digital gauge. See Themes

Default Value

• flatlight

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({ themes: "flatlight" });
</script>

value string

Specifies the value to the DigitalGauge.

Default Value

• text

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({items: [{ value: "Welcome" }] });
</script>

width number

Specifies the width for the Digital gauge.

Default Value

• 400

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({ width: 300 }); 
</script>

Methods

destroy()

To destroy the digital gauge

Returns: void

Example

HTML

<div id="DigitalGauge1">Digital Gauge</div> 
 
<script>
$("#DigitalGauge1").ejDigitalGauge();
var graphObj = $("#DigitalGauge1").data("ejDigitalGauge");
graphObj.destroy();
</script>

exportImage(fileName, fileType)

To export Digital Gauge as Image

Name	Type	Description
HTML fileName	string	fileName for the Image
HTML fileType	string	fileType for the Image

Returns: boolean

Example

HTML

<div id="DigitalGauge">DigitalGauge1</div> 
 
<script>
$("#DigitalGauge").ejDigitalGauge();
var DigitalGaugeObj = $("#DigitalGauge").data("ejDigitalGauge");
DigitalGaugeObj.exportImage("myImage","jpeg");
</script>

getPosition(itemIndex)

Gets the location of an item that is displayed on the gauge.

Name	Type	Description
HTML itemIndex	number	Position value of an item that is displayed on the gauge.

Returns: object

Example

HTML

<div id="DigitalGauge1"></div> 
 
<script>
$("#DigitalGauge1").ejDigitalGauge();
var DigitalGaugeObj = $("#DigitalGauge1").data("ejDigitalGauge");
DigitalGaugeObj.getPosition(0); 
</script>

getValue(itemIndex)

ClientSideMethod getValue Gets the value of an item that is displayed on the gauge

Name	Type	Description
HTML itemIndex	number	Index value of an item that displayed on the gauge

Returns: object

Example

HTML

<div id="DigitalGauge1"></div> 
 
<script>
$("#DigitalGauge1").ejDigitalGauge();
var DigitalGaugeObj = $("#DigitalGauge1").data("ejDigitalGauge");
DigitalGaugeObj.getValue(0);    
</script>

refresh()

Refresh the digital gauge widget

Returns: void

Example

HTML

<div id="DigitalGauge1"></div> 
 
<script>
$("#DigitalGauge1").ejDigitalGauge();
var GaugeObj = $("#DigitalGauge1").data("ejDigitalGauge");
GaugeObj.refresh();
</script>

setPosition(itemIndex, value)

ClientSideMethod Set Position Sets the location of an item to be displayed in the gauge

Name	Type	Description
HTML itemIndex	number	Index value of the digital gauge item
HTML value	object	Location value of the digital gauge

Returns: void

Example

HTML

<div id="DigitalGauge1"></div> 
 
<script>
$("#DigitalGauge1").ejDigitalGauge();
var DigitalGaugeObj = $("#DigitalGauge1").data("ejDigitalGauge");
DigitalGaugeObj.setPosition(0,{ x:50, y:40 });  
</script>

setValue(itemIndex, value)

ClientSideMethod SetValue Sets the value of an item to be displayed in the gauge.

Name	Type	Description
HTML itemIndex	number	Index value of the digital gauge item
HTML value	string	Text value to be displayed in the gaugeS

Returns: void

Example

HTML

<div id="DigitalGauge1"></div> 
 
<script>
$("#DigitalGauge1").ejDigitalGauge();
var DigitalGaugeObj = $("#DigitalGauge1").data("ejDigitalGauge");
DigitalGaugeObj.setValue(0,"Welcome");
</script>

Events

init

Triggers when the gauge is initialized.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML items	Object	returns the all the options of the items.
HTML context	Object	returns the context element
HTML model	Object	returns the gauge model
HTML type	String	returns the name of the event

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({
   init: function (args) {}
});      
</script>

itemRendering

Triggers when the gauge item rendering.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML items	Object	returns the all the options of the items.
HTML context	Object	returns the context element
HTML model	Object	returns the gauge model
HTML type	String	returns the name of the event

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({
   itemRendering: function (args) {}
});      
</script>

load

Triggers when the gauge is start to load.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML items	Object	returns the all the options of the items.
HTML context	Object	returns the context element
HTML model	Object	returns the gauge model
HTML type	String	returns the name of the event

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({
   load: function (args) {}
});      
</script>

renderComplete

Triggers when the gauge render is completed.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML items	Object	returns the all the options of the items.
HTML context	Object	returns the context element
HTML model	Object	returns the gauge model
HTML type	String	returns the name of the event

Example

HTML

<div id="DigitalCore"></div> 
 
<script>
$("#DigitalCore").ejDigitalGauge({
   renderComplete: function (args) {}
});       
</script>

Click

Fires, on clicking the gauge.

Name	Type	Description
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the gauge model object
JS type	string	Name of the event
JS data	Object	location - X and Y co-ordinate of the points with respect to gauge area. id - ID of the target element. size - Width and height of the gauge. pageX - x-coordinate of the pointer, relative to the page pageY - y-coordinate of the pointer, relative to the page

Example

JS

//Click event for digital gauge

$("#DigitalCore").ejDigitalGauge({

    click: function (args) {
              //Do something
    }
   
});

doubleClick

Fires, on double clicking the digital gauge.

Name	Type	Description
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the digital gauge model object
JS type	string	Name of the event
JS data	Object	location - X and Y co-ordinate of the points with respect to digital gauge area. id - ID of the target element. size - Width and height of the digital gauge. pageX - x-coordinate of the pointer, relative to the page pageY - y-coordinate of the pointer, relative to the page

Example

JS

//DoubleClick event for digital gauge.

$("#DigitalCore").ejDigitalGauge({

    doubleClick: function (args) {
              //Do something
    }
   
});

rightClick

Fires, on right clicking the digital gauge.

Name	Type	Description
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the digital gauge model object
JS type	string	Name of the event
JS data	Object	location - X and Y co-ordinate of the points with respect to digital gauge area. id - ID of the target element. size - Width and height of the digital gauge. pageX - x-coordinate of the pointer, relative to the page pageY - y-coordinate of the pointer, relative to the page

Example

JS

//RightClick event for digital gauge

$("#DigitalCore").ejDigitalGauge({
    rightClick: function (args) {
              //Do something
    }
   
});