# BulletGraph Quick Start

## Content



This section describes how to add a [C1BulletGraph](/componentone/docs/xamarin/online-ios/) control to your iOS app and set its value. For information on how to add Xamarin controls, see [Creating a New Xamarin.iOS App](/componentone/docs/xamarin/online-ios/overview/CreatingaNewXamarin.iOSApp).

This topic comprises of three steps:

*   [Step 1: Add a BulletGraph control](/componentone/docs/xamarin/online-ios/controls/gaugeOverview/quick-start-add-and-configure/gaugeQuickStartBulletGraph#step-1-add-a-bulletgraph-control)
*   [Step 2: Run the Application](/componentone/docs/xamarin/online-ios/controls/gaugeOverview/quick-start-add-and-configure/gaugeQuickStartBulletGraph#step2)

The following image shows how the BulletGraph appears, after completing the steps above.

![](https://cdn.mescius.io/document-site-files/images/1398d806-ac3c-4763-a9b3-2c7a2f5b49fb/images/gaugequickstartbg.png)

### Step 1: Add a BulletGraph control

The [value](/componentone/docs/xamarin/online-ios/) property denotes the value of the Gauge. Multiple ranges can be added to a single Gauge and the position of the range is defined by the [min](/componentone/docs/xamarin/online-ios/) and [max](/componentone/docs/xamarin/online-ios/) properties of the range. If you set the Gauge's [isReadOnly](/componentone/docs/xamarin/online-ios/) property to false, then the user is be able to edit the value by tapping on the Gauge.


> type=note
> **Note**: The origin property can be used to change the origin of the BulletGraph pointer. By default, the origin is set to 0.

Complete the following steps to initialize a BulletGraph control.

#### Add a BulletGraph control in View

1.  In the **Project Navigator**, click `MainStoryboard` to open the storyboard editor.
2.  In the right-most pane of the storyboard editor, click ![XCode_Identity Inspector Icon](https://cdn.mescius.io/document-site-files/images/1398d806-ac3c-4763-a9b3-2c7a2f5b49fb/images/identityinspectoricon.png) icon in the toolbar to open the **Identity inspector**.
3.  Under **Custom Class**, change the class from **UI View** to **BulletGraph** using drop-down.

#### Initialize the BulletGraph control in Code

To initialize the BulletGraph control, open the ViewController.cs file from the Project Navigator and replace its content with the code below. This overrides the **viewDidLoad** method of the View controller in order to initialize BulletGraph.

```csharp
using C1.iOS.Gauge;
using CoreGraphics;
using System;
using UIKit;
namespace GaugeTest
{
    public partial class ViewController : UIViewController
    {
        public ViewController(IntPtr handle) : base(handle)
        {        }
        private const double DefaultValue = 25;
        private const double DefaultMin = 0;
        private const double DefaultMax = 100;
        C1BulletGraph bulletGraph;
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            this.EdgesForExtendedLayout = UIRectEdge.None;
            bulletGraph = new C1BulletGraph();
            bulletGraph.Bad = 20;
            bulletGraph.Good = 75;
            bulletGraph.Target = 70;
            View.BackgroundColor = bulletGraph.BackgroundColor = UIColor.White;
            this.Add(bulletGraph);
        }
        public override void ViewDidLayoutSubviews()
        {
            base.ViewDidLayoutSubviews();
            bulletGraph.Frame = new CGRect(this.View.Frame.X, this.View.Frame.Height / 3,
                         this.View.Frame.Width, this.View.Frame.Height / 6);
        }
    }
}
```

### Step 2: Run the Application

Press **F5** to run the application.

## See Also

[Gauge Types](/componentone/docs/xamarin/online-ios/controls/gaugeOverview/gaugeTypes)