ASP.NET Core RadialGauge Overview
The RadialGauge 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 RadialGauge TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI RadialGauge widget.
The RadialGauge represents values on a radial arc.
Initializing the RadialGauge
The following example demonstrates how to initialize the RadialGauge.
@(Html.Kendo().RadialGauge()
.Name("radialGauge") // The name of the RadialGauge is mandatory. It specifies the "id" attribute of the widget.
.Scale(scale => scale
.Min(0) // Set the min value of the RadialGauge.
.Max(200) // Set the min value of the RadialGauge.
)
.Pointer(pointer => pointer
.Value(10) // Set the value of the RadialGauge.
)
)
<kendo-radialgauge name="radialGauge">
<radialgauge-pointers>
<pointer value="10"></pointer>
</radialgauge-pointers>
<scale min="0" max="200">
</scale>
</kendo-radialgauge>
Referencing Existing Instances
To reference an existing Kendo UI RadialGauge instance, use the jQuery.data() configuration option. Once a reference is established, use the RadialGauge client-side API to control its behavior.
// Place the following after the RadialGauge for ASP.NET Core declaration.
<script>
$(function() {
// The Name() of the RadialGauge is used to get its client-side instance.
var gauge = $("#radialGauge").data("kendoRadialGauge");
});
</script>
Functionality and Features
- Scale—You can control how the scale of the Radial Gauge renders the values, pointers and labels.
-
Pointers—The
Pointersof the Telerik UI RadialGauge for ASP.NET Core are the values that will be marked on the scale. - Export—You can export the Radial Gauge as an image, SVG, or a PDF file.
Next Steps
- Getting Started with Radial Gauge
Basic Usage of the RadialGauge HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the RadialGauge TagHelper for ASP.NET Core (Demo)