# Quick Start: Add data to FlexPie

## Content

This section describes how to add a [FlexPie](/componentone/api/xamarin/online-forms/dotnet-api/C1.Xamarin.Forms.Chart/C1.Xamarin.Forms.Chart.FlexPie.html) control to your portable or shared app and add data to it. For information on how to add Xamarin components in C# or XAML, see [Adding Xamarin Components using C#](/componentone/docs/xamarin/online-forms/overview/AddingComponentstoanApp) or [Adding XamarinComponents using XAML](/componentone/docs/xamarin/online-forms/overview/AddComponentsusingXAML).

This topic comprises of three steps:

* [Step 1: Create a data source for FlexPie](/componentone/docs/xamarin/online-forms/controls/flexpieOverview/flexpieQuickStart#step-1-create-a-data-source-for-flexpie)
* [Step 2: Add a FlexPie control](/componentone/docs/xamarin/online-forms/controls/flexpieOverview/flexpieQuickStart#step-2-add-flexpie-control)
* [Step 3: Run the Project](/componentone/docs/xamarin/online-forms/controls/flexpieOverview/flexpieQuickStart#step-3-run-the-project)

The following image shows how the FlexPie appears after completing the steps above:

![](https://cdn.mescius.io/document-site-files/images/fb6b46a2-eac0-487c-84c3-5e1b4c7b1348/images/piequickstart.png)

### Step 1: Create a data source for FlexPie

The following classes serve as a data source for the FlexPie control:

```csharp
class FlexPieDataSource
{
    private List<FruitEntity> entityList;
    public List<FruitEntity> Data
    {
        get { return entityList; }
    }
    public FlexPieDataSource()
    {
        entityList = new List<FruitEntity>();
        string[] fruits = new string[] { "Oranges", "Apples", "Pears", "Bananas", "Pineapples" };
        Random random = new Random();
        for (int i = 0; i < fruits.Length; i++)
        {
            decimal value = (decimal)random.NextDouble() * 100;
            entityList.Add(new FruitEntity(fruits[i], value));
        }   
    }
}
class FruitEntity
{
    public string Name { get; set; }
    public decimal Value { get; set; }
    public FruitEntity(string name, decimal value)
    {
        this.Name = name;
        this.Value = value;
    }
}
```

### Step 2: Add FlexPie control

Complete the following steps to initialize a FlexPie control in C# or XAML.

#### In Code

1. Add a new class (for example QuickStart.cs) to your Portable or Shared project and include references as shown below:

    ```csharp
    using Xamarin.Forms;
    using C1.Xamarin.Forms.Chart;
    ```
2. Instantiate a FlexPie control in a new method, GetFlexPie().

    ```csharp
    public static FlexPie GetFlexPie()
    {
        FlexPie chart = new FlexPie();
        FlexPieDataSource ds = new FlexPieDataSource();
        chart.BindingName = "Name";
        chart.Binding = "Value";
        chart.ItemsSource = ds.Data;
        return chart;
    }
    ```

#### In XAML

1. Add a new Content Page (for example FlexPieQuickStart.xaml) to your Portable or Shared project and modify the \<ContentPage> tag to include the following reference:

    ```xml
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:c1="clr-namespace:C1.Xamarin.Forms.Chart;assembly=C1.Xamarin.Forms.Chart"
                 x:Class="QuickstartChart.FlexPieQuickStart">
    ```
2. Initialize a FlexPie control by adding the markup for the control between the \<ContentPage> \</ContentPage> tags inside the \<StackLayout>\</StackLayout> tags, as shown below:

    ```xml
    <StackLayout>
        <c1:FlexPie x:Name="chart" ItemsSource="{Binding Data}" BindingName="Name" 
                    Binding="Value" Grid.Row="1" Grid.ColumnSpan="2" VerticalOptions="FillAndExpand">
      </c1:FlexPie>
      </StackLayout>
    ```
3. In the **Solution Explorer**, expand the FlexPieQuickStart.xaml node and open FlexPieQuickStart.xaml.cs to open the C# code behind.
4. In the FlexPieQuickStart() class constructor, set a new instance of FlexPieDataSource as a BindingContext for the FlexPie.
<br>
    The following code shows what the FlexPieQuickStart() class constructor looks like after completing this step.

    ```csharp
    public FlexPieQuickStart()
    {
       InitializeComponent();
       chart.BindingContext = new FlexPieDataSource();
    }
    ```

### Step 3: Run the Project

1. In the **Solution Explorer**, double click App.xaml.cs to open it.
2. Complete the following steps to display the FlexPie control.
    * **To return a C# class**: In the class constructor App(), set a new ContentPage as the MainPage and assign the control to the ContentPage's Content by invoking the GetFlexPie() method defined in the previous procedure, [Step 2: Add a FlexPie Control](/componentone/docs/xamarin/online-forms/controls/flexpieOverview/flexpieQuickStart#step-2-add-flexpie-control).
<br>
        The following code shows the class constructor App`()` after completing steps above.

        ```csharp
        public App()
        {
            // The root page of your application
            MainPage = new ContentPage
            {
                Content = QuickStart.GetFlexPie()
            };
        }
        ```
    * **To return a Content Page**: In the class constructor App(), set the Forms Xaml Page FlexPieQuickStart as the MainPage.
<br>
        The following code shows the class constructor App() after completing this step.

        ```csharp
        public App()
        {
            // The root page of your application
            MainPage = new FlexPieQuickStart();
        }
        ```


3. Some additional steps are required to run the iOS and UWP apps:
    * **iOS App**:
        1. In the **Solution Explorer**, double click AppDelegate.cs inside YourAppName.iOS project, to open it.
        2. Add the following code to the FinishedLaunching() method.

            ```csharp
            C1.Xamarin.Forms.Chart.Platform.iOS.FlexPieRenderer.Init();
            ```
    * **UWP App**:
        1. In the **Solution Explorer**, expand MainPage.xaml.
        2. Double click MainPage.xaml.cs to open it.
        3. Add the following code to the class constructor.

            ```csharp
            C1.Xamarin.Forms.Chart.Platform.UWP.FlexPieRenderer.Init();
            ```
        4. (Optional) In case you compile your UWP application in **Release** mode, you need to explicitly add the following code to the **OnLaunched** method in your **App.xaml.cs** to include the correct assemblies within your application.

            ```csharp
            var assembliesToInclude = new List<Assembly>();
            assembliesToInclude.Add(typeof(C1.Xamarin.Forms.Chart.Platform.UWP.FlexChartRenderer)
            .GetTypeInfo().Assembly);
            assembliesToInclude.Add(typeof(C1.UWP.Chart.FlexChart).GetTypeInfo().Assembly);
            Xamarin.Forms.Forms.Init(e, assembliesToInclude);
            ```
4. Press **F5** to run the project.