ASP.NET Core ArcGauge Overview

The ArcGauge 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.

Download Free Trial

The Telerik UI ArcGauge TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI ArcGauge widget.

The ArcGauge represents a value on a circular arc.

• Demo page for the ArcGauge HtmlHelper

• Demo page for the ArcGauge TagHelper

Initializing the ArcGauge

1. Follow all the steps from the introductory article on Telerik UI for ASP.NET Core.

2. Create a new action method which renders the view.

   public ActionResult Index()
   {
       return View();
   }
   

3. Add the ArcGauge.

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

       <kendo-arcgauge name="arcGauge" center-template="#:value#%" value="65">
           <scale min="0" max="100">
           </scale>
       </kendo-arcgauge>
   

Referencing Existing Instances

To reference an existing Telerik UI ArcGauge instance, use the jQuery.data() configuration option. Once a reference is established, use the ArcGauge client-side API to control its behavior.

// Place the following after your Telerik UI ArcGauge for ASP.NET Core declaration.
<script>
    $(function() {
        // The Name() of the ArcGauge is used to get its client-side instance.
        var gauge = $("#arcGauge").data("kendoArcGauge");
    });
</script>

See Also

• Basic Usage of the ArcGauge HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the ArcGauge TagHelper for ASP.NET Core (Demo)

• Server-Side API