DigitalGauge

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.

  • html
  • <ej-digitalgauge id="DigitalGauge1">
    </ej-digitalgauge>
    Name Type Description
  • html
  • options
    object For setting the Digital gauge

    Example

    Requires

    • module:jQuery.js

    • module:jquery.easing.js

    • module:ej.common.all.js

    • module:excanvas.js

    Members

    frameobject

    Specifies the frame of the Digital gauge.

    Default Value

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

    Example

    frame.backgroundImageUrl string

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

    Default Value

    • null

    Example

  • html
  • <ej-digitalgauge id="DigitalGauge1" frame.backgroundImageUrl="board3.jpg">
    </ej-digitalgauge>

    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
  • <ej-digitalgauge id="DigitalGauge1" [frame.innerWidth]=1000>
    </ej-digitalgauge>

    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
  • <ej-digitalgauge id="DigitalGauge1" [frame.outerWidth]=10>
    </ej-digitalgauge>

    height number

    Specifies the height of the DigitalGauge.

    Default Value

    • 150

    Example

  • html
  • <ej-digitalgauge id="DigitalGauge1" height="200">
    </ej-digitalgauge>

    isResponsive boolean

    Specifies the resize option of the DigitalGauge.

    Default Value

    • false

    Example

  • html
  • <ej-digitalgauge id="DigitalGauge1" [isResponsive]="true">
    </ej-digitalgauge>

    enableResize boolean

    Specifies the responsiveness of the Digital gauge

    Default Value

    • false

    Example

  • html
  • <ej-digitalgauge id="DigitalGauge1" [enableResize]="true">
    </ej-digitalgauge>

    itemsarray

    Specifies the items for the DigitalGauge.

    Default Value

    • null

    Example

    items.characterSettingsobject

    Specifies the Character settings for the DigitalGauge.

    Default Value

    • null

    Example

    items.characterSettings.count number

    Specifies the CharacterCount value for the DigitalGauge.

    Default Value

    • 4

    Example

  • ts
  • this.item = [{
                characterSettings: {
                     count:5
                }
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.characterSettings.opacity number

    Specifies the opacity value for the DigitalGauge.

    Default Value

    • 1

    Example

  • ts
  • this.item = [{
                characterSettings: {
                    opacity:0.8
                }
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.characterSettings.spacing number

    Specifies the value for spacing between the characters

    Default Value

    • 2

    Example

  • ts
  • this.item = [{
                characterSettings: {
                    spacing:10
                }
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    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

  • ts
  • this.item = [{
                characterSettings: {
                    type:"sevensegment"
                }
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.enableCustomFont boolean

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

    Default Value

    • false

    Example

  • ts
  • this.item = [{            
        enableCustomFont:true      
          }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.fontobject

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

    Default Value

    • null

    Example

    items.font.fontFamily string

    Set the font family value

    Default Value

    • Arial

    Example

  • ts
  • this.item = [{
                font:{fontFamily: "Arial"}
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    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

  • ts
  • this.item = [{
                font:{fontStyle: "bold"}
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.font.size string

    Set the font size value

    Default Value

    • 11px

    Example

  • ts
  • this.item = [{
                font:{ size: "42px"}
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.positionobject

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

    Default Value

    • null

    Example

    items.position.x number

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

    Default Value

    • 0

    Example

  • ts
  • this.item = [{
                position: { x: 112 }
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.position.y number

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

    Default Value

    • 0

    Example

  • ts
  • this.item = [{
                position: { y: 52 }
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.segmentSettingsobject

    Set the segment settings for the digital gauge.

    Default Value

    • null

    Example

    items.segmentSettings.color string

    Set the color for the text segments.

    Default Value

    • null

    Example

  • ts
  • this.item = [{
                segmentSettings: {
                    color:'Green'
                },
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.segmentSettings.gradientobject

    Set the gradient for the text segments.

    Default Value

    • null

    Example

    items.segmentSettings.length number

    Set the length for the text segments.

    Default Value

    • 2

    Example

  • ts
  • this.item = [{
                segmentSettings: {
                    length:4
                }
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.segmentSettings.opacity number

    Set the opacity for the text segments.

    Default Value

    • 0

    Example

  • ts
  • this.item = [{
                segmentSettings: {
                    opacity:0.8
                }
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.segmentSettings.spacing number

    Set the spacing for the text segments.

    Default Value

    • 1

    Example

  • ts
  • this.item = [{
                segmentSettings: {
                    spacing:1
                }
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.segmentSettings.width number

    Set the width for the text segments.

    Default Value

    • 1

    Example

  • ts
  • this.item = [{
                segmentSettings: {
                    width:1
                }
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.shadowBlur number

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

    Default Value

    • 0

    Example

  • ts
  • this.item = [{
                shadowBlur:10
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.shadowColor string

    Specifies the color of the text shadow.

    Default Value

    • null

    Example

  • ts
  • this.item = [{
                shadowColor:"#FF1F2F"
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    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

  • ts
  • this.item = [{           
         shadowOffsetX:2      
           }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    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

  • ts
  • this.item = [{
                shadowOffsetY:2
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.textAlign string

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

    Default Value

    • “left”

    Example

  • ts
  • this.item = [{
                textAlign:"right"
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.textColor string

    Specifies the color of the text.

    Default Value

    • null

    Example

  • ts
  • this.item = [{
                textColor:"#FF1F2F"
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    items.value string

    Specifies the text value.

    Default Value

    • null

    Example

  • ts
  • this.item = [{
                value:"123456789"
            }];
  • html
  • <ej-digitalgauge id="DigitalGauge1" [items]="item">
    </ej-digitalgauge>

    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
  • <ej-digitalgauge id="DigitalGauge1" themes="flatdark">
    </ej-digitalgauge>

    value string

    Specifies the value to the DigitalGauge.

    Default Value

    • text

    Example

  • html
  • <ej-digitalgauge id="DigitalGauge1" value="Syncfusion">
    </ej-digitalgauge>

    width number

    Specifies the width for the Digital gauge.

    Default Value

    • 400

    Example

  • html
  • <ej-digitalgauge id="DigitalGauge1" width="500">
    </ej-digitalgauge>

    Methods

    destroy()

    To destroy the digital gauge

    Returns: void

    Example

  • ts
  • export class AppComponent {
    
    destroy(){          
           
         this.digital.widget.destroy();
         
         }
    
    // Create digitalgauge instance
    @ViewChild('gauge') digital: EJComponents<any, any>;
    
    }

    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

  • ts
  • export class AppComponent {
    
    exportImage(){
         
         this.digital.widget.exportImage("myImage","jpeg");
    
    }
    
    // Create digitalgauge instance
    @ViewChild('gauge') digital: EJComponents<any, any>;
    
    }

    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

  • ts
  • export class AppComponent {
    
    getPosition(){
         
         this.digital.widget.getPosition(0);
    
    }
    
    // Create digitalgauge instance
    @ViewChild('gauge') digital: EJComponents<any, any>;
    
    }

    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

  • ts
  • export class AppComponent {
    
    getValue(){
         
         this.digital.widget.getValue(0);
    
    }
    
    // Create digitalgauge instance
    @ViewChild('gauge') digital: EJComponents<any, any>;
    
    }

    refresh()

    Refresh the digital gauge widget

    Returns: void

    Example

  • ts
  • export class AppComponent {
    
    refresh(){   
        
             this.digital.widget.refresh();
             
             }
    
    // Create digitalgauge instance
    @ViewChild('gauge') digital: EJComponents<any, any>;
    
    }

    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

  • ts
  • export class AppComponent {
    
    setPosition(){
         
         this.digital.widget.setPosition(0,{x:10,y:10});
    
    }
    
    // Create digitalgauge instance
    @ViewChild('gauge') digital: EJComponents<any, any>;
    
    }

    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

  • ts
  • export class AppComponent {
    
    setValue(){
         
         this.digital.widget.setValue(0, "Welcome");
    
    }
    
    // Create digitalgauge instance
    @ViewChild('gauge') digital: EJComponents<any, any>;
    
    }

    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

  • ts
  • init(sender) {
        
        // Do something
        
        }
  • html
  • <ej-digitalgauge id="DigitalGauge1" (init)="init($event)">
    </ej-digitalgauge>

    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

  • ts
  • itemrendering(sender) {
        
        // Do something
        
        }
  • html
  • <ej-digitalgauge id="DigitalGauge1" (itemRendering)="itemrendering($event)">
    </ej-digitalgauge>

    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

  • ts
  • load(sender) {        
        
        // Do something      
        
          }
  • html
  • <ej-digitalgauge id="DigitalGauge1" (load)="load($event)">
          </ej-digitalgauge>

    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

  • ts
  • complete(sender) {
        
        // Do something
        
        }
  • html
  • <ej-digitalgauge id="DigitalGauge1" (renderComplete)="complete($event)">
    </ej-digitalgauge>