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.