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 UWP Application in Visual Studio.

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.

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

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

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>

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

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.