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.

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

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

Add FlexRadar to the Application

1. Create a WPF Application (.NET Framework/.NET Core) for .NET Framework version and .NET versions in Visual Studio.
2. Drag and drop the C1FlexRadar control from the Toolbox to the MainWindow.
   The .dll or Nuget Packages files which are automatically added to the application, are as follows:
   
   • C1.WPF.4.6.2 or C1.WPF.Core for .NET version
   • C1.WPF.DX.4.6.2 or C1.WPF.DX for .NET version
   • C1.WPF.FlexChart.4.6.2 or C1.WPF.Chart for .NET version.
     
     
   The XAML markup resembles the following code in the <Grid></Grid> tags.
   
   • XAML

   • XAML

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

Bind FlexRadar to the Data Source

In this step, first create a class DataCreator that generates sales and expenses data for different countries. Next, bind FlexRadar to the created data source using the ItemsSource property provided by the FlexChartBase class. Then, 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 CreateData() As List(Of DataItem)
           Dim data = New List(Of DataItem)()
           data.Add(New DataItem("UK", 5, 4))
           data.Add(New DataItem("USA", 7, 3))
           data.Add(New DataItem("Germany", 8, 5))
           data.Add(New DataItem("Japan", 12, 8))
           Return data
       End Function
   End Class
   
   Public Class DataItem
       Public Sub New(country__1 As String, sales__2 As Integer, expenses__3 As Integer)
           Country = country__1
           Sales = sales__2
           Expenses = expenses__3
       End Sub
   
       Public Property Country() As String
           Get
               Return m_Country
           End Get
           Set
               m_Country = Value
           End Set
       End Property
       Private m_Country As String
       Public Property Sales() As Integer
           Get
               Return m_Sales
           End Get
           Set
               m_Sales = Value
           End Set
       End Property
       Private m_Sales As Integer
       Public Property Expenses() As Integer
           Get
               Return m_Expenses
           End Get
           Set
               m_Expenses = Value
           End Set
       End Property
       Private m_Expenses As Integer
   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<DataItem> CreateData()
           {
               var data = new List<DataItem>();
               data.Add(new DataItem("UK", 5, 4));
               data.Add(new DataItem("USA", 7, 3));
               data.Add(new DataItem("Germany", 8, 5));
               data.Add(new DataItem("Japan", 12, 8));
               return data;
           }
       }
   
       public class DataItem
       {
           public DataItem(string country, int sales, int expenses)
           {
               Country = country;
               Sales = sales;
               Expenses = expenses;
           }
   
           public string Country { get; set; }
           public int Sales { get; set; }
           public int Expenses { get; set; }
       }
   }
   

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

   • XAML

       <Window
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:local="clr-namespace:FlexRadarQuickStart"
           xmlns:Chart="clr-namespace:C1.WPF.Chart;assembly=C1.WPF.FlexChart.4" 
           x:Class="FlexRadarQuickStart.MainWindow"
           mc:Ignorable="d"
           DataContext = "{Binding RelativeSource={RelativeSource Mode=Self}}">
       
       <Grid>
           <Chart:C1FlexRadar ItemsSource="{Binding DataContext.Data}" 
                              BindingX="Country" 
                              Margin="84,50,216,142">
               <Chart:Series SeriesName="Sales" 
                             Binding="Sales"/>
               <Chart:Series SeriesName="Expenses" 
                             Binding="Expenses" />
           </Chart:C1FlexRadar>
       </Grid>
       
   </Window>
   

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

   • Visual Basic

   Partial Public Class MainWindow
       Inherits Window
       Private _data As List(Of DataItem)
       Public Sub New()
           Me.InitializeComponent()
           Dim flexradar As New C1.WPF.Chart.C1FlexRadar()
       End Sub
   
       Public ReadOnly Property Data() As List(Of DataItem)
           Get
               If _data Is Nothing Then
                   _data = DataCreator.CreateData()
               End If
   
               Return _data
           End Get
       End Property
   End Class
   

   • C#

   using System.Collections.Generic;
   using System.Windows;
   
   namespace FlexRadarQuickStart
   {
       public partial class MainWindow : Window
       {
           private List<DataItem> _data;
           public MainWindow()
           {
               this.InitializeComponent();
           }
   
           public List<DataItem> Data
           {
               get
               {
                   if (_data == null)
                   {
                       _data = DataCreator.CreateData();
                   }
   
                   return _data;
               }
           }
       }
   }
   

Run the Application

Press F5 to run the application and observe the output.