ejCircularGauge

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

    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

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