Controls > FlexPie > Quick Start: Add data to FlexPie |
This section describes how to add a FlexPie 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# or Adding XamarinComponents using XAML.
This topic comprises of three steps:
The following image shows how the FlexPie appears after completing the steps above:
The following classes serve as a data source for the FlexPie control:
C# |
Copy Code |
---|---|
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; } } |
Complete the following steps to initialize a FlexPie control in C# or XAML.
C# |
Copy Code |
---|---|
using Xamarin.Forms; using C1.Xamarin.Forms.Chart; |
C# |
Copy Code |
---|---|
public static FlexPie GetFlexPie() { FlexPie chart = new FlexPie(); FlexPieDataSource ds = new FlexPieDataSource(); chart.BindingName = "Name"; chart.Binding = "Value"; chart.ItemsSource = ds.Data; return chart; } |
XAML |
Copy Code |
---|---|
<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"> |
XAML |
Copy Code |
---|---|
<StackLayout> <c1:FlexPie x:Name="chart" ItemsSource="{Binding Data}" BindingName="Name" Binding="Value" Grid.Row="1" Grid.ColumnSpan="2" VerticalOptions="FillAndExpand"> </c1:FlexPie> </StackLayout> |
The following code shows what the FlexPieQuickStart() class constructor looks like after completing this step.
C# |
Copy Code |
---|---|
public FlexPieQuickStart() { InitializeComponent(); chart.BindingContext = new FlexPieDataSource(); } |
The following code shows the class constructor App()
after completing steps above.
C# |
Copy Code |
---|---|
public App() { // The root page of your application MainPage = new ContentPage { Content = QuickStart.GetFlexPie() }; } |
The following code shows the class constructor App() after completing this step.
C# |
Copy Code |
---|---|
public App() { // The root page of your application MainPage = new FlexPieQuickStart(); } |
C# |
Copy Code |
---|---|
C1.Xamarin.Forms.Chart.Platform.iOS.FlexPieRenderer.Init(); |
C# |
Copy Code |
---|---|
C1.Xamarin.Forms.Chart.Platform.UWP.FlexPieRenderer.Init(); |