With Rollbase and Kendo UI, it's easy to create beautiful low-code apps. Learn how to easily create custom gauges with minimal programming. In a previous blog post, we saw how to create powerful Rollbase dashboards with Kendo UI charts (and without much code).
Today, we will explore how to create radial gauges that can be exploited in dashboards.
And like this on smartphones:
Note: We will use the term annulus to describe the gauge shape in this post.
We will work in the page designer. The outline of the work is:
Finally, bind the div element in each column to a Kendo UI Radial Gauge.
Here is the code to initialize the Kendo UI Radial Gauge to render as an annulus:
01.
$(
"#gaugePercentPointsCompleted"
).kendoRadialGauge({
02.
pointer: [],
03.
scale: {
04.
rangeSize: 20,
//To configure the width of range
05.
startAngle: 90,
06.
endAngle: 450,
07.
max: 100,
//Max value of scale , in our case will be 100
08.
labels: { visible:
false
},
09.
majorTicks: { visible:
10.
minorTicks: { visible:
11.
ranges:
12.
[{
13.
from: 0,
14.
to: {!Percent_Done__Dev_},
15.
color:
"#008000"
16.
}]
17.
18.
});
The Kendo UI Gauge can be configured to render multiple values as in the following example:
The only difference, code-wise, is that we specify multiple ranges like this:
ranges: [{
to: 73,
"green"
{
from: 73,
to: 87,
"darkorange"
from: 87,
to: 100,
"red"
}
Curious to learn more? You can find out more about Rollbase here, or jump right into a free trial below.
Try Now
Thierry Ciot is a Software Architect on the Corticon Business Rule Management System. Ciot has gained broad experience in the development of products ranging from development tools to production monitoring systems. He is now focusing on bringing Business Rule Management to Javascript and in particular to the serverless world where Corticon will shine. He holds two patents in the memory management space.
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and Privacy Policy for California Residents and uses it for the purposes stated in that policy.
You have the right to request deletion of your Personal Information at any time.
You can also ask us not to pass your Personal Information to third parties here: Do Not Sell My Info
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Copyright © 2021 Progress Software Corporation and/or its subsidiaries or affiliates.All Rights Reserved.
Progress, Telerik, Ipswitch, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.