Getting Started with the RadialGauge
This guide demonstrates how to get up and running with the Kendo UI for jQuery RadialGauge.
After the completion of this guide, you will achieve the following end result:
<div id="radial-gauge"></div>
<script>
$("#radial-gauge").kendoRadialGauge({
pointer: [
{
value: -38,
color: "blue"
},
{
value: 22,
color: "#F6466C"
}
],
scale: {
ranges: [{
to:-40,
color: '#6FC2D5'
}, {
from: -40,
to: 0,
color: '#97E5EE'
},{
from: 0,
to: 40,
color: '#FAB0C0'
},{
from: 40,
color: '#F71848'
}],
min: -50,
max: 50,
minorUnit: 5,
majorUnit: 10,
labels: {
visible: true,
color: 'darkblue',
position: "outside",
template: '#: value #'
},
minorTicks:{
visible: true,
size: 8,
color: 'blue'
},
majorTicks:{
visible: true,
size: 15,
color: 'red'
}
}
});
</script>
1. Create a Div Element
First, create a <div> element on the page that will be used to initialize the component.
<div id="radial-gauge"></div>
2. Initialize the RadialGauge
In this step, you will initialize the RadialGauge from the <div> element.
<div id="radial-gauge"></div>
<script>
$("#radial-gauge").kendoRadialGauge();
</script>
3. Add the Pointers
The RadialGauge allows you to add multiple pointers. In this step, you will:
- Add two pointers.
- Configure the
valueandcolorof the pointers. - Specify the
colorsof the value pointer. The color of the pointer will change based on the current value of the RadialGauge component.
<div id="radial-gauge"></div>
<script>
$("#radial-gauge").kendoRadialGauge({
pointer: [
{
value: -38,
color: "blue"
},
{
value: 22,
color: "#F6466C"
}
]
});
</script>
4. Customize the Scale
The Kendo UI for jQuery RadialGauge provide multiple configuration option that can be used to customize the appearance of the scales. You can set the intervals between the units, change the colors of the minor and major ticks, set margins, border colors, etc. To see the full list of the RadialGauge scale configuration option open the RadialGauge API. The Kendo UI for jQuery RadialGauge provides multiple configuration options that you can use to customize the appearance of the scales. You can:
- Set the intervals between the units.
- Change the colors of the minor and major ticks.
-
Set margins, border colors, etc.
To see the full list of the RadialGauge scale configuration options, see the RadialGauge API.
In this step, you will add scale labels and style the major and minor ticks.
<div id="radial-gauge"></div>
<script>
$("#radial-gauge").kendoRadialGauge({
pointer: [
{
value: -38,
color: "blue"
},
{
value: 22,
color: "#F6466C"
}
],
scale: {
min: -50,
max: 50,
minorUnit: 5,
majorUnit: 10,
labels: {
visible: true,
color: 'darkblue',
position: "outside",
template: '#: value #'
},
minorTicks:{
visible: true,
size: 8,
color: 'blue'
},
majorTicks:{
visible: true,
size: 15,
color: 'red'
}
}
});
</script>
5. Customize the Scale Colors
Here, you will specify the colors of the scale ranges.
<div id="radial-gauge"></div>
<script>
$("#radial-gauge").kendoRadialGauge({
pointer: [
{
value: -38,
color: "blue"
},
{
value: 22,
color: "#F6466C"
}
],
scale: {
ranges: [{
to:-40,
color: '#6FC2D5'
}, {
from: -40,
to: 0,
color: '#97E5EE'
},{
from: 0,
to: 40,
color: '#FAB0C0'
},{
from: 40,
color: '#F71848'
}],
min: -50,
max: 50,
minorUnit: 5,
majorUnit: 10,
labels: {
visible: true,
color: 'darkblue',
position: "outside",
template: '#: value #'
},
minorTicks:{
visible: true,
size: 8,
color: 'blue'
},
majorTicks:{
visible: true,
size: 15,
color: 'red'
}
}
});
</script>