API Reference for ejDigitalGauge

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