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
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Untitled</title>
  7. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
  8. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
  9. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
  10. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">
  12. <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  13. <script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
  14. <script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
  15. <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script></head>
  16. <body>
  17. <div id="radial-gauge"></div>
  18. </body>
  19. </html>
  20. <script>
  21. $("#radial-gauge").kendoRadialGauge();
  22. </script>
Radial Gauge in Browser
Let’s play by adding sample data to the control.

KendoRadialGauge.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Untitled</title>
  7. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
  8. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
  9. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
  10. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">
  12. <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  13. <script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
  14. <script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
  15. <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script></head>
  16. <body>
  17. <div id="radial-gauge"></div>
  18. </body>
  19. </html>
  20. <script>
  21. $("#radial-gauge").kendoRadialGauge({
  22. pointer: [{
  23. value: 20,
  24. color: "#c20000",
  25. cap: { size: 0.15 }
  26. }, {
  27. value: 60,
  28. color: "#ff7a00",
  29. cap: { size: 0.1 }
  30. }, {
  31. value: 120,
  32. color: "#ffc700"
  33. }],
  34. scale: {
  35. minorUnit: 5,
  36. startAngle: -30,
  37. endAngle: 210,
  38. max: 180,
  39. labels: {
  40. position: "inside"
  41. },
  42. ranges: [
  43. {
  44. from: 80,
  45. to: 120,
  46. color: "black"
  47. }, {
  48. from: 120,
  49. to: 150,
  50. color: "#b8b8b8"
  51. }, {
  52. from: 150,
  53. to: 180,
  54. color: "#f3ac32"
  55. }
  56. ]
  57. }
  59. });
  60. </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.