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.For example, in a Scrum/Sprint application, we may want to have a team dashboard that look like this on tablets and desktops:
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:
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:
Curious to learn more? You can find out more about Rollbase here, or jump right into a free trial below.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.Learn More
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.