ASP.NET Core CircularGauge Overview
The CircularGauge is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI CircularGauge TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI CircularGauge widget.
The CircularGauge represents a value on a circular scale. It allows you to visualize numeric values in an attractive manner that matches the other widgets on the page.
It is essentially very similar to the ArcGauge with the difference that the CircularGauge is a complete circle. There are bigger differences with RadialGauge, however, since the Radial widget is focusing on displaying a value on a scale with the help of a pointer element. Also, setting range colors on the RadialGauge happens for the scale itself, while the color ranges for the CircularGauge happen for the value fill.
Initializing the CircularGauge
Follow all the steps from the introductory article on Telerik UI for ASP.NET Core.
-
Create a new action method which renders the view.
public ActionResult Index() { return View(); } -
Add the CircularGauge.
@(Html.Kendo().CircularGauge() .Name("circularGauge") // The name of the CircularGauge is mandatory. It specifies the "id" attribute of the widget. .Value(65) .Scale(x => x.Min(0).Max(100)) .CenterTemplate("#:value#%") )<kendo-circulargauge name="circulargauge" value="65" center-template="#:value#%"> <scale min="0" max="100"> </scale> </kendo-circulargauge>
Referencing Existing Instances
To reference an existing Telerik UI CircularGauge instance, use the jQuery.data() configuration option. Once a reference is established, use the CircularGauge client-side API to control its behavior.
// Place the following after the Telerik UI CircularGauge for ASP.NET Core declaration.
<script>
$(function() {
// The Name() of the CircularGauge is used to get its client-side instance.
var gauge = $("#circularGauge").data("kendoCircularGauge");
});
</script>
Colors
The CircularGauge supports different color ranges depending on the currently active value. The gauge will then colorize the value element and fill it with the respective range color:
.Colors(colors =>
{
colors.Add().From(0).To(25).Color("#0058e9");
colors.Add().From(25).To(50).Color("#37b400");
colors.Add().From(50).To(75).Color("#ffc000");
colors.Add().From(75).To(100).Color("#f31700");
})
<colors>
<color from="0" to="25" color="#0058e9"/>
<color from="25" to="50" color="#37b400"/>
<color from="50" to="75" color="#ffc000"/>
<color from="75" to="100" color="#f31700"/>
</colors>
You can find a live sample demonstrating that here:
Scale Options
There are various Scale Settings available so you can present the gauge exactly the way you want to:
.Scale(x =>x.Labels(l=>l.Visible(true)))
<scale>
<labels visible="true"/>
</scale>
You can change the start and end angle, the appearance of the label and ticks, min and max options of the scale, and others. For the full list of options, refer to the API reference of the CircularGauge.