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

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

2. Bind the data to FlexChart as follows:
   
   
   1. 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.
   2. 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.