Post
Ask Question

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 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Untitled</title>  
  6.   
  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">  
  11.   
  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>  
  6.   
  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">  
  11.   
  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.               }  
  58.     
  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.
Next Recommended Reading Get Column Name Of The Selected Cell In Kendo Grid Using jQuery