Kendo Radial Gauge in jQuery

Introduction

Kendo Radial gauge is a powerful control to give a better user experience in order to understand a given range of values.

Kendo Radial Gauge

KendoRadialGauge is a function which is used to initialize the radial Gauge.

KendoRadialGauge.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script></head>
<body>
<div id="radial-gauge"></div>
</body>
</html>
<script>
$("#radial-gauge").kendoRadialGauge();
</script>

Radial Gauge in Browser

Let’s play by adding sample data to the control.

KendoRadialGauge.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script></head>
<body>
<div id="radial-gauge"></div>
</body>
</html>
<script>
$("#radial-gauge").kendoRadialGauge({
pointer: [{
value: 20,
color: "#c20000",
cap: { size: 0.15 }
}, {
value: 60,
color: "#ff7a00",
cap: { size: 0.1 }
}, {
value: 120,
color: "#ffc700"
}],
scale: {
minorUnit: 5,
startAngle: -30,
endAngle: 210,
max: 180,
labels: {
position: "inside"
},
ranges: [
{
from: 80,
to: 120,
color: "black"
}, {
from: 120,
to: 150,
color: "#b8b8b8"
}, {
from: 150,
to: 180,
color: "#f3ac32"
}
]
}
});
</script>

Pointer defines the data for the pointer in the gauge, scale defines the scale ranges in the gauge.

Radial Gauge in Browser

I hope you have learned from this blog. Your valuable feedback, questions, or comments about this blog are always welcome.