Quick Start

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:

Add FlexRadar to the Application
Bind FlexRadar to the Data Source
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

Create a WPF Application in Visual Studio.
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.
- XAML
- XAML
<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.

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

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

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>

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

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.