ASP.NET MVC ArcGauge Overview

The Telerik UI ArcGauge HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI ArcGauge widget.

The ArcGauge represents a single value within a specified range on a circular arc. The component can be used to visualize metrics such as speed, temperature, or any other scalar quantity.

• Demo page for the ArcGauge HtmlHelper

Initializing the ArcGauge

The following example demonstrates how to define the ArcGauge.

 @(Html.Kendo().ArcGauge() .Name("arcGauge") // The name of the AcrGauge is mandatory. It specifies the "id" attribute of the HTML element. .Value(65) .Scale(x => x.Min(0).Max(100)) .CenterTemplate("#:value#%") )

Basic Configuration

The following example demonstrates a basic configuration of the ArcGauge component with different colors depending on the current value.

 @(Html.Kendo().ArcGauge() .Name("gauge") .Value(65) .Scale(x => x.Min(0).Max(100)) .CenterTemplate("<span style='color: #: color #;'>#: value #%</span>") .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"); }) )

Functionality and Features

• Scale—You can customize the scale that renders the values, pointers, and labels.
• Colors—Set different colors that will be applied based on the current ArcGauge value.
• Export—Explore the export options of the ArcGauge.

Next Steps

• Getting Started with the ArcGauge
• Basic Usage of the ArcGauge HtmlHelper for ASP.NET MVC (Demo)

See Also

• Visualizing Circular Arc Gauge for ASP.NET MVC (Demo)
• Knowledge Base Section