Available in the Full Version
Radial Gauge - Label Settings
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample demonstrates how to configure the Radial Gauge control's Label settings. Use the slider to see how the labelExtent and labelInterval properties affect the Label.
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.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/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">
Label Extent
<br />
<div id="labelExtentSlider" class="sliderBounds"></div>
<label id="labelExtentLabel">0.7</label>
</div>
<div class="optionContainer">
Label Interval
<br />
<div id="labelIntervalSlider" class="sliderBounds"></div>
<label id="labelIntervalLabel">10</label>
</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",
value: "10"
});
// Label Extent
$("#labelExtentSlider").slider({
min: 0,
max: 1,
step: 0.01,
value: 0.7,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "labelExtent", ui.value);
$("#labelExtentLabel").text(ui.value);
}
});
// Label Interval
$("#labelIntervalSlider").slider({
min: 0,
max: 100,
value: 10,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "labelInterval", ui.value);
$("#labelIntervalLabel").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);
}
});
});
</script>
</body>
</html>