Available in the Full Version
Radial Gauge - Tickmarks

This sample demonstrates using tickmarks on a radial gauge.
Options Tickmark Sizing Properties
Start Extent
0.50
End Extent
0.57
Stroke Thickness
Minor Tickmark Sizing Properties
Start Extent
0.57
End Extent
0.54
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

Show In JsFiddle
Copy to Clipboard
HTML
                    <!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>
Ignite UI for jQuery | Samples

Search Results

Radial Gauge - Tickmarks

Code View
