# BulletGraph 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 BulletGraph 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/gaugequickstartbg.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 **BulletGraph** control 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 [Target](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.BulletGraph.Target.html), [Good](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.BulletGraph.Good.html) and [Bad](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.BulletGraph.Bad.html) properties to 70, 60 and 40 respectively.
    * 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.

    ```razor
    @(Html.C1().BulletGraph()
        .Min(0).Max(100)
        .Good(60)
        .Bad(40)
        .Value(50)
        .Target(70)
        .IsReadOnly(false).Step(1).Width(500)  
        .IsAnimated(true)
    )
    ```

### 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)