DigitalGauge

11 Oct 201724 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.

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

frame`object`

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

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

Example

HTML

<ej-digitalgauge id="DigitalGauge1" [frame.outerWidth]=10>
</ej-digitalgauge>

height `number`

Specifies the height of the DigitalGauge.

Default Value

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>

items`array`

Specifies the items for the DigitalGauge.

Default Value

null

Example

items.characterSettings`object`

Specifies the Character settings for the DigitalGauge.

Default Value

null

Example

items.characterSettings.count `number`

Specifies the CharacterCount value for the DigitalGauge.

Default Value

Example

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

Example

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

Example

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

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

this.item = [{            
    enableCustomFont:true      
      }];

HTML

<ej-digitalgauge id="DigitalGauge1" [items]="item">
</ej-digitalgauge>

items.font`object`

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

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

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

this.item = [{
            font:{ size: "42px"}
        }];

HTML

<ej-digitalgauge id="DigitalGauge1" [items]="item">
</ej-digitalgauge>

items.position`object`

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

Example

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

Example

this.item = [{
            position: { y: 52 }
        }];

HTML

<ej-digitalgauge id="DigitalGauge1" [items]="item">
</ej-digitalgauge>

items.segmentSettings`object`

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

this.item = [{
            segmentSettings: {
                color:'Green'
            },
        }];

HTML

<ej-digitalgauge id="DigitalGauge1" [items]="item">
</ej-digitalgauge>

items.segmentSettings.gradient`object`

Set the gradient for the text segments.

Default Value

null

Example

items.segmentSettings.length `number`

Set the length for the text segments.

Default Value

Example

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

Example

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

Example

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

Example

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

Example

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

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

Example

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

Example

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

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

this.item = [{
            textColor:"#FF1F2F"
        }];

HTML

<ej-digitalgauge id="DigitalGauge1" [items]="item">
</ej-digitalgauge>

items.value `string`

Specifies the text value.

Default Value

null

Example

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

Example

HTML

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

Methods

destroy()

To destroy the digital gauge

Returns: void

Example

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

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

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

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

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

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

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

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

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

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

complete(sender) {
    
    // Do something
    
    }

HTML

<ej-digitalgauge id="DigitalGauge1" (renderComplete)="complete($event)">
</ej-digitalgauge>

DigitalGauge

Example

Members

frameobject

Default Value

Example

frame.backgroundImageUrl string

Default Value

Example

frame.innerWidth number

Default Value

Example

frame.outerWidth number

Default Value

Example

height number

Default Value

Example

isResponsive boolean

Default Value

Example

enableResize boolean

Default Value

Example

itemsarray

Default Value

Example

items.characterSettingsobject

Default Value

Example

items.characterSettings.count number

Default Value

Example

items.characterSettings.opacity number

Default Value

Example

items.characterSettings.spacing number

Default Value

Example

items.characterSettings.type enum

Default Value

Example

items.enableCustomFont boolean

Default Value

Example

items.fontobject

Default Value

Example

items.font.fontFamily string

Default Value

Example

items.font.fontStyle enum

Default Value

Example

items.font.size string

Default Value

Example

items.positionobject

Default Value

Example

items.position.x number

Default Value

Example

items.position.y number

Default Value

Example

items.segmentSettingsobject

Default Value

Example

items.segmentSettings.color string

Default Value

Example

items.segmentSettings.gradientobject

Default Value

Example

items.segmentSettings.length number

Default Value

Example

items.segmentSettings.opacity number

Default Value

frame`object`

frame.backgroundImageUrl `string`

frame.innerWidth `number`

frame.outerWidth `number`

height `number`

isResponsive `boolean`

enableResize `boolean`

items`array`

items.characterSettings`object`

items.characterSettings.count `number`

items.characterSettings.opacity `number`

items.characterSettings.spacing `number`

items.characterSettings.type `enum`

items.enableCustomFont `boolean`

items.font`object`

items.font.fontFamily `string`

items.font.fontStyle `enum`

items.font.size `string`

items.position`object`

items.position.x `number`

items.position.y `number`

items.segmentSettings`object`

items.segmentSettings.color `string`

items.segmentSettings.gradient`object`

items.segmentSettings.length `number`

items.segmentSettings.opacity `number`

items.segmentSettings.spacing `number`

items.segmentSettings.width `number`

items.shadowBlur `number`

items.shadowColor `string`

items.shadowOffsetX `number`

items.shadowOffsetY `number`

items.textAlign `string`

items.textColor `string`

items.value `string`

matrixSegmentData `object`

segmentData `object`

themes `string`

value `string`

width `number`