Getting Started with the ArcGauge
This guide demonstrates how to get up and running with the Kendo UI for jQuery ArcGauge.
After the completion of this guide, you will achieve the following end result:
1. Create a Div Element
First, create a <div> element on the page that will be used to initialize the component.
<div id="arc-gauge"></div>2. Initialize the ArcGauge
In this step, you will initialize the ArcGauge from the <div> element.
<div id="arc-gauge"></div>
<script>
$("#arc-gauge").kendoArcGauge();
</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 ArcGauge component.
<div id="arc-gauge"></div>
<script>
$("#arc-gauge").kendoArcGauge({
value: 63,
colors: [{
to: 50,
color: 'yellow'
}, {
from: 50,
color: 'orange'
}]
});
</script>4. Customize the Scale
The Kendo UI for jQuery ArcGauge 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 ArcGauge scale configuration options, see the ArcGauge API.
In this step, you will add scale labels and style the major and minor ticks.
<div id="arc-gauge"></div>
<script>
$("#arc-gauge").kendoArcGauge({
value: 63,
colors: [{
to: 50,
color: 'yellow'
}, {
from: 50,
color: 'lightgreen'
}],
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 ArcGauge does not render content in the center. To add content and modify it according to your preferences use the centerTemplate.
<div id="arc-gauge"></div>
<script>
$("#arc-gauge").kendoArcGauge({
value: 63,
colors: [{
to: 50,
color: 'yellow'
}, {
from: 50,
color: 'lightgreen'
}],
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'
}
},
centerTemplate: '<h2>#: value #%</h2>'
});
</script>