Available in the Full Version

Radial Gauge - Range Settings

This sample demonstrates how to set range properties on the radial gauge.
Options
Inner Start Extent
Inner End Extent
Outer Start Extent
Outer End Extent
Start Value
End Value
Transition Duration
Brush
Outline Brush

This sample is designed for a larger screen size.

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

A range is a visual element that highlights a specified range of values on a scale. Use the table above to set the Radial Gauge control's range 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;
    	}
    </style>

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

    <div>
        <fieldset id="gaugeOptions">
            <legend>Options</legend>
				<div class="optionContainer">
               Inner Start Extent
					<br />
               <div id="innerStartExtentSlider" class="sliderBounds"></div>
               <label id="innerStartExtentLabel">0.5</label>
				</div>
				<div class="optionContainer">
               Inner End Extent
					<br />
               <div id="innerEndExtentSlider" class="sliderBounds"></div>
               <label id="innerEndExtentLabel">0.5</label>
				</div>
				<div class="optionContainer">
               Outer Start Extent
					<br />
               <div id="outerStartExtentSlider" class="sliderBounds"></div>
               <label id="outerStartExtentLabel">0.72</label>
				</div>
				<div class="optionContainer">
               Outer End Extent
					<br />
               <div id="outerEndExtentSlider" class="sliderBounds"></div>
               <label id="outerEndExtentLabel">.78</label>
				</div>
				<div class="optionContainer">
               Start Value
					<br />
               <div id="startValueSlider" class="sliderBounds"></div>
               <label id="startValueLabel">70</label>
				</div>
				<div class="optionContainer">
               End Value
               <div id="endValueSlider" class="sliderBounds"></div>
               <label id="endValueLabel">100</label>
				</div>
            <div class="optionContainer">
                Transition Duration
                <br />
                <div id="transitionDurationSlider" class="sliderBounds"></div>
                <label id="transitionDurationLabel">2</label>
            </div>
            <div class="optionContainer">
                Brush
                <br />
                <select id="brushDropdown" class="selectBounds">
                    <option value="red">Red</option>
                    <option value="blue">Blue</option>
                    <option value="green">Green</option>
                    <option value="yellow">Yellow</option>
                    <option value="black" selected="selected">Black</option>
                </select>
            </div>
            <div class="optionContainer">
                Outline Brush
                <br />
                <select id="outlineBrushDropdown" class="selectBounds">
                    <option value="red">Red</option>
                    <option value="blue">Blue</option>
                    <option value="green">Green</option>
                    <option value="yellow">Yellow</option>
                    <option value="black" selected="selected">Black</option>
                </select>
            </div>

        </fieldset>
    </div>

    <script>

        $(function() {
            $("#radialgauge").igRadialGauge({
                height: "350px",
                width: "100%",
                transitionDuration: "1500",
                ranges: [{
                    name: "range1",
                    brush: "rgba(164, 189, 41, 1)",
                    startValue: "70",
                    endValue: "100",
                    outerStartExtent: "0.55",
                    outerEndExtent: "0.65"
                }]
            });


            // Inner Start Extent
            $("#innerStartExtentSlider").slider({
                min: 0,
                max: 1,
                step: 0.01,
                value: 0.5,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", innerStartExtent: ui.value }]);
                    $("#innerStartExtentLabel").text(ui.value);
                }
            });

            // Inner End Extent
            $("#innerEndExtentSlider").slider({
                min: 0,
                max: 1,
                step: 0.01,
                value: 0.5,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", innerEndExtent: ui.value }]);
                    $("#innerEndExtentLabel").text(ui.value);
                }
            });

            // Outer Start Extent
            $("#outerStartExtentSlider").slider({
                min: 0,
                max: 1,
                step: 0.01,
                value: 0.72,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", outerStartExtent: ui.value }]);
                    $("#outerStartExtentLabel").text(ui.value);
                }
            });

            // Outer End Extent
            $("#outerEndExtentSlider").slider({
                min: 0,
                max: 1,
                step: 0.01,
                value: 0.78,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", outerEndExtent: ui.value }]);
                    $("#outerEndExtentLabel").text(ui.value);
                }
            });

            // Start Value
            $("#startValueSlider").slider({
                min: 0,
                max: 100,
                value: 70,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", startValue: ui.value }]);
                    $("#startValueLabel").text(ui.value);
                }
            });

            // End Value
            $("#endValueSlider").slider({
                min: 0,
                max: 100,
                value: 100,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", endValue: ui.value }]);
                    $("#endValueLabel").text(ui.value);
                }
            });

            // 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);
                }
            });
            
            // Brush
            $("#brushDropdown").on({
                change: function (e) {
                    var rangeColor = $(this).val();
                    $("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", brush: rangeColor }]);
                }
            });
            
            // Outline Brush
            $("#outlineBrushDropdown").on({
                change: function (e) {
                    var outlineColor = $(this).val();
                    $("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", outline: outlineColor }]);
                }
            });
        });

    </script>
</body>
</html>