Methods and Events

27 Feb 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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<script type="text/javascript">
    $("#CoreCircularGauge").ejCircularGauge("destroy");
</script>

Getting Back Needle Length

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

HTML

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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="subGauge1"></div> 

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

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

Setting IncludeFirstValue

The includeFirstValue method is used to set includeFirstValue.

HTML

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

<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

<ej:CircularGauge runat="server" ID="CoreCircularGauge">
</ej:CircularGauge>

JS

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

Events

Draw Custom Label

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

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientDrawCustomLabel="onDrawCustomLabel"> 
</ej:CircularGauge>

JS

function onDrawCustomLabel(sender) {
        // do something
      }

Draw Indicators

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

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientDrawIndicators="onDrawIndicators"> 
</ej:CircularGauge>

JS

function onDrawIndicators(sender) { 
        // do something
    }

Draw Labels

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

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientDrawLabels="onDrawLabels"> 
</ej:CircularGauge>

JS

function onDrawLabels(sender) { 
        // do something
    }

Draw Pointer Cap

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

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientDrawPointerCap="onDrawPointerCap"> 
</ej:CircularGauge>

JS

function onDrawPointerCap(sender) { 
        // do something
    }

Draw Pointers

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

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientDrawPointers="onDrawPointers"> 
</ej:CircularGauge>

JS

function onDrawPointers(sender) { 
        // do something
    }

Draw Range

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

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientDrawRange="onDrawRange"> 
</ej:CircularGauge>

JS

function onDrawRange(sender) { 
        // do something
    }

Draw Ticks

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

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientDrawTicks="onDrawTicks"> 
</ej:CircularGauge>

JS

function onDrawTicks(sender) { 
        // do something
    }

Load

The OnClientLoad event is triggered when gauge starts to load.

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientLoad="onLoad"> 
</ej:CircularGauge>

JS

function onLoad(sender) { 
        // do something
    }

Mouse Click

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

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientMouseClick="onMouseClick"> 
</ej:CircularGauge>

JS

function onMouseClick(sender) { 
        // do something
    }

Mouse Click Move

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

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientMouseClickMove="onMouseClickMove"> 
</ej:CircularGauge>

JS

function onMouseClickMove(sender) { 
        // do something
    }

Mouse Click Up

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

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientMouseClickUp="onMouseClickUp"> 
</ej:CircularGauge>

JS

function onMouseClickUp(sender) { 
        // do something
    }

Render Complete

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

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientRenderComplete="onRenderComplete"> 
</ej:CircularGauge>

JS

function onRenderComplete(sender) { 
        // do something
    }

Range Mouse Move

The OnClientRangeMouseMove event is triggered when moving mouse on ranges.

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientRangeMouseMove="onRangeMouseMove"> 
</ej:CircularGauge>

JS

function onRangeMouseMove(sender) { 
        // do something
    }

DoubleClick

The DoubleClick event is triggered when double clicking the gauges.

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientDoubleClick="onDoubleClick"> 
</ej:CircularGauge>

JS

function onDoubleClick(sender) { 
        // do something
    }

RightClick

The RightClick event is triggered when right clicking the gauges.

HTML

<ej:CircularGauge ID="ScaleCircularGauge" runat="server" OnClientRightClick="onRightClick"> 
</ej:CircularGauge>

JS

function onRightClick(sender) { 
        // do something
    }