Available in the Full Version
Radial Gauge - Range Settings
This sample demonstrates how to set range properties on the radial gauge.
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.
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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.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>