Getting Started with the CircularGauge
This guide demonstrates how to get up and running with the Kendo UI for jQuery CircularGauge.
After the completion of this guide, you will achieve the following end result:
<div id="circular-gauge"></div>
<script>
$("#circular-gauge").kendoCircularGauge({
value: 223,
colors: [{
to: 180,
color: 'pink'
}, {
from: 180,
color: 'yellow'
}],
scale: {
min: 0,
max: 360,
minorUnit: 5,
majorUnit: 45,
labels: {
visible: true,
color: 'darkgreen',
template: "#: value #",
position: "outside"
},
minorTicks:{
visible: true,
size: 8,
color: 'green'
},
majorTicks:{
visible: true,
size: 15,
color: 'red'
}
},
centerTemplate: '<h2><i>#: value #</i></h2>'
});
</script>
1. Create a Div Element
First, create a <div> element on the page that will be used to initialize the component.
<div id="circular-gauge"></div>
2. Initialize the CircularGauge
In this step, you will initialize the CircularGauge from the <div> element.
<div id="circular-gauge"></div>
<script>
$("#circular-gauge").kendoCircularGauge();
</script>
3. Specify the Colors
Here, you will specify the colors of the value pointer. The color of the pointer will change based on the current value of the CircularGauge component.
<div id="circular-gauge"></div>
<script>
$("#circular-gauge").kendoCircularGauge({
value: 223,
colors: [{
to: 180,
color: 'pink'
}, {
from: 50,
color: 'yellow'
}]
});
</script>
4. Customize the Scale
The Kendo UI for jQuery CircularGauge 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 CircularGauge scale configuration options, see the CircularGauge API.
In this step, you will add scale labels and style the major and minor ticks.
<div id="circular-gauge"></div>
<script>
$("#circular-gauge").kendoCircularGauge({
value: 223,
colors: [{
to: 180,
color: 'pink'
}, {
from: 50,
color: 'yellow'
}],
scale: {
min: 10,
max: 80,
minorUnit: 5,
labels: {
visible: true,
color: 'darkgreen',
template: "#: value #",
position: "outside"
},
minorTicks:{
visible: true,
size: 8,
color: 'green'
},
majorTicks:{
visible: true,
size: 15,
color: 'red'
}
}
});
</script>
5. Add Content in the Center
By default, the CircularGauge does not render content in the center. To add content and modify it according to your preferences, use the centerTemplate.
<div id="circular-gauge"></div>
<script>
$("#circular-gauge").kendoCircularGauge({
value: 223,
colors: [{
to: 180,
color: 'pink'
}, {
from: 180,
color: 'yellow'
}],
scale: {
min: 0,
max: 360,
minorUnit: 5,
majorUnit: 45,
labels: {
visible: true,
color: 'darkgreen',
template: "#: value #",
position: "outside"
},
minorTicks:{
visible: true,
size: 8,
color: 'green'
},
majorTicks:{
visible: true,
size: 15,
color: 'red'
}
},
centerTemplate: '<h2><i>#: value #</i></h2>'
});
</script>