FlexChart | ComponentOne
FlexRadar / Quick Start
In This Topic
    Quick Start
    In This Topic

    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 WPF Application (.NET Framework/.NET Core) for .NET 4.5.2 version and
      .NET 5
      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.5.2 or C1.WPF.Core for .NET5 version
      • C1.WPF.DX.4.5.2 or C1.WPF.DX for .NET5 version
      • C1.WPF.FlexChart.4.5.2 or C1.WPF.Chart for .NET 5 version.

      The XAML markup resembles the following code in the <Grid></Grid> tags.
      <c1:C1FlexRadar HorizontalAlignment="Left" 

    Step 2: 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.
      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
                  Return m_Country
              End Get
                  m_Country = Value
              End Set
          End Property
          Private m_Country As String
          Public Property Sales() As Integer
                  Return m_Sales
              End Get
                  m_Sales = Value
              End Set
          End Property
          Private m_Sales As Integer
          Public Property Expenses() As Integer
                  Return m_Expenses
              End Get
                  m_Expenses = Value
              End Set
          End Property
          Private m_Expenses As Integer
      End Class
      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.

              DataContext = "{Binding RelativeSource={RelativeSource Mode=Self}}">
              <Chart:C1FlexRadar ItemsSource="{Binding DataContext.Data}" 
                  <Chart:Series SeriesName="Sales" 
                  <Chart:Series SeriesName="Expenses" 
                                Binding="Expenses" />
    3. Switch to Code view and add the following code.
      Partial Public Class MainWindow
          Inherits Window
          Private _data As List(Of DataItem)
          Public Sub New()
              Dim flexradar As New C1.WPF.Chart.C1FlexRadar()
          End Sub
          Public ReadOnly Property Data() As List(Of DataItem)
                  If _data Is Nothing Then
                      _data = DataCreator.CreateData()
                  End If
                  Return _data
              End Get
          End Property
      End Class
      using System.Collections.Generic;
      using System.Windows;
      namespace FlexRadarQuickStart
          public partial class MainWindow : Window
              private List<DataItem> _data;
              public MainWindow()
              public List<DataItem> Data
                      if (_data == null)
                          _data = DataCreator.CreateData();
                      return _data;

    Step 3: Run the Application

    Press F5 to run the application and observe the output.