Available in the Full Version

Radial Gauge - Tickmarks

This sample demonstrates using tickmarks on a radial gauge.
Options Tickmark Sizing Properties
Start Extent
End Extent
Stroke Thickness

Minor Tickmark Sizing Properties
Start Extent
End Extent
Tick Count
Stroke Thickness

Brushes
Tickmark Brush
Minor Tickmark 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.

Tickmarks can be displayed at every user specified interval on a gauge. Use the table above to set the Radial Gauge control's tickmark 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>
            <strong>Tickmark Sizing Properties</strong>
				<br />
				<div class="optionContainer">
               Start Extent
					<br />
               <div id="tickmarkStartExtentSlider" class="sliderBounds"></div>
               <label id="tickmarkStartExtentLabel">0.50</label>
				</div>
				<div class="optionContainer">
                End Extent
					 <br />
                <div id="tickmarkEndExtentSlider" class="sliderBounds"></div>
                <label id="tickmarkEndExtentLabel">0.57</label>
				</div>
				<div class="optionContainer">
                Stroke Thickness
					 <br />
                <div id="tickmarkStrokeThicknessSlider" class="sliderBounds"></div>
                <label id="tickmarkStrokeThicknessLabel">3</label>
				</div>
				<br />
            <strong>Minor Tickmark Sizing Properties</strong>
				<br />
				<div class="optionContainer">
                Start Extent
					 <br />
                <div id="minorTickmarkStartExtentSlider" class="sliderBounds"></div>
                <label id="minorTickmarkStartExtentLabel">0.57</label>
				</div>
				<div class="optionContainer">
                End Extent
					 <br />
                <div id="minorTickmarkEndExtentSlider" class="sliderBounds"></div>
                <label id="minorTickmarkEndExtentSliderLabel">0.54</label>
				</div>
				<div class="optionContainer">
                Tick Count
					 <br />
                <div id="tickCountSlider" class="sliderBounds"></div>
                <label id="tickCountLabel">5</label>
				</div>
				<div class="optionContainer">
                Stroke Thickness
					 <br />
                <div id="minorTickmarkStrokeThicknessSlider" class="sliderBounds"></div>
                <label id="minorTickmarkStrokeThicknessLabel">1</label>
				</div>
				<br />
            <strong>Brushes</strong>
				<br />
				<div class="optionContainer">
                Tickmark Brush
					 <br />
                <select id="tickmarkBrushDropdown" 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">
                Minor Tickmark Brush
					 <br />
                <select id="minorTickmarkBrushDropdown" 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">
                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"
            });


            // Tickmark Start Extent
            $("#tickmarkStartExtentSlider").slider({
                min: 0,
                max: 1,
                step: 0.01,
                value: 0.5,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "tickStartExtent", ui.value);
                    $("#tickmarkStartExtentLabel").text(ui.value);
                }
            });

            // Tickmark End Extent
            $("#tickmarkEndExtentSlider").slider({
                min: 0,
                max: 1,
                step: 0.01,
                value: 0.57,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "tickEndExtent", ui.value);
                    $("#tickmarkEndExtentLabel").text(ui.value);
                }
            });

            // Tickmark Stroke Thickness
            $("#tickmarkStrokeThicknessSlider").slider({
                min: 1,
                max: 10,
                value: 3,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "tickStrokeThickness", ui.value);
                    $("#tickmarkStrokeThicknessLabel").text(ui.value);
                }
            });

            // Minor Tickmark Start Extent
            $("#minorTickmarkStartExtentSlider").slider({
                min: 0,
                max: 1,
                step: 0.01,
                value: 0.57,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "minorTickStartExtent", ui.value);
                    $("#minorTickmarkStartExtentLabel").text(ui.value);
                }
            });

            // Minor Tickmark End Extent
            $("#minorTickmarkEndExtentSlider").slider({
                min: 0,
                max: 1,
                step: 0.01,
                value: 0.54,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "minorTickEndExtent", ui.value);
                    $("#minorTickmarkEndExtentLabel").text(ui.value);
                }
            });

            // Tickmark Count
            $("#tickCountSlider").slider({
                min: 0,
                max: 10,
                value: 5,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "minorTickCount", ui.value);
                    $("#tickCountLabel").text(ui.value);
                }
            });

            // Minor Tickmark Stroke Thickness
            $("#minorTickmarkStrokeThicknessSlider").slider({
                min: 1,
                max: 10,
                value: 1,
                slide: function (event, ui) {
                    $("#radialgauge").igRadialGauge("option", "minorTickStrokeThickness", ui.value);
                    $("#minorTickmarkStrokeThicknessLabel").text(ui.value);
                }
            });

            // Tickmark Brush
            $("#tickmarkBrushDropdown").on({
                change: function (e) {
                    var tickmarkColor = $(this).val();
                    $("#radialgauge").igRadialGauge("option", "tickBrush", tickmarkColor);
                }
            });

            // Minor Tickmark Brush
            $("#minorTickmarkBrushDropdown").on({
                change: function (e) {
                    var minorTickmarkColor = $(this).val();
                    $("#radialgauge").igRadialGauge("option", "minorTickBrush", minorTickmarkColor);
                }
            });

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