# RadialGauge Quick Start Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation. ## Content The quick start guides you through the steps of adding a RadialGauge control to your MVC web application and set its value. For information on how to add a control, See [Adding controls](/componentone/docs/mvc/online-mvc/addingcontrols). To accomplish this, follow these steps: ![](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/radialgaugeqs.png) ### Create an MVC Application Create a new MVC application using the ComponentOne or VisualStudio templates. For more information about creating an MVC application, see [Configuring your MVC Application](/componentone/docs/mvc/online-mvc/CreatingaNewProject) topic. ### Add a new Controller and View **Add a new Controller**: 1. In the **Solution Explorer**, right click the folder **Controllers.** 2. From the context menu, select **Add | Controller**. The **Add Scaffold** dialog appears. 3. Complete the following steps in the **Add Scaffold** dialog: 1. Select **MVC 5 Controller - Empty** template. 2. Set name of the controller (for example: `Default1Controller`). 3. Click **Add**. 4. A new controller is added to the application. **Add a View for the controller**: 1. From the **Solution Explorer**, expand the folder **Controllers** and double click the controller (for example: `Default1Controller`) to open it. 2. Place the cursor inside the method `Index()`. 3. Right click and select **Add View**. The **Add View** dialog appears. 4. In the **Add View** dialog, verify that the View name is **Index** and View engine is **Razor (CSHTML).** 5. Click **Add**. A view is added for the controller. **Add a Model** Models are required to fetch data for the controls. 1. In the **Solution Explorer**, right click the folder **Models** and select **Add | Class**. The **Add New Item** dialog appears. 2. In the **New Item** dialog, set the name of the class (for example: `Class1.cs`). 3. Click **Add**. A new class is added to the application. ### Add the Control * From the **Solution Explorer**, expand the folder **Views**. * Double click `Index.cshtml` to open it.2. Replace the default code of the `Index.cshtml` file with the code given below to initialize a **RadialGauge** and set the following properties: * Set the gauge [Value](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Gauge.Value.html) to **35**. The [Value](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Gauge.Value.html) property denotes the gauge's current value. * Set the [Min](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Gauge.Min.html) and [Max](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Gauge.Max.html) properties to 0 and 100 respectively. The [Min](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Gauge.Min.html) and [Max](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Gauge.Max.html) properties specify the range of the gauge. You can add multiple ranges to a single gauge. * Set the Gauge's [isReadOnly](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Gauge.IsReadOnly.html) property to **False**. The [isReadOnly](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Gauge.IsReadOnly.html) specifies whether a user can edit the gauge's [Value](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Gauge.Value.html) using a keyboard or a mouse. * Set the [StartAngle](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.RadialGauge.StartAngle.html) property to **-20**, and [SweepAngle](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.RadialGauge.SweepAngle.html) property to **220**. The [StartAngle](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.RadialGauge.StartAngle.html) property specifies the RadialGauge's starting angle and the [SweepAngle](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.RadialGauge.SweepAngle.html) property specifies an angle representing the length of the RadialGauge's arc. * Set the [AutoScale](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.RadialGauge.AutoScale.html) property to **True**. The [AutoScale](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.RadialGauge.AutoScale.html) property automatically scales the radial gauge to fill its containing element. * Set the **ShowTicks** and **ShowTickText** properties to **False**. The ShowTicks property determines whether the gauge should display tick marks at each step value and the ShowTickText property determines whether the gauge should display the text value of each tick mark. * Set the **NeedleShape** property to **NeedleShape.Rectangle**. This property specifies the shape of the gauge's needle element. * Set the **NeedleLength** property to **NeedleLength.Middle**. This property specifies the length of the gauge's needleElement with respect to the pointer range.
```razor @(Html.C1().RadialGauge() .Value(35) .Width(500) .Height(200) .Min(0).Max(100) .StartAngle(-20) .SweepAngle(220) .ShowTicks(false) .ShowTickText(false) .ShowText(ShowText.None) .NeedleShape(NeedleShape.Rectangle) .NeedleLength(NeedleLength.Middle) .AutoScale(true) .Ranges(items => items .Add(item => item.Min(0).Max(40).Color(System.Drawing.Color.Red)) .Add(item => item.Min(40).Max(80).Color(System.Drawing.Color.Yellow)) .Add(item => item.Min(80).Max(100).Color(System.Drawing.Color.Green)) ) ) ``` ### Build and Run the Project 1. Click **Build | Build Solution** to build the project. 2. Press **F5** to run the project. > type=note > Append the folder name and view name to the generated URL (for example: http://localhost:1234/**Default1/index**) in the address bar of the browser to see the view. Or link the view to the home page. ## See Also [Gauge Types](/componentone/docs/mvc/online-mvc/workwithcontrols/Gauge/GaugeTypes)