ComponentOne FlexChart for WPF
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 in Visual Studio.
    2. Drag and drop the C1FlexRadar control from the Toolbox to the MainWindow.
      The .dll files which are automatically added to the application, are as follows:
      • C1.WPF.4.dll
      • C1.WPF.DX.4.dll
      • C1.WPF.FlexChart.4.dll

      The XAML markup resembles the following code in the <Grid></Grid> tags.
      <c1:C1FlexRadar HorizontalAlignment="Left" 
                      Height="100" 
                      Margin="0" 
                      VerticalAlignment="Top" 
                      Width="100"/>
      

    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
              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
      
      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.

          <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.
      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
      
      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;
                  }
              }
          }
      }
      

    Step 3: Run the Application

    Press F5 to run the application and observe the output.