This quick start is intended to guide you through a step-by-step process of creating a simple FlexRadar application and running the same in Visual Studio.

To quickly get started with FlexRadar and observe how it appears on running the application, follow these steps:

1. Add FlexRadar to the Application
2. Bind FlexRadar to the Data Source
3. Run the Application

The following image displays how a basic FlexRadar appears after completing the steps mentioned above.

Step 1: Add FlexRadar to the Application

1. Create a UWP Application in Visual Studio.
2. Drag and drop the C1FlexRadar control from the Toolbox to the MainPage.
   The .dll files which are automatically added to the application, are as follows:
   
   • C1.UWP.dll
   • C1.UWP.DX.dll
   • C1.UWP.FlexChart.dll
     
     
   The XAML markup resembles the following code in the <Grid></Grid> tags.
   
   • XAML

   • XAML

   <Chart:C1FlexRadar HorizontalAlignment="Left" 
                      Height="100" 
                      Margin="0" 
                      VerticalAlignment="Top" 
                      Width="100"/>
   

Step 2: Bind FlexRadar to the Data Source

In this step, you first create a class DataCreator that generates fruit sales data for three consecutive months in a year. Next, you bind FlexRadar to the created data source using the ItemsSource property provided by the FlexChartBase class. Then, you specify fields containing X values and Y values for FlexRadar using the BindingX and the Binding property, respectively.

1. Add a class, DataCreator and add the following code.
   
   • Visual Basic
   • C#

   • Visual Basic

   Class DataCreator
       Public Shared Function CreateFruit() As List(Of FruitDataItem)
           Dim fruits = New String() {"Oranges", "Apples", "Pears", "Bananas"}
           Dim count = fruits.Length
           Dim result = New List(Of FruitDataItem)()
           Dim rnd = New Random()
   
           For i As Object = 0 To count - 1
               result.Add(New FruitDataItem() With {
                   .Fruit = fruits(i),
                   .March = rnd.[Next](20),
                   .April = rnd.[Next](20),
                   .May = rnd.[Next](20),
                   .Size = rnd.[Next](5)
               })
           Next
           Return result
       End Function
   End Class
   Public Class FruitDataItem
       Public Property Fruit() As String
           Get
               Return m_Fruit
           End Get
           Set
               m_Fruit = Value
           End Set
       End Property
       Private m_Fruit As String
       Public Property March() As Double
           Get
               Return m_March
           End Get
           Set
               m_March = Value
           End Set
       End Property
       Private m_March As Double
       Public Property April() As Double
           Get
               Return m_April
           End Get
           Set
               m_April = Value
           End Set
       End Property
       Private m_April As Double
       Public Property May() As Double
           Get
               Return m_May
           End Get
           Set
               m_May = Value
           End Set
       End Property
       Private m_May As Double
       Public Property Size() As Integer
           Get
               Return m_Size
           End Get
           Set
               m_Size = Value
           End Set
       End Property
       Private m_Size As Integer
   End Class
   Public Class DataPoint
       Public Property XVals() As Double
           Get
               Return m_XVals
           End Get
           Set
               m_XVals = Value
           End Set
       End Property
       Private m_XVals As Double
       Public Property YVals() As Double
           Get
               Return m_YVals
           End Get
           Set
               m_YVals = Value
           End Set
       End Property
       Private m_YVals As Double
   End Class
   

   • C#

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   using System.Threading.Tasks;
   
   namespace FlexRadarQuickStart
   {
       class DataCreator
       {
           public static List<FruitDataItem> CreateFruit()
           {
               var fruits = new string[] { "Oranges", "Apples", "Pears", "Bananas" };
               var count = fruits.Length;
               var result = new List<FruitDataItem>();
               var rnd = new Random();
   
               for (var i = 0; i < count; i++)
                   result.Add(new FruitDataItem()
                   {
                       Fruit = fruits[i],
                       March = rnd.Next(20),
                       April = rnd.Next(20),
                       May = rnd.Next(20),
                       Size = rnd.Next(5),
                   });
               return result;
           }
       }
       public class FruitDataItem
       {
           public string Fruit { get; set; }
           public double March { get; set; }
           public double April { get; set; }
           public double May { get; set; }
           public int Size { get; set; }
       }
       public class DataPoint
       {
           public double XVals { get; set; }
           public double YVals { get; set; }
       }
   }
   

2. Edit the XAML markup to provide data to FlexRadar.
   
   
   • XAML

   • XAML

       <Page
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:FlexRadarQuickStart"
       xmlns:Chart="using:C1.Xaml.Chart"
       x:Class="FlexRadarQuickStart.MainPage"
       DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}">
   
       <Grid>
           <Chart:C1FlexRadar ItemsSource="{Binding DataContext.Data}" 
                              BindingX="Fruit" 
                              Margin="0,220,20,130">
               <Chart:C1FlexRadar.Series>
                   <Chart:Series SeriesName="March" 
                                 Binding="March"></Chart:Series>
                   <Chart:Series SeriesName="April" 
                                 Binding="April"></Chart:Series>
                   <Chart:Series SeriesName="May" 
                                 Binding="May"></Chart:Series>
               </Chart:C1FlexRadar.Series>
           </Chart:C1FlexRadar>
       </Grid>
   
   </Page>
   

          
3. Switch to Code view and add the following code.
   
   • Visual Basic
   • C#

   • Visual Basic

   Partial Public NotInheritable Class MainPage
       Inherits Page
       Private _fruits As List(Of FruitDataItem)
   
       Public Sub New()
           Me.InitializeComponent()
       End Sub
   
       Public ReadOnly Property Data() As List(Of FruitDataItem)
           Get
               If _fruits Is Nothing Then
                   _fruits = DataCreator.CreateFruit()
               End If
   
               Return _fruits
           End Get
       End Property
   End Class
   

   • C#

   using System.Collections.Generic;
   using Windows.UI.Xaml.Controls;
   
   namespace FlexRadarQuickStart
   {
       public sealed partial class MainPage : Page
       {
           List<FruitDataItem> _fruits;
   
           public MainPage()
           {
               this.InitializeComponent();
           }
   
           public List<FruitDataItem> Data
           {
               get
               {
                   if (_fruits == null)
                   {
                       _fruits = DataCreator.CreateFruit();
                   }
   
                   return _fruits;
               }
           }
       }
   }
   

Step 3: Run the Application

Press F5 to run the application and observe the output.