Available in the Full Version

Radial Gauge - Scale Settings

This sample demonstrates how to set scale in a radial gauge.
Options
Start Extent
End Extent
Scale Oversweep
Sweep Direction
Scale Brush
Transition Duration

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

A scale defines a range of values in the radial gauge. Use the table above to set the radial gauge control's scale properties.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>

</head>

<body>
    <style type="text/css">
    	.sliderBounds {
    	   width: 95px;
    	   margin: 6px 3px 6px 6px;
			display: inline-block;
    	}
    	.optionContainer {
    	   width: 154px;
    	   margin: 2px;
			padding: 2px;
			display: inline-block;
			border: 1px solid #e0e0e0;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			border-radius: 4px;
    	}
    	.selectBounds {
    	   width: 120px;
    	}
    </style>

    <!-- Target element for the igRadialGauge -->
    <div id="radialgauge"></div>

    <div>
        <fieldset id="gaugeOptions">
            <legend>Options</legend>
				<div class="optionContainer">
               Start Extent
					<br />
               <div id="scaleStartExtentSlider" class="sliderBounds"></div>
               <label id="startExtentLabel">0.57</label>
				</div>
				<div class="optionContainer">
               End Extent
					<br />
               <div id="scaleEndExtentSlider" class="sliderBounds"></div>
               <label id="endExtentLabel">0.57</label>
				</div>
				<div class="optionContainer">
               Scale Oversweep
					<br />
               <div id="scaleOversweepSlider" class="sliderBounds"></div>
               <label id="scaleOversweepLabel">3</label>
				</div>
				<div class="optionContainer">
               Sweep Direction
					<br />
               <select id="scaleOversweepDropdown" class="selectBounds">
                  <option value="clockwise" selected="selected">clockwise</option>
                  <option value="counterclockwise">counterclockwise</option>
               </select>
				</div>
				<div class="optionContainer">
               Scale Brush
					<br />
               <select id="scaleBrushDropdown" class="selectBounds">
                  <option value="red">Red</option>
                  <option value="yellow">Yellow</option>
                  <option value="green">Green</option>
                  <option value="blue">Blue</option>
                  <option value="#45ADD6" selected="selected">LightBlue</option>
                  <option value="black">Black</option>
               </select>
				</div>
				<div class="optionContainer">
               Transition Duration
					<br />
               <div id="transitionDurationSlider" class="sliderBounds"></div>
               <label id="transitionDurationLabel">2</label>
				</div>
        </fieldset>
    </div>

    <script>

        $(function () {
            $("#radialgauge").igRadialGauge({
                height: "350px",
                width: "100%",
                transitionDuration: "1500",
                scaleBrush: $("#scaleBrushDropdown").val(),
                scaleBrush: "#45ADD6",
                scaleStartExtent: 0.5,
                scaleEndExtent: 0.57,
                scaleOversweep: 3,
                scaleSweepDirection: "clockwise",
            });


            // Scale Start Extent
            $("#scaleStartExtentSlider").slider({
                min: 0,
                max: 1,
                step: 0.01,
                value: 0.5,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "scaleStartExtent", ui.value);
                    $("#startExtentLabel").text(ui.value);
                }
            });

            // Scale End Extent
            $("#scaleEndExtentSlider").slider({
                min: 0,
                max: 1,
                step: 0.01,
                value: 0.57,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "scaleEndExtent", ui.value);
                    $("#endExtentLabel").text(ui.value);
                }
            });

            // Scale Oversweep
            $("#scaleOversweepSlider").slider({
                min: 0,
                max: 100,
                value: 3,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "scaleOversweep", ui.value);
                    $("#scaleOversweepLabel").text(ui.value);
                }
            });

            // Sweep Direction
            $("#scaleOversweepDropdown").on({
                change: function (e) {
                    var sweepDir = $(this).val();
                    $("#radialgauge").igRadialGauge("option", "scaleSweepDirection", sweepDir);
                }
            });

            // Scale Brush
            $("#scaleBrushDropdown").on({
                change: function (e) {
                    var scaleColor = $(this).val();
                    $("#radialgauge").igRadialGauge("option", "scaleBrush", scaleColor);
                }
            });

            // Transiton Duration Slider
            $("#transitionDurationSlider").slider({
                min: 0,
                max: 5,
                step: 0.01,
                value: 2,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "transitionDuration", ui.value * 1000);
                    $("#transitionDurationLabel").text(ui.value);
                }
            });
        });
    </script>
</body>
</html>