Available in the Full Version
Radial Gauge - Scale Settings
This sample demonstrates how to set scale in a 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 scale defines a range of values in the radial gauge. Use the table above to set the radial gauge control's scale 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;
}
.selectBounds {
width: 120px;
}
</style>
<!-- Target element for the igRadialGauge -->
<div id="radialgauge"></div>
<div>
<fieldset id="gaugeOptions">
<legend>Options</legend>
<div class="optionContainer">
Start Extent
<br />
<div id="scaleStartExtentSlider" class="sliderBounds"></div>
<label id="startExtentLabel">0.57</label>
</div>
<div class="optionContainer">
End Extent
<br />
<div id="scaleEndExtentSlider" class="sliderBounds"></div>
<label id="endExtentLabel">0.57</label>
</div>
<div class="optionContainer">
Scale Oversweep
<br />
<div id="scaleOversweepSlider" class="sliderBounds"></div>
<label id="scaleOversweepLabel">3</label>
</div>
<div class="optionContainer">
Sweep Direction
<br />
<select id="scaleOversweepDropdown" class="selectBounds">
<option value="clockwise" selected="selected">clockwise</option>
<option value="counterclockwise">counterclockwise</option>
</select>
</div>
<div class="optionContainer">
Scale Brush
<br />
<select id="scaleBrushDropdown" class="selectBounds">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="#45ADD6" selected="selected">LightBlue</option>
<option value="black">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",
scaleBrush: $("#scaleBrushDropdown").val(),
scaleBrush: "#45ADD6",
scaleStartExtent: 0.5,
scaleEndExtent: 0.57,
scaleOversweep: 3,
scaleSweepDirection: "clockwise",
});
// Scale Start Extent
$("#scaleStartExtentSlider").slider({
min: 0,
max: 1,
step: 0.01,
value: 0.5,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "scaleStartExtent", ui.value);
$("#startExtentLabel").text(ui.value);
}
});
// Scale End Extent
$("#scaleEndExtentSlider").slider({
min: 0,
max: 1,
step: 0.01,
value: 0.57,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "scaleEndExtent", ui.value);
$("#endExtentLabel").text(ui.value);
}
});
// Scale Oversweep
$("#scaleOversweepSlider").slider({
min: 0,
max: 100,
value: 3,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "scaleOversweep", ui.value);
$("#scaleOversweepLabel").text(ui.value);
}
});
// Sweep Direction
$("#scaleOversweepDropdown").on({
change: function (e) {
var sweepDir = $(this).val();
$("#radialgauge").igRadialGauge("option", "scaleSweepDirection", sweepDir);
}
});
// Scale Brush
$("#scaleBrushDropdown").on({
change: function (e) {
var scaleColor = $(this).val();
$("#radialgauge").igRadialGauge("option", "scaleBrush", scaleColor);
}
});
// 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>