Events and Public Methods in JQuery CircularGauge widget

19 Jan 201824 minutes to read

Public Methods

Destroying the Circular Gauge

The destroy method is used to destroy the CircularGauge widget. All events bound using this._on will be unbind automatically and bring the control to pre-init state.

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

    Getting Back Needle Length

    The getBackNeedleLength method is used to get the needle length of CircularGauge.

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

    Getting Custom Label Angle

    The getCustomLabelAngle method is used to get the angle of custom label.

  • 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>

    Getting Custom Label value

    The getCustomLabelValue method is used to get the value of custom label.

  • 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>

    Getting Label Angle

    The getLabelAngle method is used to get angle of label.

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

    Getting Label Distance From Scale

    The getLabelDistanceFromScale method is used to get the distance value from scale for label.

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

    Getting Label Placement

    The getLabelPlacement method is used to get placement of label.

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

    Getting Label Style

    The getLabelStyle method is used to get style of label.

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

    Getting Major Interval Value

    The getMajorIntervalValue method is used to get major interval value of CircularGauge.

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

    Getting Maker Distance From Scale

    The getMarkerDistanceFromScale method is used to get distance from scale value of marker.

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

    Getting Maker Style

    The getMarkerStyle method is used to get distance from scale value of marker.

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

    Getting Maximum Value

    The getMaximumValue method is used to get maximum value of CircularGauge.

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

    Getting Minimum Value

    The getMinimumValue method is used to get minimum value of CircularGauge.

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

    Getting Minor Interval Value

    The getMinorIntervalValue method is used to get minor interval value of CircularGauge.

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

    Getting Needle Style

    The getNeedleStyle method is used to get style of needle.

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

    Getting Pointer Cap Border Width

    The getPointerCapBorderWidth method is used to get border width of pointer cap.

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

    Getting Pointer Cap Radius

    The getPointerCapRadius method is used to get radius of pointer cap.

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

    Getting Pointer Length

    The getPointerLength method is used to get pointer length.

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

    Getting Pointer Needle Type

    The getPointerNeedleType method is used to get needle type of pointer.

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

    Getting Pointer Placement

    The getPointerPlacement method is used to get placement of pointer.

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

    Getting Pointer Value

    The getPointerValue method is used to get pointer value.

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

    Getting Pointer Value

    The getPointerWidth method is used to get pointer width.

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

    Getting Range Border Width

    The getRangeBorderWidth method is used to get border width of range.

  • 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>

    Getting Range Distance From Scale

    The getRangeDistanceFromScale method is used to get range distance from scale.

  • 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>

    Getting Range End Value

    The getRangeEndValue method is used to get end value of range.

  • 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>

    Getting Range Position

    The getRangePosition method is used to get range position.

  • 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>

    Getting Range Size

    The getRangeSize method is used to get range size.

  • 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>

    Getting Range Start Value

    The getRangeStartValue method is used to get range start value.

  • 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>

    Getting Scale Bar Size

    The getScaleBarSize method is used to get scale bar size.

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

    Getting Scale Border Width

    The getScaleBorderWidth method is used to get border width of scale.

  • 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>

    Getting Scale Direction

    The getScaleDirection method is used to get scale direction.

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

    Getting Scale Radius

    The getScaleRadius method is used to get scale radius.

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

    Getting Start Angle

    The getStartAngle method is used to get start angle.

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

    Getting Sub Gauge Location

    The getSubGaugeLocation method is used to get location of subGauge.

  • 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>

    Getting Sweep Angle

    The getSweepAngle method is used to get sweep angle.

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

    Getting Tick Angle

    The getTickAngle method is used to get tick angle.

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

    Getting Tick Distance From Scale

    The getTickDistanceFromScale method is used to get tick distance from scale value.

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

    Getting Tick Height

    The getTickHeight method is used to get tick height.

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

    Getting Tick Placement

    The getTickPlacement method is used to get tick placement.

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

    Getting Tick Style

    The getTickStyle method is used to get tick style.

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

    Getting Tick Width

    The getTickWidth method is used to get tick width.

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

    Setting IncludeFirstValue

    The includeFirstValue method is used to set includeFirstValue.

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

    Redrawing Circular Gauge

    The redraw method is used to redraw the Circular Gauge widget.

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

    Setting Back Needle Length

    The setBackNeedleLength method is used to set the needle length of CircularGauge.

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

    Setting Custom Label Angle

    The setCustomLabelAngle method is used to set the angle of custom label.

  • 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>

    Setting Custom Label value

    The setCustomLabelValue method is used to set the value of custom label.

  • 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>

    Setting Label Angle

    The setLabelAngle method is used to set angle of label.

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

    Setting Label Distance From Scale

    The setLabelDistanceFromScale method is used to set the distance value from scale for label.

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

    Setting Label Placement

    The setLabelPlacement method is used to set placement of label.

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

    Setting Label Style

    The setLabelStyle method is used to set style of label.

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

    Setting Major Interval Value

    The setMajorIntervalValue method is used to set major interval value of CircularGauge.

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

    Setting Maker Distance From Scale

    The setMarkerDistanceFromScale method is used to set distance from scale value of marker.

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

    Setting Maker Style

    The setMarkerStyle method is used to set distance from scale value of marker.

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

    Setting Maximum Value

    The setMaximumValue method is used to set maximum value of CircularGauge.

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

    Setting Minimum Value

    The setMinimumValue method is used to set minimum value of CircularGauge.

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

    Setting Minor Interval Value

    The setMinorIntervalValue method is used to set minor interval value of CircularGauge.

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

    Setting Needle Style

    The setNeedleStyle method is used to set style of needle.

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

    Setting Pointer Cap Border Width

    The setPointerCapBorderWidth method is used to set border width of pointer cap.

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

    Setting Pointer Cap Radius

    The setPointerCapRadius method is used to set radius of pointer cap.

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

    Setting Pointer Length

    The setPointerLength method is used to set pointer length.

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

    Setting Pointer Needle Type

    The setPointerNeedleType method is used to set needle type of pointer.

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

    Setting Pointer Placement

    The setPointerPlacement method is used to set placement of pointer.

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

    Setting Pointer Value

    The setPointerValue method is used to set pointer value.

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

    Setting Pointer Value

    The setPointerWidth method is used to set pointer width.

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

    Setting Range Border Width

    The setRangeBorderWidth method is used to set border width of range.

  • 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>

    Setting Range Distance From Scale

    The setRangeDistanceFromScale method is used to set range distance from scale.

  • 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>

    Setting Range End Value

    The setRangeEndValue method is used to set end value of range.

  • 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>

    Setting Range Position

    The setRangePosition method is used to set range position.

  • 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>

    Setting Range Size

    The setRangeSize method is used to set range size.

  • 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>

    Setting Range Start Value

    The setRangeStartValue method is used to set range start value.

  • 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>

    Setting Scale Bar Size

    The setScaleBarSize method is used to set scale bar size.

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

    Setting Scale Border Width

    The setScaleBorderWidth method is used to set border width of scale.

  • 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>

    Setting Scale Direction

    The setScaleDirection method is used to set scale direction.

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

    Setting Scale Radius

    The setScaleRadius method is used to set scale radius.

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

    Setting Start Angle

    The setStartAngle method is used to set start angle.

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

    Setting Sub Gauge Location

    The setSubGaugeLocation method is used to set location of subGauge.

  • 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.setSubGaugeLocation(0, 0, {x:50,y:100});
    </script>

    Setting Sweep Angle

    The setSweepAngle method is used to set sweep angle.

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

    Setting Tick Angle

    The setTickAngle method is used to set tick angle.

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

    Setting Tick Distance From Scale

    The setTickDistanceFromScale method is used to set tick distance from scale value.

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

    Setting Tick Height

    The setTickHeight method is used to set tick height.

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

    Setting Tick Placement

    The setTickPlacement method is used to set tick placement.

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

    Setting Tick Style

    The setTickStyle method is used to set tick style.

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

    Setting Tick Width

    The setTickWidth method is used to set tick width.

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

    Events

    Draw Custom Label

    The drawCustomLabel event is triggered while custom labels are drawn on the gauge.

  • javascript
  • $("#CircularGauge1").ejCircularGauge({
               
                //draw custom label event
                drawCustomLabel: function(args){
    
                },
    
                //...
            });

    Draw Indicators

    The drawIndicators event is triggered while indicators are being drawn on the gauge.

  • javascript
  • $("#CircularGauge1").ejCircularGauge({
               
                //draw indicators event
                drawIndicators: function(args){
    
                },
    
                //...
            });

    Draw Labels

    The drawLabels event is triggered while labels are being drawn on the gauge.

  • javascript
  • $("#CircularGauge1").ejCircularGauge({
               
                //draw labels event
                drawLabels: function(args){
    
                },
    
                //...
            });

    Draw Pointer Cap

    The drawPointerCap event is triggered while pointer cap is being drawn on the gauge.

  • javascript
  • $("#CircularGauge1").ejCircularGauge({
               
                //draw pointer cap event
                drawPointerCap: function(args){
    
                },
    
                //...
            });

    Draw Pointers

    The drawPointers event is triggered while pointer cap is being drawn on the gauge.

  • javascript
  • $("#CircularGauge1").ejCircularGauge({
               
                //draw pointer event
                drawPointers: function(args){
    
                },
    
                //...
            });

    Draw Range

    The drawRange event is triggered when ranges starts to be drawn on the gauge.

  • javascript
  • $("#CircularGauge1").ejCircularGauge({
               
                //draw range event
                drawRange: function(args){
    
                },
    
                //...
            });

    Draw Ticks

    The drawTicks event is triggered when ticks are being drawn on the gauge.

  • javascript
  • $("#CircularGauge1").ejCircularGauge({
               
                //draw ticks event
                drawTicks: function(args){
    
                },
    
                //...
            });

    Load

    The load event is triggered when gauge starts to load.

  • javascript
  • $("#CircularGauge1").ejCircularGauge({
               
                //load event
                load: function(args){
    
                },
    
                //...
            });

    Mouse Click

    The mouseClick event is triggered when left mouse button is clicked.

  • javascript
  • $("#CircularGauge1").ejCircularGauge({
               
                //mouse click event
                mouseClick: function(args){
    
                },
    
                //...
            });

    Mouse Click Move

    The mouseClickMove event is triggered when clicking and dragging the mouse pointer over the gauge pointer.

  • javascript
  • $("#CircularGauge1").ejCircularGauge({
               
                //mouse click move event
                mouseClickMove: function(args){
    
                },
    
                //...
            });

    Mouse Click Up

    The mouseClickUp event is triggered when clicking and dragging the mouse pointer over the gauge pointer.

  • javascript
  • $("#CircularGauge1").ejCircularGauge({
               
                //mouse click up event
                mouseClickUp: function(args){
    
                },
    
                //...
            });

    Render Complete

    The renderComplete event is triggered when rendering of the gauge is completed.

  • javascript
  • $("#CircularGauge1").ejCircularGauge({
               
                //render complete event
                renderComplete: function(args){
    
                },
    
                //...
            });

    Range Mouse Move

    The rangeMouseMove event is triggered when moving mouse on ranges.

  • javascript
  • $("#CircularGauge1").ejCircularGauge({
               
                //range mouse move event
                rangeMouseMove: function(args){
    
                },
    
                //...
            });

    doubleClick

    The doubleClick event is triggered when double clicking the gauges.

  • js
  • //DoubleClick event for circular gauge
    
    $("#CoreCircularGauge").ejCircularGauge({
    
        doubleClick: function (args) {
                  //Do something
        }
       
    });

    rightClick

    The rightClick event is triggered when right clicking the gauges.

  • js
  • //RightClick event for circular gauge
    
    $("#CoreCircularGauge").ejCircularGauge({
        rightClick: function (args) {
                  //Do something
        }
       
    });