Step 2: Binding FlexChart to a Data Source

This step allows you to bind FlexChart to a data source.

Create the data source as follows:
1. Right-click the project and select Add | Class.
2. Select Class from the list of templates, name it as DataCreator.cs, and click Add.
3. Add the following code in DataCreator.cs class to generate the data.
  - Visual Basic
  - C#
  Visual Basic
  
  Public 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#
  
  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; } }

Bind the data to FlexChart as follows:

Edit the <Grid> tag to the following markup to provide data to FlexChart:

XAML

<Grid>
    <c1:C1FlexChart x:Name="flexChart" 
                    BindingX="Country" 
                    ItemsSource="{Binding DataContext.Data}" Rendered="flexChart_Rendered">
        <c1:C1FlexChart.Series>
            <c1:Series SeriesName="Sales" 
                       Binding="Sales"/>
            <c1:Series SeriesName="Expenses" 
                       Binding="Expenses"/>
        </c1:C1FlexChart.Series>

To specify the binding source, you need to add the DataContext = "{Binding RelativeSource={RelativeSource Mode=Self}}" markup in the <Window> tag of the MainWindow.xaml file.

Switch to Code view (MainWindow.xaml.cs or MainWindow.xaml.vb ). Add the following code in the MainWindow class to plot the data in the chart

MainWindow.xaml.vb
MainWindow.xaml.cs

MainWindow.xaml.vb

Private _data As List(Of DataItem)
Public Sub New()
    Me.InitializeComponent()
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

MainWindow.xaml.cs

private List<DataItem> _data;
public MainWindow()
{
    InitializeComponent();
    
}

public List<DataItem> Data
{
    get
    {
        if (_data == null)
        {
            _data = DataCreator.CreateData();
        }

        return _data;
    }
}

You have successfully bound FlexChart to the data source.