FlexChart | ComponentOne
FlexChart / Quick Start / Step 2: Binding FlexChart to a Data Source
In This Topic
    Step 2: Binding FlexChart to a Data Source
    In This Topic

    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.

        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
        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:
            <c1:C1FlexChart x:Name="flexChart" 
                            ItemsSource="{Binding DataContext.Data}" Rendered="flexChart_Rendered">
                    <c1:Series SeriesName="Sales" 
                    <c1:Series SeriesName="Expenses" 

        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

        Private _data As List(Of DataItem)
        Public Sub New()
        End Sub
        Public ReadOnly Property Data() As List(Of DataItem)
                If _data Is Nothing Then
                    _data = DataCreator.CreateData()
                End If
                Return _data
            End Get
        End Property
        private List<DataItem> _data;
        public MainWindow()
        public List<DataItem> Data
                if (_data == null)
                    _data = DataCreator.CreateData();
                return _data;

    You have successfully bound FlexChart to the data source.