ejCircularGauge

7 Aug 201824 minutes to read

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

$(element).ejCircularGauge(options)

Name	Type	Description
HTML options	object	For setting the Circular gauge

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$(function () {
        $("#CoreCircularGauge").ejCircularGauge({
        });
    });
</script>

Requires

• module:jQuery

• module:ej.common.all

• module:excanvas.js

Members

animationSpeed number

Specifies animationSpeed of circular gauge

Default Value

• 500

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
        $("#CoreCircularGauge").ejCircularGauge({ animationSpeed: 500,scales: [{ pointers: [{ value: 50 }] }] });
</script>

backgroundColor string

Specifies the background color of circular gauge.

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({  backgroundColor : "#F234F4" });
</script>

distanceFromCorner number

Specify distanceFromCorner value of circular gauge

Default Value

• center

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({  gaugePosition:"center", distanceFromCorner :25});
</script>

rangeZOrder enum

Specify range Z-order placement of circular gauge.

Name	Type	Description
Rear	string	Place the ranges above the ticks of the gauge
Front	string	Place the ticks above the ranges of the gauge

Default Value

• Rear

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>  
        $("#CoreCircularGauge").ejCircularGauge({rangeZOrder:"rear"});
</script>

enableAnimation boolean

Specify animate value of circular gauge

Default Value

• true

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                   
$("#CoreCircularGauge").ejCircularGauge({ enableAnimation: true,scales: [{ pointers: [{ value: 50 }] }] });
</script>

enableGroupSeparator boolean

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

Default Value

• false

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({  enableGroupSeparator : true });
</script>

enableResize boolean

Controls whether circular gauge has to be responsive while resizing.

Default Value

• false

Example

HTML

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

exportSettings object

This provides options for customizing export settings

exportSettings.filename string

Specifies the downloading filename

Default Value

• “CircularGauge”

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({  
                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="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({  
                exportSettings: { 
                     type : "jpg" 
                } 
        });
</script>

exportSettings.action string

Specifies the name of the action URL

Default Value

• ””

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({  
                exportSettings: { 
                    action : "http://js.syncfusion.com/ExportingServices/api/JSCircularGaugeExport/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="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({  
                exportSettings: { mode : "server"}
        });
</script>

frame object

Specify the frame of circular gauge

Default Value

• Object

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
$("#CoreCircularGauge").ejCircularGauge({ frame:{frameType:ej.datavisualization.CircularGauge.Frame.FullCircle, backgroundImageUrl:"", halfCircleFrameStartAngle:180, halfCircleFrameEndAngle:360} });
</script>

frame.backgroundImageUrl string

Specify the URL of the frame background image for circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({  frame:{backgroundImageUrl : "Sun.jpg" }});
</script>

frame.frameType enum

Specifies the frameType of circular gauge. See Frame

Name	Type	Description
FullCircle	string	Specify the full circle frame
HalfCircle	string	Specify the half circle frame

Default Value

• FullCircle

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({  frame:{frameType : "halfcircle"} });
</script>

frame.halfCircleFrameEndAngle number

Specifies the end angle for the half circular frame.

Default Value

• 360

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({ frame:{frameType : "halfCircle",halfCircleFrameEndAngle: 270}});
</script>

frame.halfCircleFrameStartAngle number

Specifies the start angle for the half circular frame.

Default Value

• 180

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({ frame:{frameType : "halfcircle",halfCircleFrameStartAngle: 0} });
</script>

gaugePosition enum

Specify gaugePosition value of circular gauge See GaugePosition

Name	Type	Description
TopLeft	string	The gauge will be placed TopLeft corner in container
TopRight	string	The gauge will be placed TopRight corner in container
TopCenter	string	The gauge will be placed in TopCenter
MiddleLeft	string	The gauge will be placed in MiddleLeft
MiddleRight	string	The gauge will be placed in MiddleRight
Center	string	The gauge will be placed center of the container
BottomLeft	string	The gauge will be placed BottomLeft corner in container
BottomRight	string	he gauge will be placed in BottomRight corner in container
BottomCenter	string	he gauge will be placed in BottomCenter

Default Value

• center

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({  gaugePosition:"center" });
</script>

height number

Specifies the height of circular gauge.

Default Value

• 360

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({ height: 400 });
</script>

interiorGradient object

Specifies the interiorGradient of circular gauge.

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({ interiorGradient: { colorInfo:[{colorStop : 0, color:"#FFFFFF"},{colorStop : 1, color:"#AAAAAA"}] } }); 
</script>

isRadialGradient boolean

Specify isRadialGradient value of circular gauge

Default Value

• false

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
        $("#CoreCircularGauge").ejCircularGauge({  isRadialGradient : true });
</script>

isResponsive boolean

Specify isResponsive value of circular gauge

Default Value

• false

Example

HTML

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

locale string

Name of the culture based on which circular gauge should be localized.

Default Value

• “en-US”

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({  locale : "en-US" });
</script>

maximum number

Specifies the maximum value of circular gauge.

Default Value

• 100

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({ maximum: 120 });
</script>

minimum number

Specifies the minimum value of circular gauge.

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({ minimum: 10 });
</script>

outerCustomLabelPosition enum

Specify outerCustomLabelPosition value of circular gauge See OuterCustomLabelPosition

Name	Type	Description
Top	string	Sets the label position as top
Bottom	string	Sets the label position as Bottom
Right	string	Sets the label position as Right
Left	string	Sets the label position as Left

Default Value

• bottom

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({  outerCustomLabelPosition:"top" });
</script>

radius number

Specifies the radius of circular gauge.

Default Value

• 180

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({ radius: 100 });
</script>

readOnly boolean

Specify readonly value of circular gauge

Default Value

• true

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({  readOnly : false });
</script>

scales array

Specify the pointers, ticks, labels, indicators, ranges of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({ scales: [{showScaleBar: true, size: 6, border:{width: 1.5} }] });
</script>

scales.backgroundColor string

Specify backgroundColor for the scale of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ showScaleBar: true, backgroundColor: "#1BA1E2" }] });
</script>

scales.border object

Specify border for scales of circular gauge

Default Value

• Object

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ border:{color:null, width:1.5 }}] });
</script>

scales.border.color string

Specify border color for scales of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showScaleBar: true,  border:[{color: "#1BA1E2" }]}] });
</script>

scales.border.width number

Specify border width of circular gauge

Default Value

• 1.5

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ showScaleBar: true, border:{width: 1.5} }] });
</script>

scales.direction enum

Specify scale direction of circular gauge. See Directions

Name	Type	Description
Clockwise	string	Specify the clockwise direction
CounterClockwise	string	Specify the counterclockwise direction

Default Value

• Clockwise

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ direction: "counterclockwise" }] });
</script>

scales.customLabels Array

Specify the custom labels for the scales.

Default Value

• Array

Example

HTML

$("#CoreCircularGauge").ejCircularGauge({ 
  
  scales: [{
    customLabels:[]
  }]                      

});

scales.customLabels.value string

Value of the custom labels.

Default Value

• ””

Example

HTML

< $("#CoreCircularGauge").ejCircularGauge({ 
  
  scales: [{
    customLabels:[{value:'Sports'}]
  }]                      

});

scales.customLabels.color string

Color of the custom labels.

Default Value

• ””

Example

HTML

<$("#CoreCircularGauge").ejCircularGauge({ 
  
  scales: [{
    customLabels:[{color:"#333333"}]
  }]                      

});

scales.customLabels.position object

Specify position of custom labels

Default Value

• Object

Example

HTML

<$("#CoreCircularGauge").ejCircularGauge({ 
  
   scales: [{
    customLabels:[{position:{x:10}}]
    }]                      

});

scales.customLabels.position.x number

Specify x-axis position of label

Default Value

• 0

Example

HTML

<$("#CoreCircularGauge").ejCircularGauge({ 
  
   scales: [{
    customLabels:[{position:{x:10}}]
    }]                      

});

scales.customLabels.position.y number

Specify y-axis position of labels.

Default Value

• 0

Example

HTML

<$("#CoreCircularGauge").ejCircularGauge({ 
  
   scales: [{
    customLabels:[{position:{y:10}}]
    }]                      

});

scales.customLabels.textAngle number

Specify angle for the rotation of the custom labels in degrees.

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script> 
                         
<$("#CoreCircularGauge").ejCircularGauge({ 
   scales: [{
    customLabels:[{textAngle:90}]
    }]                      

}); 

</script>

scales.customLabels.font object

Specify font for custom labels

Default Value

• Object

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ customLabels: [{ font: { size: "12px", fontFamily: "Segou", fontStyle: "Bold" } }] }] });
</script>

scales.customLabels.font.fontFamily string

Specify font fontFamily for custom labels.

Default Value

• “Arial”

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ customLabels: [{ font: { fontFamily: "Arial" } }] }] });
</script>

scales.customLabels.font.fontStyle string

Specify font Style for custom labels.

Default Value

• “Bold”

Example

HTML

$("#CoreCircularGauge").ejCircularGauge({ 
    scales: [{ customLabels: [{ font: { fontStyle: "Bold" } }] }] 
    });

scales.customLabels.font.size string

Specify font size for custom labels.

Default Value

• “12px”

Example

HTML

$("#CoreCircularGauge").ejCircularGauge({ 
    scales: [{ customLabels: [{ font: { size: "12px" } }] }] 
    });

scales.customLabels.positionType enum

Specifies the position of the custom labels. See CustomLabelPositionType

Name	Type	Description
Inner	string	Sets the Custom label position as Inner
Outer	string	Sets the Custom label position as Outer

Default Value

• inner

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                         
<$("#CoreCircularGauge").ejCircularGauge({ 
  
   scales: [{
    customLabels:[{positionType:"outer"}]
    }]                      

}); 

</script>

scales.indicators Array

Specify representing state of circular gauge

Default Value

• Array

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showIndicators:true,indicators: [{
  height: 30,width: 10,type: "circle",value: 0,position: { x: 185, y: 300 },
  stateRanges: [{ endValue: 70, startValue: 0, backgroundColor: "#5DF243", borderColor: "#5DF243", text: "", textColor: "#870505" },
  { endValue: 200, startValue: 70, backgroundColor: "#145608", borderColor: "#145608", text: "", textColor: "#870505" }]}]}]});
</script>

scales.indicators.height number

Specify indicator height of circular gauge

Default Value

• 15

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showIndicators:true,indicators: [{
  height: 30,type: "circle",value: 0,position: { x: 185, y: 300 },
  stateRanges: [{ endValue: 70, startValue: 0, backgroundColor: "#5DF243" },
  { endValue: 200, startValue: 70, backgroundColor: "#145608"}]}]}]});
</script>

scales.indicators.imageUrl string

Specify imageUrl of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showIndicators:true,indicators: [{
  width: 30,type: "image",value: 0,imageUrl:"Sun.jpeg",position: { x: 185, y: 300 },
  stateRanges: [{ endValue: 70, startValue: 0, backgroundColor: "#5DF243" },
  { endValue: 200, startValue: 70, backgroundColor: "#145608"}]}]}]});
</script>

scales.indicators.position object

Specify position of circular gauge

Default Value

• Object

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showIndicators:true,indicators: [{
  width: 30,type: "circle",value: 0,position: { x: 185, y: 150 },
  stateRanges: [{ endValue: 70, startValue: 0, backgroundColor: "#5DF243" },
  { endValue: 200, startValue: 70, backgroundColor: "#145608"}]}]}]});
</script>

scales.indicators.position.x number

Specify x-axis of position of circular gauge

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showIndicators:true,indicators: [{
  width: 30,type: "circle",value: 0,position: { x: 185,y:0 },
  stateRanges: [{ endValue: 70, startValue: 0, backgroundColor: "#5DF243" },
  { endValue: 200, startValue: 70, backgroundColor: "#145608"}]}]}]});
</script>

scales.indicators.position.y number

Specify y-axis of position of circular gauge

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showIndicators:true,indicators: [{
  width: 30,type: "circle",value: 0,position: { x:0,y: 185 },
  stateRanges: [{ endValue: 70, startValue: 0, backgroundColor: "#5DF243" },
  { endValue: 200, startValue: 70, backgroundColor: "#145608"}]}]}]});
</script>

scales.indicators.stateRanges Array

Specify the various states of circular gauge

Default Value

• Array

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showIndicators:true,indicators: [{
  width: 30,type: "circle",value: 0,position: { x: 185, y:300 },
  stateRanges: [{ endValue: 70, startValue: 0, backgroundColor: "#5DF243" },
  { endValue: 200, startValue: 70, backgroundColor: "#145608"}]}]}]});
</script>

scales.indicators.stateRanges.backgroundColor string

Specify backgroundColor for indicator of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showIndicators:true,indicators: [{
  width: 30,type: "circle",value: 0,position: { x: 185, y:300 },
  stateRanges: [{ endValue: 70, startValue: 0, backgroundColor: "Red" },
  { endValue: 200, startValue: 70, backgroundColor: "Yellow"}]}]}]});
</script>

scales.indicators.stateRanges.borderColor string

Specify borderColor for indicator of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showIndicators:true,indicators: [{
  width: 30,type: "circle",value: 0,position: { x: 185, y:300 },
  stateRanges: [{ endValue: 70, startValue: 0, backgroundColor: "#5DF243",borderColor:"Red" },
  { endValue: 200, startValue: 70, backgroundColor: "#145608", borderColor:"yellow"}]}]}]});
</script>

scales.indicators.stateRanges.endValue number

Specify end value for each specified state of circular gauge

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showIndicators:true,indicators: [{
  width: 30,type: "circle",value: 0,position: { x: 185, y:300 },
  stateRanges: [{ endValue: 70, startValue: 0, backgroundColor: "#5DF243" },
  { endValue: 200, startValue: 70, backgroundColor: "#145608"}]}]}]});
</script>

scales.indicators.stateRanges.font object

Specify value of the font as the indicator when the indicator style is set with the value “text” of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
$("#CoreCircularGauge").ejCircularGauge({
scales: [{showIndicators: true, indicators: [{
width: 30, type: "text", value: 0, position: { x: 185, y: 300 },
stateRanges: [{ endValue: 70, startValue: 0, text: "staterange1" },
{ endValue: 200, startValue: 70, text: "staterange1", font: { size: "11px", fontFamily: "Arial", fontStyle: "Bold" } }]}]}]});
</script>

scales.indicators.stateRanges.startValue number

Specify start value for each specified state of circular gauge

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showIndicators:true,indicators: [{
  width: 30,type: "circle",value: 0,position: { x: 185, y:300 },
  stateRanges: [{ endValue: 70, startValue: 0, backgroundColor: "#5DF243" },
  { endValue: 200, startValue: 70, backgroundColor: "#145608"}]}]}]});
</script>

scales.indicators.stateRanges.text string

Specify value of the text as the indicator when the indicator style is set with the value “text” of circular gauge

Default Value

• ””

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>  
$("#CoreCircularGauge").ejCircularGauge({
scales: [{showIndicators: true, indicators: [{
width: 30, type: "text", value: 0, position: { x: 185, y: 300 },
stateRanges: [{ endValue: 70, startValue: 0, text: "staterange1" },
{ endValue: 200, startValue: 70, text: "staterange1" }]}]}]});
</script>

scales.indicators.stateRanges.textColor string

Specify value of the textColor as the indicator when the indicator style is set with the value “text” of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({
scales: [{showIndicators: true, indicators: [{
width: 30, type: "text", value: 0, position: { x: 185, y: 300 },
stateRanges: [{ endValue: 70, startValue: 0, text: "staterange1", textColor: "Yellow" },
{ endValue: 200, startValue: 70, text: "staterange1", textColor: "Yellow" }]}]}]});
</script>

scales.indicators.type enum

Specify indicator style of circular gauge. See IndicatorType

Name	Type	Description
Rectangle	string	Style of the indicator will be rectangle
Circle	string	Style of the indicator will be circle
Text	string	Style of the indicator will be text
RoundedRectangle	string	Style of the indicator will be roundedrectangle
Image	string	Style of the indicator will be image
Triangle	string	Style of the indicator will be triangle
Diamond	string	Style of the indicator will be diamond
Trapezoid	string	Style of the indicator will be trapezoid
Pentagon	string	Style of the indicator will be pentagon
Wedge	string	Style of the indicator will be wedge
Star	string	Style of the indicator will be star
HorizontalLine	string	Style of the indicator will be horizontalLine
Verticalline	string	Style of the indicator will be verticalline
Cross	string	Style of the indicator will be cross
Uparrow	string	Style of the indicator will be uparrow
Downarrow	string	Style of the indicator will be downarrow
Leftarrow	string	Style of the indicator will be leftarrow
Rightarrow	string	Style of the indicator will be rightarrow
InvertedTriangle	string	Style of the indicator will be invertedtriangle

Default Value

• Circle

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showIndicators:true,indicators: [{
  width: 30,type: "circle",value: 0,position: { x: 185, y: 300 },
  stateRanges: [{ endValue: 70, startValue: 0, backgroundColor: "#5DF243" },
  { endValue: 200, startValue: 70, backgroundColor: "#145608"}]}]}]});
</script>

scales.indicators.width number

Specify indicator width of circular gauge

Default Value

• 15

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showIndicators:true,indicators: [{
  width: 30,type: "circle",value: 0,position: { x: 185, y: 300 },
  stateRanges: [{ endValue: 70, startValue: 0, backgroundColor: "#5DF243" },
  { endValue: 200, startValue: 70, backgroundColor: "#145608"}]}]}]});
</script>

scales.labels Array

Specify the text values displayed in a meaningful manner alongside the ticks of circular gauge

Default Value

• Array

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels: [{ angle: 10, opacity: 0.4 }] }] });
</script>

scales.labels.angle number

Specify the angle for the labels of circular gauge

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels: [{ angle: 10 }] }] });
</script>

scales.labels.autoAngle boolean

Specify labels autoAngle value of circular gauge

Default Value

• false

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels:[{autoAngle: true}] }] });
</script>

scales.labels.color string

Specify label color of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels: [{ color: "Red" }] }] });
</script>

scales.labels.distanceFromScale number

Specify distanceFromScale value for labels of circular gauge

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels: [{ distanceFromScales: 10 }] }] });
</script>

scales.labels.font object

Specify font for labels of circular gauge

Default Value

• Object

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels: [{ font: { size: "12px", fontFamily: "Segou", fontStyle: "Bold" } }] }] });
</script>

scales.labels.font.fontFamily string

Specify font fontFamily for labels of circular gauge

Default Value

• “Arial”

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels: [{ font: { fontFamily: "Arial" } }] }] });
</script>

scales.labels.font.fontStyle string

Specify font Style for labels of circular gauge

Default Value

• “Bold”

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels: [{ font: { fontStyle: "Bold" } }] }] });
</script>

scales.labels.font.size string

Specify font size for labels of circular gauge

Default Value

• “11px”

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels: [{ font: { size: "12px" } }] }] });
</script>

scales.labels.includeFirstValue boolean

Specify includeFirstValue of circular gauge

Default Value

• true

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels: [{ includeFirstValue: false }] }] });
</script>

scales.labels.opacity number

Specify opacity value for labels of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels: [{ opacity: 0.4 }] }] });
</script>

scales.labels.placement enum

Specify label placement of circular gauge. See LabelPlacement

</tr>

Name	Type	Description
Near	string	Specify the label placement as near
Far	string	Specify the label placement as far
Center	string	Specify the label placement as center

Default Value

• Near

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels: [{ placement: "near" }] }] });
</script>

scales.labels.type enum

Specify label Style of circular gauge. See LabelType

Name	Type	Description
Major	string	Label style will be major
Minor	string	Label style will be minor

Default Value

• Major

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels: [{ type: "major" }] }] });
</script>

scales.labels.unitText string

Specify unitText of circular gauge

Default Value

• ””

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels: [{ unitText: "kmph" }] }] });
</script>

scales.labels.unitTextPosition enum

Specify unitTextPosition of circular gauge. See UnitTextPosition

Name	Type	Description
Back	string	The unit text will be placed back of the gauge
Front	string	The unit text will be placed front of the gauge

Default Value

• Back

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ labels: [{ unitText: "kmph",unitTextPosition: "front" }] }] });
</script>

scales.majorIntervalValue number

Specify majorIntervalValue of circular gauge

Default Value

• 10

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ majorIntervalValue: 5 }] });
</script>

scales.maximum number

Specify maximum scale value of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ maximum: 200 }] });
</script>

scales.minimum number

Specify minimum scale value of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ minimum: 20 }] });
</script>

scales.minorIntervalValue number

Specify minorIntervalValue of circular gauge

Default Value

• 2

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ minorIntervalValue: 1 }] });
</script>

scales.opacity number

Specify opacity value of circular gauge

Default Value

• 1

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showScaleBar: true, opacity:0.5 }] });
</script>

scales.pointerCap object

Specify pointer cap of circular gauge

Default Value

• Object

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointerCap:{radius: 7, borderWidth:3, interiorGradient:null, borderColor:null } }] });
</script>

scales.pointerCap.backgroundColor string

Specify cap backgroundColor of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointerCap: {backgroundColor: "Green"} }] });
</script>

scales.pointerCap.borderColor string

Specify cap borderColor of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointerCap: {borderColor: "Brown" }}] });
</script>

scales.pointerCap.borderWidth number

Specify pointerCap borderWidth value of circular gauge

Default Value

• 3

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointerCap:{borderWidth: 8 } }] });
</script>

scales.pointerCap.interiorGradient object

Specify cap interiorGradient value of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointerCap:{interiorGradient: {colorInfo:[{colorStop : 0, color:"#FFFFFF"},{colorStop : 1, color:"#AAAAAA"}] }}}] });
</script>

scales.pointerCap.radius number

Specify pointerCap Radius value of circular gauge

Default Value

• 7

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointerCap:{radius: 10} }] });
</script>

scales.pointers Array

Specify pointers value of circular gauge

Default Value

• Array

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ distanceFromScale: 0, showBackNeedle: false }] }] });
</script>

scales.pointers.backgroundColor string

Specify backgroundColor for the pointer of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ backgroundColor: "#1A1A1A" }] }] });
</script>

scales.pointers.backNeedleLength number

Specify backNeedleLength of circular gauge

Default Value

• 10

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ showBackNeedle: true, backNeedleLength: 10 }] }] });
</script>

scales.pointers.border object

Specify the border for pointers of circular gauge

Default Value

• Object

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers:[{border:{color:null, width:1.5 }}]}] });
</script>

scales.pointers.border.color string

Specify border color for pointer of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ border:{color: "#1A1A1A"} }] }] });
</script>

scales.pointers.border.width number

Specify border width for pointers of circular gauge

Default Value

• 1.5

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ border:{width: 1.5 }}] }] });
</script>

scales.pointers.distanceFromScale number

Specify distanceFromScale value for pointers of circular gauge

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ distanceFromScale: 10 }] }] });
</script>

scales.pointers.gradients object

Specify pointer gradients of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ gradients: {colorInfo:[{colorStop : 0, color:"#FFFFFF"},{colorStop : 1, color:"#AAAAAA"}] }}] }] });
</script>

scales.pointers.imageUrl string

Specify pointer image of circular gauge.It is applicable for both marker as well as needle type pointers.

Default Value

• NULL

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ type: "marker", markerType: "image", imageUrl: "football.png" }] }] });
</script>

scales.pointers.length number

Specify pointer length of circular gauge

Default Value

• 150

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ length: 50 }] }] });
</script>

scales.pointers.markerType enum

Specify marker Style value of circular gauge. See MarkerType

Name	Type	Description
Rectangle	string	Marker style of circular gauge will be rectangle
Circle	string	Marker style of circular gauge will be circle
Triangle	string	Marker style of circular gauge will be triangle
Ellipse	string	Marker style of circular gauge will be ellipse
Diamond	string	Marker style of circular gauge will be diamond
Pentagon	string	Marker style of circular gauge will be pentagon
Slider	string	Marker style of circular gauge will be slider
Pointer	string	Marker style of circular gauge will be pointer
Wedge	string	Marker style of circular gauge will be wedge
Trapezoid	string	Marker style of circular gauge will be trapezoid
RoundedRectangle	string	Marker style of circular gauge will be rounded rectangle
Image	string	Marker style of circular gauge will be image

Default Value

• Rectangle

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ type: "marker", markerType: "rectangle" }] }] });
</script>

scales.pointers.needleType enum

Specify needle Style value of circular gauge. See NeedleType

Name	Type	Description
Triangle	string	Needle style of circular gauge will be triangle
Rectangle	string	Needle style of circular gauge will be rectangle
Arrow	string	Needle style of circular gauge will be arrow
Image	string	Needle style of circular gauge will be image
Trapezoid	string	Needle style of circular gauge will be trapezoid

Default Value

• Triangle

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ needleType: "triangle" }] }] });
</script>

scales.pointers.opacity number

Specify opacity value for pointer of circular gauge

Default Value

• 1

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ opacity: 0.3 }] }] });
</script>

scales.pointers.radius number

Specify radius value for pointer of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ radius: 10 }] }] });
</script>

scales.pointers.placement enum

Specify pointer Placement value of circular gauge. See PointerPlacement

Default Value

• Near

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ placement: "far" }] }] });
</script>

scales.pointers.pointerValueText object

Specify pointer value text of circular gauge.

Default Value

• Object

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ type: "marker", markerType: "rectangle", pointerValueText:{ showValue: false, distance: 20, font: { size: "11px", fontFamily: "Arial", fontStyle: "Bold" }, color: "#8c8c8c", opacity: 1, autoAngle: false, angle: 0, } }] }] });
</script>

scales.pointers.pointerValueText.angle number

Specify pointer text angle of circular gauge.

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ type: "marker", markerType: "rectangle", pointerValueText:{ showValue: true, distance: 20, font: { size: "11px", fontFamily: "Arial", fontStyle: "Bold" }, color: "Red", opacity: 0.5, autoAngle: false, angle: 30, } }] }] });
</script>

scales.pointers.pointerValueText.autoAngle boolean

Specify pointer text auto angle of circular gauge.

Default Value

• false

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ type: "marker", markerType: "rectangle", pointerValueText:{ showValue: true, distance: 20, font: { size: "11px", fontFamily: "Arial", fontStyle: "Bold" }, color: "Red", opacity: 0.5, autoAngle: true, angle: 0, } }] }] });
</script>

scales.pointers.pointerValueText.color string

Specify pointer value text color of circular gauge.

Default Value

• #8c8c8c

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ type: "marker", markerType: "rectangle", pointerValueText:{ showValue: true, distance: 20, font: { size: "11px", fontFamily: "Arial", fontStyle: "Bold" }, color: "Red", opacity: 1, autoAngle: false, angle: 0, } }] }] });
</script>

scales.pointers.pointerValueText.distance number

Specify pointer value text distance from pointer of circular gauge.

Default Value

• 20

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ type: "marker", markerType: "rectangle", pointerValueText:{ showValue: true, distance: 30, font: { size: "11px", fontFamily: "Arial", fontStyle: "Bold" }, color: "#8c8c8c", opacity: 1, autoAngle: false, angle: 0, } }] }] });
</script>

scales.pointers.pointerValueText.font object

Specify pointer value text font option of circular gauge.

Default Value

• object

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ type: "marker", markerType: "rectangle", pointerValueText:{ showValue: true, distance: 30, font: { size: "11px", fontFamily: "Arial", fontStyle: "Bold" }, color: "#8c8c8c", opacity: 1, autoAngle: false, angle: 0, } }] }] });
</script>

scales.pointers.pointerValueText.font.fontFamily string

Specify pointer value text font family of circular gauge.

Default Value

• Arial

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ type: "marker", markerType: "rectangle", pointerValueText:{ showValue: true, distance: 30, font: { size: "12px", fontFamily: "Seogo UI", fontStyle: "Bold" }, color: "#8c8c8c", opacity: 1, autoAngle: false, angle: 0, } }] }] });
</script>

scales.pointers.pointerValueText.font.fontStyle string

Specify pointer value text font style of circular gauge.

Default Value

• Bold

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ type: "marker", markerType: "rectangle", pointerValueText:{ showValue: true, distance: 30, font: { size: "12px", fontFamily: "Seogo UI", fontStyle: "Normal" }, color: "#8c8c8c", opacity: 1, autoAngle: false, angle: 0, } }] }] });
</script>

scales.pointers.pointerValueText.font.size string

Specify pointer value text size of circular gauge.

Default Value

• 11px

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ type: "marker", markerType: "rectangle", pointerValueText:{ showValue: true, distance: 30, font: { size: "12px", fontFamily: "Arial", fontStyle: "Bold" }, color: "#8c8c8c", opacity: 1, autoAngle: false, angle: 0, } }] }] });
</script>

scales.pointers.pointerValueText.opacity number

Specify pointer value text opacity of circular gauge.

Default Value

• 1

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ type: "marker", markerType: "rectangle", pointerValueText:{ showValue: true, distance: 20, font: { size: "11px", fontFamily: "Arial", fontStyle: "Bold" }, color: "Red", opacity: 0.5, autoAngle: false, angle: 0, } }] }] });
</script>

scales.pointers.pointerValueText.showValue boolean

enable pointer value text visibility of circular gauge.

Default Value

• false

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ type: "marker", markerType: "rectangle", pointerValueText:{ showValue: true, distance: 20, font: { size: "11px", fontFamily: "Arial", fontStyle: "Bold" }, color: "#8c8c8c", opacity: 1, autoAngle: false, angle: 0, } }] }] });
</script>

scales.pointers.showBackNeedle boolean

Specify showBackNeedle value of circular gauge

Default Value

• false

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ showBackNeedle: true, backNeedleLength: 10 }] }] });
</script>

scales.pointers.type enum

Specify pointer type value of circular gauge. See PointerType

Name	Type	Description
Needle	string	Specify the pointer type as needle
Marker	string	Specify the pointer type as marker

Default Value

• Needle

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ type: "marker" }] }] });
</script>

scales.pointers.value number

Specify value of the pointer of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ value: 50 }] }] });
</script>

scales.pointers.width number

Specify pointer width of circular gauge

Default Value

• 7

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ width: 7 }] }] });
</script>

scales.radius number

Specify scale radius of circular gauge

Default Value

• 170

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ showScaleBar: true, radius: 100 }] });
</script>

scales.ranges Array

Specify ranges value of circular gauge

Default Value

• Array

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showRanges:true [{ ranges: [{ distanceFromScale: 25, size: 5}] }] }]});
</script>

scales.ranges.backgroundColor string

Specify backgroundColor for the ranges of circular gauge

Default Value

• “#32b3c6”

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showRanges:true , ranges: [{ startValue: 10, endValue: 100,startWidth: 10,endWidth: 10,backgroundColor: "Red" }]  }]});
</script>

scales.ranges.legendText string

Specify text for the ranges of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showRanges:true , ranges: [{ legendText:"high", startValue: 10, endValue: 100,startWidth: 10,endWidth: 10,backgroundColor: "Red" }]  }]});
</script>

scales.ranges.border object

Specify border for ranges of circular gauge

Default Value

• Object

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ ranges:[{border:{color:null, width:1.5 }}]}] });
</script>

scales.ranges.border.color string

Specify border color for ranges of circular gauge

Default Value

• “#32b3c6”

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showRanges:true , ranges: [{ startValue: 10, endValue: 100,startWidth: 10,endWidth: 10,border:{color: "#32b3c6"} }] }] });
</script>

scales.ranges.border.width number

Specify border width for ranges of circular gauge

Default Value

• 1.5

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showRanges:true , ranges: [{ startValue: 10, endValue: 100,startWidth: 10,endWidth: 10,distanceFromScale: -25,border:{width: 1.5} }] }] });
</script>

scales.ranges.distanceFromScale number

Specify distanceFromScale value for ranges of circular gauge

Default Value

• 25

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                          
$("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
</script>

scales.ranges.endValue number

Specify endValue for ranges of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showRanges:true, ranges: [{ startValue: 10, endValue: 100,distanceFromScale: -25 }] }]});
</script>

scales.ranges.endWidth number

Specify endWidth for ranges of circular gauge

Default Value

• 10

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
</script>

scales.ranges.gradients object

Specify range gradients of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showRanges:true , ranges: [{startValue: 10, endValue: 100, gradients: { colorInfo:[{ colorStop : 0, color:"#FFFFFF"},{colorStop : 1, color:"#AAAAAA"}] }}] }]});
</script>

scales.ranges.opacity number

Specify opacity value for ranges of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{showRanges:true , ranges: [{ startValue: 10, endValue: 100,startWidth: 10,endWidth: 10,distanceFromScale: -25,opacity: 0.5 }] }] });
</script>

scales.ranges.placement enum

Specify placement of circular gauge. See RangePlacement

Default Value

• Near

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>  
        $("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70,placement: "center"}]}]});
</script>

scales.ranges.size number

Specify size of the range value of circular gauge

Default Value

• 5

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70,size:5}]}]});
</script>

scales.ranges.startValue number

Specify startValue for ranges of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
</script>

scales.ranges.startWidth number

Specify startWidth of circular gauge

Default Value

• [Array.number] scale.ranges.startWidth = 10

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
$("#CoreCircularGauge").ejCircularGauge({ scales: [{showRanges:true , ranges: [{ startValue: 10, endValue: 100,startWidth: 10,distanceFromScale: -25 }] }]});
</script>

scales.shadowOffset number

Specify shadowOffset value of circular gauge

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ shadowOffset: 1}] });
</script>

scales.showIndicators boolean

Specify showIndicators of circular gauge

Default Value

• false

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ showIndicators: false }] });
</script>

scales.showLabels boolean

Specify showLabels of circular gauge

Default Value

• true

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ showLabels: true }] });
</script>

scales.showPointers boolean

Specify showPointers of circular gauge

Default Value

• true

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ showPointers: true }] });
</script>

scales.showRanges boolean

Specify showRanges of circular gauge

Default Value

• false

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ showRanges: false }] });
</script>

scales.showScaleBar boolean

Specify showScaleBar of circular gauge

Default Value

• false

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ showScaleBar: true }] });
</script>

scales.showTicks boolean

Specify showTicks of circular gauge

Default Value

• true

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ showTicks: true }] });
</script>

scales.size number

Specify scaleBar size of circular gauge

Default Value

• 6

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ showScaleBar: true, size: 6 }] });
</script>

scales.startAngle number

Specify startAngle of circular gauge

Default Value

• 115

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ startAngle: 90 }] });
</script>

scales.subGauges Array

Specify subGauge of circular gauge

Default Value

• Array

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<div id="subGauge1">
</div> 
 
<script>  
$("#subGauge1").ejCircularGauge({backgroundColor: "#f5b43f",scales: [{radius: 150}]});
$("#CoreCircularGauge").ejCircularGauge({height: 500,width: 500,scales: [{radius: 250,subGauges: [{controlID: "subGauge1",height: 200,width: 200,position: { x: 200, y: 150 }}]}]});
</script>

scales.subGauges.height number

Specify subGauge Height of circular gauge

Default Value

• 150

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<div id="subGauge1">
</div> 
 
<script>  
$("#subGauge1").ejCircularGauge({backgroundColor: "#f5b43f",scales: [{radius: 150}]});
$("#CoreCircularGauge").ejCircularGauge({height: 500,width: 500,scales: [{radius: 250,subGauges: [{controlID: "subGauge1",height: 400,width: 200,position: { x: 200, y: 100 }}]}]});
</script>

scales.subGauges.position object

Specify position for sub-gauge of circular gauge

Default Value

• Object

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<div id="subGauge1">
</div> 
 
<script>  
$("#subGauge1").ejCircularGauge({backgroundColor: "#f5b43f",scales: [{radius: 150}]});
$("#CoreCircularGauge").ejCircularGauge({height: 500,width: 500,scales: [{radius: 250,subGauges: [{controlID: "subGauge1",height: 200,width: 200,position: { x: 200, y: 150 }}]}]});
</script>

scales.subGauges.position.x number

Specify x-axis position for sub-gauge of circular gauge

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<div id="subGauge1">
</div> 
 
<script>  
$("#subGauge1").ejCircularGauge({backgroundColor: "#f5b43f",scales: [{radius: 150}]});
$("#CoreCircularGauge").ejCircularGauge({height: 500,width: 500,scales: [{radius: 250,subGauges: [{controlID: "subGauge1",height: 200,width: 200,position: { x: 200, y: 0 }}]}]});
</script>

scales.subGauges.position.y number

Specify y-axis position for sub-gauge of circular gauge

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<div id="subGauge1">
</div> 
 
<script>  
$("#subGauge1").ejCircularGauge({backgroundColor: "#f5b43f",scales: [{radius: 150}]});
$("#CoreCircularGauge").ejCircularGauge({height: 500,width: 500,scales: [{radius: 250,subGauges: [{controlID: "subGauge1",height: 200,width: 200,position: { x: 0, y: 150 }}]}]});
</script>

scales.subGauges.width number

Specify subGauge Width of circular gauge

Default Value

• 150

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<div id="subGauge1">
</div> 
 
<script>  
$("#subGauge1").ejCircularGauge({backgroundColor: "#f5b43f",scales: [{radius: 150}]});
$("#CoreCircularGauge").ejCircularGauge({height: 500,width: 500,scales: [{radius: 250,subGauges: [{controlID: "subGauge1",height: 200,width: 300,position: { x: 200, y: 150 }}]}]});
</script>

scales.sweepAngle number

Specify sweepAngle of circular gauge

Default Value

• 310

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ sweepAngle: 200 }] });
</script>

scales.ticks Array

Specify ticks of circular gauge

Default Value

• Array

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ ticks: [{ angle: 10, distanceFromScale: 10 }] }] });
</script>

scales.ticks.angle number

Specify the angle for the ticks of circular gauge

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ ticks: [{ angle: 10 }] }] });
</script>

scales.ticks.color string

Specify tick color of circular gauge

Default Value

• null

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ ticks: [{ color: "#777777" }] }] });
</script>

scales.ticks.distanceFromScale number

Specify distanceFromScale value for ticks of circular gauge

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ ticks: [{ distanceFromScale: 10 }] }] });
</script>

scales.ticks.height number

Specify tick height of circular gauge

Default Value

• 16

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ ticks: [{ height: 16 }] }] });
</script>

scales.ticks.placement enum

Specify tick placement of circular gauge. See TickPlacement

Default Value

• Near

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>  
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ ticks: [{ placement: "near" }] }] });
</script>

scales.ticks.type enum

Specify tick Style of circular gauge. See TickType

Default Value

• Major

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ ticks: [{ type: "major" }] }] });
</script>

scales.ticks.width number

Specify tick width of circular gauge

Default Value

• 3

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>          
        $("#CoreCircularGauge").ejCircularGauge({ scales: [{ ticks: [{ width: 3 }] }] });
</script>

theme string

Specify the theme of circular gauge.

Default Value

• “flatlight”

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
        $("#CoreCircularGauge").ejCircularGauge({  theme : "flatlight" });
</script>

legend object

Options to customize the legend.

legend.visible boolean

Toggles the visibility of the legend.

Default Value

• false

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend : {visible : true}                     

});

legend.toggleVisibility boolean

Toggles the visibility of the ranges.

Default Value

• true

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend : {toggleVisibility : false}                     

});

legend.alignment enum

Specifies the alignment of the legend.

Name	Type	Description
Center	string	Align the legend as center to the circulargauge
Near	string	Align the legend as near to the circulargauge
Far	string	Align the legend as far to the circulargauge

Default Value

• “Center”. See Alignment

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{alignment : "far"}                    

});

legend.border object

Options for customizing the legend border.

legend.border.color string

Border color of the legend.

Default Value

• “transparent”

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend : {border :{ color :"green"}}                     

});

legend.border.width number

Border width of the legend.

Default Value

• 1

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ border :{width :2}}                     

});

legend.fill string

Fill color for the legend items. By using this property, it displays all legend item shapes in same color.
Legend items representing invisible ranges is displayed in gray color.

Default Value

• null

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ fill : "green"}                    

});

legend.itemPadding number

Gap or padding between the legend items.

Default Value

• 20

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{itemPadding : 5}                     

});

legend.itemStyle object

Options to customize the style of legend items.

legend.itemStyle.border object

Options for customizing the border of legend items.

legend.itemStyle.border.color string

Border color of the legend items.

Default Value

• “transparent”

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ itemStyle :{border : { color : "green' }}}                    

});

legend.itemStyle.border.width number

Border width of the legend items.

Default Value

• 1

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ itemStyle :{border :{ width : 2 }}}                    

});

legend.itemStyle.height number

Specifies the height of the legend item shapes.

Default Value

• 10

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ itemStyle :{height : 20}}                    

});

legend.itemStyle.width number

Specifies the width of the legend item shapes.

Default Value

• 10

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ itemStyle :{width : 15}}                    

});

legend.opacity number

Opacity of the legend.

Default Value

• 1

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ opacity : 0.5}                    

});

legend.position enum

Places the legend at specified position. Legend can be placed at left, right, top or bottom of the circular gauge.

Name	Type	Description
Left	string	Legend will be placed left side of the circulargauge area
Right	string	Legend will be placed right side of the circulargauge area
Top	string	Legend will be placed top of the circulargauge area
Bottom	string	Legend will be placed bottom of the circulargauge area

Default Value

• “Bottom”. See Position

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ position : "top"}                    

});

legend.shape enum

Shape of the legend items.

</tr>

Name	Type	Description
Rectangle	string	Legend shape of circular gauge will be rectangle
Circle	string	Legend shape of circular gauge will be circle
Triangle	string	Legend shape of circular gauge will be triangle
Ellipse	string	Legend shape of circular gauge will be ellipse
Diamond	string	Legend shape of circular gauge will be diamond
Pentagon	string	Legend shape of circular gauge will be pentagon
Slider	string	Legend shape of circular gauge will be slider
Wedge	string	Legend shape of circular gauge will be wedge
Trapezoid	string	Legend shape of circular gauge will be trapezoid
Line	string	Legend shape of circular gauge will be line

Default Value

• “Circle”. See Shape

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ shape : "circle" }                      

});

legend.size object

Options to customize the size of the legend.

legend.size.height string

Specify the height of the legend. Height can be specified in pixel.

Default Value

• null

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ size :{height : "100"}}                    

});

legend.size.width string

Specify the width of the legend. Width can be specified in pixel.

Default Value

• null

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ size :{width : "200"}}                    

});

legend.font object

Options to customize the font used for legend item text.

legend.font.fontFamily string

Font family for legend item text.

Default Value

• “Segoe UI”

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ font :{fontFamily : "Algerian"}}                    

});

legend.font.fontStyle string

Font style for legend item text.

Default Value

• “Normal”

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ font :{fontStyle : "italic"}}                    

});

legend.font.fontWeight string

Font weight for legend item text.

Default Value

• “Regular”

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ font :{fontWeight : "lighter"}}                    

});

legend.font.size string

Font size for legend item text.

Default Value

• “12px”

Example

JS

$("#CoreCircularGauge").ejCircularGauge({

   legend :{ font :{size : "14px"}}                    

});

legend.font.color string

Font color of the text for legend items.

Default Value

• null

Example

JS

$("#CoreCircularGauge").ejCircularGauge({
legend:{font :{color : "green"}}                 
});

legendItemRender

Fires before rendering the legend item. This event is fired for each legend item in CircularGauge. You can use this event to customize legend item shape or add custom text to legend item.

Example

JS

//legendItemRender event for circular gauge

$("#CoreCircularGauge").ejCircularGauge({

    legendItemRender: 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 circulargauge model object
JS type	string	Name of the event
JS data	Object	Instance of the legend item object that is about to be rendered

legendItemClick

Fires on clicking the legend item.

Example

JS

//legendItemClick event for circular gauge

$("#CoreCircularGauge").ejCircularGauge({

     legendItemClick: 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 circulargauge model object
JS type	string	Name of the event
JS data	Object	Instance of the legend item object that is about to be rendered

rangeMouseMove

Fires when mouse moving on ranges.

Example

JS

//rangeMouseMove event for circular gauge

$("#CoreCircularGauge").ejCircularGauge({

     rangeMouseMove: 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 circulargauge model object
JS type	string	Name of the event
JS data	Object	Region of ranges

tooltip object

Specify tooltip option of circular gauge

Default Value

• object

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({  tooltip:{showLabelTooltip: true,showCustomLabelTooltip: true,templateID: null} });
</script>

tooltip.showCustomLabelTooltip boolean

enable showCustomLabelTooltip of circular gauge

Default Value

• false

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({  tooltip:{showCustomLabelTooltip: true} });
</script>

tooltip.showLabelTooltip boolean

enable showLabelTooltip of circular gauge

Default Value

• false

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({  tooltip:{showLabelTooltip: true} });
</script>

tooltip.templateID string

Specify tooltip templateID of circular gauge

Default Value

• false

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>                  
$("#CoreCircularGauge").ejCircularGauge({  tooltip:{showLabelTooltip: true, templateID: "template1"} });
</script>

value number

Specifies the value of circular gauge.

Default Value

• 0

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({ value: 30 });
</script>

width number

Specifies the width of circular gauge.

Default Value

• 360

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({ width: 400 });
</script>

Methods

destroy()

destroy the circular gauge widget. all events bound using this._on will be unbind automatically and bring the control to pre-init state.

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.destroy();
</script>

exportImage(fileName, fileType)

To export Image

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

Returns: boolean

Example

HTML

<div id="CoreCircularGauge"></div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.exportImage("myImage","jpeg");
</script>

getBackNeedleLength(scaleIndex, pointerIndex)

To get BackNeedleLength

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML pointerIndex	number	pointerIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ showBackNeedle: true }] }] });
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getBackNeedleLength(0, 0);
</script>

getCustomLabelAngle(scaleIndex, customLabelIndex)

To get CustomLabelAngle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML customLabelIndex	number	customLabelIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{customLabels:[{textAngle:30,value:"MyLabel",position:{x:250,y:300},color:"#fc0606",font:{size: "20px", fontFamily: "Arial", fontStyle: "Bold" }}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getCustomLabelAngle(0, 0);
</script>

getCustomLabelValue(scaleIndex, customLabelIndex)

To get CustomLabelValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML customLabelIndex	number	customLabelIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{customLabels:[{textAngle:30,value:"MyLabel",position:{x:250,y:300},color:"#fc0606",font:{size: "20px", fontFamily: "Arial", fontStyle: "Bold" }}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getCustomLabelValue(0, 0);
</script>

getLabelAngle(scaleIndex, labelIndex)

To get LabelAngle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML labelIndex	number	labelIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getLabelAngle(0, 0);
</script>

getLabelDistanceFromScale(scaleIndex, labelIndex)

To get LabelDistanceFromScale

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML labelIndex	number	labelIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getLabelDistanceFromScale(0, 0);
</script>

getLabelPlacement(scaleIndex, labelIndex)

To get LabelPlacement

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML labelIndex	number	labelIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getLabelPlacement(0, 0);
</script>

getLabelStyle(scaleIndex, labelIndex)

To get LabelStyle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML labelIndex	number	labelIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getLabelStyle(0, 0);
</script>

getMajorIntervalValue(scaleIndex)

To get MajorIntervalValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getMajorIntervalValue(0);
</script>

getMarkerDistanceFromScale(scaleIndex, pointerIndex)

To get MarkerDistanceFromScale

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML pointerIndex	number	pointerIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getMarkerDistanceFromScale(0, 0);
</script>

getMarkerStyle(scaleIndex, pointerIndex)

To get MarkerStyle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML pointerIndex	number	pointerIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getMarkerStyle(0, 0);
</script>

getMaximumValue(scaleIndex)

To get MaximumValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getMaximumValue(0);
</script>

getMinimumValue(scaleIndex)

To get MinimumValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getMinimumValue(0);
</script>

getMinorIntervalValue(scaleIndex)

To get MinorIntervalValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getMinorIntervalValue(0);
</script>

getNeedleStyle(scaleIndex, pointerIndex)

To get NeedleStyle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML pointerIndex	number	pointerIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getNeedleStyle(0, 0);
</script>

getPointerCapBorderWidth(scaleIndex)

To get PointerCapBorderWidth

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getPointerCapBorderWidth(0);
</script>

getPointerCapRadius(scaleIndex)

To get PointerCapRadius

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getPointerCapRadius(0);
</script>

getPointerLength(scaleIndex, pointerIndex)

To get PointerLength

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML pointerIndex	number	pointerIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getPointerLength(0, 0);
</script>

getPointerNeedleType(scaleIndex, pointerIndex)

To get PointerNeedleType

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML pointerIndex	number	pointerIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getPointerNeedleType(0, 0);
</script>

getPointerPlacement(scaleIndex, pointerIndex)

To get PointerPlacement

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML pointerIndex	number	pointerIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getPointerPlacement(0, 0);
</script>

getPointerValue(scaleIndex, pointerIndex)

To get PointerValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML pointerIndex	number	pointerIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getPointerValue(0, 0);
</script>

getPointerWidth(scaleIndex, pointerIndex)

To get PointerWidth

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML pointerIndex	number	pointerIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getPointerWidth(0, 0);
</script>

getRangeBorderWidth(scaleIndex, rangeIndex)

To get RangeBorderWidth

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML rangeIndex	number	rangeIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getRangeBorderWidth(0, 0);
</script>

getRangeDistanceFromScale(scaleIndex, rangeIndex)

To get RangeDistanceFromScale

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML rangeIndex	number	rangeIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getRangeDistanceFromScale(0, 0);
</script>

getRangeEndValue(scaleIndex, rangeIndex)

To get RangeEndValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML rangeIndex	number	rangeIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getRangeEndValue(0, 0);
</script>

getRangePosition(scaleIndex, rangeIndex)

To get RangePosition

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML rangeIndex	number	rangeIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getRangePosition(0, 0);
</script>

getRangeSize(scaleIndex, rangeIndex)

To get RangeSize

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML rangeIndex	number	rangeIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getRangeSize(0, 0);
</script>

getRangeStartValue(scaleIndex, rangeIndex)

To get RangeStartValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML rangeIndex	number	rangeIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getRangeStartValue(0, 0);
</script>

getScaleBarSize(scaleIndex)

To get ScaleBarSize

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getScaleBarSize(0);
</script>

getScaleBorderWidth(scaleIndex)

To get ScaleBorderWidth

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({ scales: [{showScaleBar: true, size: 6, border:{Width: 1.5} }] });
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getScaleBorderWidth(0);
</script>

getScaleDirection(scaleIndex)

To get ScaleDirection

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getScaleDirection(0);
</script>

getScaleRadius(scaleIndex)

To get ScaleRadius

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getScaleRadius(0);
</script>

getStartAngle(scaleIndex)

To get StartAngle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getStartAngle(0);
</script>

getSubGaugeLocation(scaleIndex, GaugeIndex)

To get SubGaugeLocation

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML GaugeIndex	number	GaugeIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<div id="subGauge1">
</div> 
 
<script>
$("#subGauge1").ejCircularGauge({backgroundColor: "#f5b43f",scales: [{radius: 150}]});
$("#CoreCircularGauge").ejCircularGauge({height: 500,width: 500,scales: [{radius: 250,subGauges: [{controlID: "subGauge1",height: 400,width: 200,position: { x: 200, y: 150 }}]}]});
circulargaugeObj.getSubGaugeLocation(0, 0);
</script>

getSweepAngle(scaleIndex)

To get SweepAngle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getSweepAngle(0);
</script>

getTickAngle(scaleIndex, tickIndex)

To get TickAngle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML tickIndex	number	tickIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getTickAngle(0, 0);
</script>

getTickDistanceFromScale(scaleIndex, tickIndex)

To get TickDistanceFromScale

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML tickIndex	number	tickIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getTickDistanceFromScale(0, 0);
</script>

getTickHeight(scaleIndex, labelIndex)

To get TickHeight

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML labelIndex	number	labelIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getTickHeight(0, 0);
</script>

getTickPlacement(scaleIndex, tickIndex)

To get TickPlacement

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML tickIndex	number	tickIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getTickPlacement(0, 0);
</script>

getTickStyle(scaleIndex, tickIndex)

To get TickStyle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML tickIndex	number	tickIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getTickStyle(0, 0);
</script>

getTickWidth(scaleIndex, tickIndex)

To get TickWidth

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the Gauge
HTML tickIndex	number	tickIndex value for the Gauge

Returns: any

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.getTickWidth(0, 0);
</script>

includeFirstValue(scaleIndex, labelIndex, value)

To set includeFirstValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML labelIndex	number	labelIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.includeFirstValue(0, 0, false);
</script>

redraw(value)

Switching the redraw option for the gauge

Name	Type	Description
HTML value	string	redraw value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.redraw("scale");
</script>

setBackNeedleLength(scaleIndex, pointerIndex, value)

To set BackNeedleLength

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML pointerIndex	number	pointerIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({ scales: [{ pointers: [{ showBackNeedle: true }] }] });
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setBackNeedleLength(0, 0, 10);
</script>

setCustomLabelAngle(scaleIndex, customLabelIndex, value)

To set CustomLabelAngle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML customLabelIndex	number	customLabelIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{customLabels:[{value:"MyLabel",position:{x:250,y:300},color:"#fc0606",font: { size: "20px", fontFamily: "Arial", fontStyle: "Bold" }}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setCustomLabelAngle(0, 0, 10);
</script>

setCustomLabelValue(scaleIndex, customLabelIndex, value)

To set CustomLabelValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML customLabelIndex	number	customLabelIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{customLabels:[{value:"MyLabel",position:{x:180,y:300},color:"#fc0606",font:{size: "20px", fontFamily: "Arial", fontStyle: "Bold" }}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setCustomLabelValue(0, 0, "CircularGauge");
</script>

setLabelAngle(scaleIndex, labelIndex, angle)

To set LabelAngle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML labelIndex	number	labelIndex value for the gauge
HTML angle	number	angle value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setLabelAngle(0, 0, 10);
</script>

setLabelDistanceFromScale(scaleIndex, labelIndex, value)

To set LabelDistanceFromScale

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML labelIndex	number	labelIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setLabelDistanceFromScale(0, 0, 10);
</script>

setLabelPlacement(scaleIndex, labelIndex, value)

To set LabelPlacement

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML labelIndex	number	labelIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setLabelPlacement(0, 0, "far");
</script>

setLabelStyle(scaleIndex, labelIndex, value)

To set LabelStyle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML labelIndex	number	labelIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setLabelStyle(0, 0, "major");
</script>

setMajorIntervalValue(scaleIndex, value)

To set MajorIntervalValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setMajorIntervalValue(0, 10);
</script>

setMarkerDistanceFromScale(scaleIndex, pointerIndex, value)

To set MarkerDistanceFromScale

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML pointerIndex	number	pointerIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setMarkerDistanceFromScale(0, 0, 10);
</script>

setMarkerStyle(scaleIndex, pointerIndex, value)

To set MarkerStyle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML pointerIndex	number	pointerIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setMarkerStyle(0, 0, "rectangle");
</script>

setMaximumValue(scaleIndex, value)

To set MaximumValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setMaximumValue(0, 130);
</script>

setMinimumValue(scaleIndex, value)

To set MinimumValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setMinimumValue(0, 10);
</script>

setMinorIntervalValue(scaleIndex, value)

To set MinorIntervalValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setMinorIntervalValue(0, 2);
</script>

setNeedleStyle(scaleIndex, pointerIndex, value)

To set NeedleStyle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML pointerIndex	number	pointerIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setNeedleStyle(0, 0, "arrow");
</script>

setPointerCapBorderWidth(scaleIndex, value)

To set PointerCapBorderWidth

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setPointerCapBorderWidth(0, 5);
</script>

setPointerCapRadius(scaleIndex, value)

To set PointerCapRadius

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setPointerCapRadius(0, 10);
</script>

setPointerLength(scaleIndex, pointerIndex, value)

To set PointerLength

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML pointerIndex	number	pointerIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setPointerLength(0, 0, 90);
</script>

setPointerNeedleType(scaleIndex, pointerIndex, value)

To set PointerNeedleType

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML pointerIndex	number	pointerIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setPointerNeedleType(0, 0, "triangle");
</script>

setPointerPlacement(scaleIndex, pointerIndex, value)

To set PointerPlacement

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML pointerIndex	number	pointerIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setPointerPlacement(0, 0,"near");
</script>

setPointerValue(scaleIndex, pointerIndex, value)

To set PointerValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML pointerIndex	number	pointerIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setPointerValue(0, 0, 10);
</script>

setPointerWidth(scaleIndex, pointerIndex, value)

To set PointerWidth

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML pointerIndex	number	pointerIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setPointerWidth(0, 0, 10);
</script>

setRangeBorderWidth(scaleIndex, rangeIndex, value)

To set RangeBorderWidth

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML rangeIndex	number	rangeIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setRangeBorderWidth(0, 0, 5);
</script>

setRangeDistanceFromScale(scaleIndex, rangeIndex, value)

To set RangeDistanceFromScale

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML rangeIndex	number	rangeIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setRangeDistanceFromScale(0, 0, 10);
</script>

setRangeEndValue(scaleIndex, rangeIndex, value)

To set RangeEndValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML rangeIndex	number	rangeIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setRangeEndValue(0, 0, 70);
</script>

setRangePosition(scaleIndex, rangeIndex, value)

To set RangePosition

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML rangeIndex	number	rangeIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setRangePosition(0, 0, "far");
</script>

setRangeSize(scaleIndex, rangeIndex, value)

To set RangeSize

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML rangeIndex	number	rangeIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setRangeSize(0, 0, 10);
</script>

setRangeStartValue(scaleIndex, rangeIndex, value)

To set RangeStartValue

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML rangeIndex	number	rangeIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({scales: [{showRanges: true,ranges: [{distanceFromScale: -30,startValue: 0,endValue: 70}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setRangeStartValue(0, 0, 10);
</script>

setScaleBarSize(scaleIndex, value)

To set ScaleBarSize

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setScaleBarSize(0, 160);
</script>

setScaleBorderWidth(scaleIndex, value)

To set ScaleBorderWidth

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge({ scales: [{showScaleBar: true, size: 6, border:{width: 1.5} }] });
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setScaleBorderWidth(0, 3);
</script>

setScaleDirection(scaleIndex, value)

To set ScaleDirection

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setScaleDirection(0, "clockwise");
</script>

setScaleRadius(scaleIndex, value)

To set ScaleRadius

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setScaleRadius(0, 140);
</script>

setStartAngle(scaleIndex, value)

To set StartAngle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setStartAngle(0, 10);
</script>

setSubGaugeLocation(scaleIndex, GaugeIndex, value)

To set SubGaugeLocation

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML GaugeIndex	number	GaugeIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
 
<div id="subGauge1">
</div> 
<script>
$("#subGauge1").ejCircularGauge({backgroundColor: "#f5b43f",scales: [{radius: 150}]});
$("#CoreCircularGauge").ejCircularGauge({height: 500,width: 500,scales: [{radius: 250,subGauges: [{controlID: "subGauge1",height: 400,width: 200,position: { x: 200, y: 150 }}]}]});
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setSubGaugeLocation(0, 0, {x:50,y:100});
</script>

setSweepAngle(scaleIndex, value)

To set SweepAngle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setSweepAngle(0, 220);
</script>

setTickAngle(scaleIndex, tickIndex, value)

To set TickAngle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML tickIndex	number	tickIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setTickAngle(0, 0, 10);
</script>

setTickDistanceFromScale(scaleIndex, tickIndex, value)

To set TickDistanceFromScale

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML tickIndex	number	tickIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setTickDistanceFromScale(0, 0, 15);
</script>

setTickHeight(scaleIndex, tickIndex, value)

To set TickHeight

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML tickIndex	number	tickIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setTickHeight(0, 0, 10);
</script>

setTickPlacement(scaleIndex, tickIndex, value)

To set TickPlacement

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML tickIndex	number	tickIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script> 
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setTickPlacement(0, 0, "near");
</script>

setTickStyle(scaleIndex, tickIndex, value)

To set TickStyle

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML tickIndex	number	tickIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setTickStyle(0, 0, "minor");
</script>

setTickWidth(scaleIndex, tickIndex, value)

To set TickWidth

Name	Type	Description
HTML scaleIndex	number	scaleIndex value for the gauge
HTML tickIndex	number	tickIndex value for the gauge
HTML value	number	value for the gauge

Returns: void

Example

HTML

<div id="CoreCircularGauge"></div> 
  
<script>
$("#CoreCircularGauge").ejCircularGauge();
var circulargaugeObj = $("#CoreCircularGauge").data("ejCircularGauge");
circulargaugeObj.setTickWidth(0, 0, 5);
</script>

Events

drawCustomLabel

Triggers while the custom labels are being drawn on the gauge.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML context	Object	returns the context element
HTML position	Object	returns the startX and startY of the custom label
HTML model	Object	returns the gauge model
HTML scaleElement	Object	returns the options of the scale element.
HTML scaleIndex	number	returns the scaleIndex to which the custom label belongs.
HTML style	string	returns the custom label style
HTML customLabelElement	Object	returns the current custom label element.
HTML customLabelIndex	number	returns the index of the custom label.
HTML type	string	returns the name of the event

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({
   drawCustomLabel: function (args) {}
});
</script>

drawIndicators

Triggers while the indicators are being started to drawn on the gauge.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML context	Object	returns the context element
HTML position	Object	returns the startX and startY of the indicator
HTML model	Object	returns the gauge model
HTML scaleElement	Object	returns the options of the scale element.
HTML scaleIndex	number	returns the scaleIndex to which the indicator belongs.
HTML style	string	returns the indicator style
HTML indicatorElement	Object	returns the current indicator element.
HTML indicatorIndex	number	returns the index of the indicator.
HTML type	string	returns the name of the event

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({
   drawIndicators: function (args) {}
});
</script>

drawLabels

Triggers while the labels are being drawn on the gauge.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML context	Object	returns the context element
HTML position	Object	returns the startX and startY of the labels
HTML model	Object	returns the gauge model
HTML scaleElement	Object	returns the options of the scale element.
HTML scaleIndex	number	returns the scaleIndex to which the label belongs.
HTML style	string	returns the label style
HTML label	Object	returns the label object of the gauge. Name Type Description HTML angle number returns the angle of the labels. HTML element Object returns the current label element. HTML index number returns the index of the label.
HTML pointerValue	number	returns the value of the label.
HTML type	string	returns the name of the event

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({
   drawLabels: function (args) {}
});
</script>

drawPointerCap

Triggers while the pointer cap is being drawn on the gauge.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML context	Object	returns the context element
HTML scaleElement	Object	returns the options of the scale element.
HTML position	Object	returns the startX and startY of the pointer cap.
HTML model	Object	returns the gauge model
HTML style	string	returns the pointer cap style
HTML type	string	returns the name of the event

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({
   drawPointerCap: function (args) {}
});
</script>

drawPointers

Triggers while the pointers are being drawn on the gauge.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML context	Object	returns the context element
HTML position	Object	returns the startX and startY of the pointer
HTML model	Object	returns the gauge model
HTML scaleElement	Object	returns the options of the scale element.
HTML scaleIndex	number	returns the scaleIndex to which the pointer belongs.
HTML style	string	returns the pointer style
HTML pointer	Object	returns the pointer object of the gauge. Name Type Description HTML angle number returns the angle of the pointer. HTML element Object returns the current pointer element. HTML index number returns the index of the pointer. HTML value number returns the value of the pointer.
HTML type	string	returns the name of the event

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({
   drawPointers: function (args) {}
});
</script>

drawRange

Triggers when the ranges begin to be getting drawn on the gauge.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML context	Object	returns the context element
HTML position	Object	returns the startX and startY of the range
HTML model	Object	returns the gauge model
HTML scaleElement	Object	returns the options of the scale element.
HTML scaleIndex	number	returns the scaleIndex to which the range belongs.
HTML style	string	returns the range style
HTML rangeElement	Object	returns the current range element.
HTML rangeIndex	number	returns the index of the range.
HTML type	string	returns the name of the event

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({
   drawRange: function (args) {}
});
</script>

drawTicks

Triggers while the ticks are being drawn on the gauge.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML context	Object	returns the context element
HTML position	Object	returns the startX and startY of the ticks
HTML model	Object	returns the gauge model
HTML scaleElement	Object	returns the options of the scale element.
HTML scaleIndex	number	returns the scaleIndex to which the tick belongs.
HTML style	string	returns the ticks style
HTML tick	Object	returns the tick object of the gauge. Name Type Description HTML angle number returns the angle of the tick. HTML element Object returns the current tick element. HTML index number returns the index of the tick.
HTML pointerValue	number	returns the label value of the tick.
HTML type	string	returns the name of the event

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({
   drawTicks: function (args) {}
});
</script>

load

Triggers while the gauge start to Load.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML Model	Object	returns the gauge model
HTML scaleElement	Object	returns the entire scale element.
HTML context	Object	returns the context element
HTML type	string	returns the name of the event

Example

HTML

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

mouseClick

Triggers when the left mouse button is clicked.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML model	Object	returns the gauge model
HTML type	Object	returns the name of the event
HTML scaleElement	Object	returns the scale element.
HTML scaleIndex	number	returns the scaleIndex to which the pointer belongs.
HTML context	Object	returns the context element
HTML pointer	Object	returns the pointer object Name Type Description HTML index number returns the pointer Index HTML element Object returns the pointer element. HTML value number returns the value of the pointer. HTML angle number returns the angle of the pointer.
HTML style	string	returns the pointer style
HTML position	Object	returns the startX and startY of the pointer.

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({
   mouseClick: function (args) {}
});
</script>

mouseClickMove

Triggers when clicking and dragging the mouse pointer over the gauge pointer.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML model	Object	returns the gauge model
HTML type	Object	returns the name of the event
HTML scaleElement	Object	returns the scale element.
HTML scaleIndex	number	returns the scaleIndex to which the pointer belongs.
HTML context	Object	returns the context element
HTML pointer	Object	returns the pointer object Name Type Description HTML index number returns the pointer Index HTML element Object returns the pointer element. HTML value number returns the value of the pointer. HTML angle number returns the angle of the pointer.
HTML style	string	returns the pointer style
HTML position	Object	returns the startX and startY of the pointer.

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({
   mouseClickMove: function (args) {}
});
</script>

mouseClickUp

Triggers when the mouse click is released.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML model	Object	returns the gauge model
HTML type	Object	returns the name of the event
HTML scaleElement	Object	returns the scale element.
HTML scaleIndex	number	returns the scaleIndex to which the pointer belongs.
HTML context	Object	returns the context element
HTML pointer	Object	returns the pointer object Name Type Description HTML index number returns the pointer Index HTML element Object returns the pointer element. HTML value number returns the value of the pointer. HTML angle number returns the angle of the pointer.
HTML style	string	returns the pointer style
HTML position	Object	returns the startX and startY of the pointer.

Example

HTML

<div id="CoreCircularGauge">
</div> 
 
<script>
$("#CoreCircularGauge").ejCircularGauge({
   mouseClickUp: function (args) {}
});
</script>

renderComplete

Triggers when the rendering of the gauge is completed.

Name	Type	Description
HTML object	Object	returns the object of the gauge.
HTML cancel	boolean	returns the cancel option value
HTML context	Object	returns the context element
HTML scaleElement	Object	returns the entire scale element.
HTML model	Object	returns the gauge model
HTML type	string	returns the name of the event

Example

HTML

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

doubleClick

Fires, on double clicking the circular gauge.

Name	Type	Description
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the circular 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 circular gauge area. id - ID of the target element. size - Width and height of the circular 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 circular gauge

$("#CoreCircularGauge").ejCircularGauge({

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

rightClick

Fires, on right clicking the circular gauge.

Name	Type	Description
JS cancel	boolean	Set this option to true to cancel the event
JS model	object	Instance of the circular 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 circular gauge area. id - ID of the target element. size - Width and height of the circular 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 circular gauge

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