Xamarin.Android | ComponentOne
Controls / FlexChart / Features / Data Binding
In This Topic
    Data Binding
    In This Topic

    You can bind the FlexChart control to data by setting its BindingX property (for X-axis values), and Binding property (for Y-axis values) on each series that you add to the control. The data series in FlexChart control is represented by the ChartSeries class which provides the following set of properties for data binding as mentioned in the following table.

    Property Name Description
    Binding Property for binding Y-axis values
    BindingX Property for binding X-axis values
    ItemsSource Property for binding with collection of items

    Users can set the ItemsSource and BindingX properties on the FlexChart control, and the Binding property on each series. The ChartSeries uses parent chart values in case these properties are not specified on the series level.

    The image given below shows data binding in the FlexChart control. The X-axis is bound to DateTime while the Y-axis is bound to Sales and Expenses values for the corresponding DateTime.

     

    In Code

    The following code examples illustrate how to set Data Binding in FlexChart control. The example uses the sample created in the Quick Start section with slight changes as described below.

    1. Replace the code in the data source file, that is FlexChartDataSource, with the following code.
      C#
      Copy Code
      public class FlexChartDataSource
      {
       public string Name { get; set; }
       public double Sales { get; set; }
       public double Expenses { get; set; }
       public double Downloads { get; set; }
       public DateTime Date { get; set; }
       public FlexChartDataSource()
        {
          this.Name = string.Empty;
          this.Sales = 0;
          this.Expenses = 0;
          this.Downloads = 0;
          this.Date = DateTime.Now;
        }
       public FlexChartDataSource(string name, double sales, double expenses, double downloads, DateTime date)
        {
          this.Name = name;
          this.Sales = sales;
          this.Expenses = expenses;
          this.Downloads = downloads;
          this.Date = date;
        }
       }
    2. Set the BindingX to "Time" within GetChartControl() method in QuickStart class file as illustrated in the following code.
      C#
      Copy Code
      private FlexChart mChart;
      protected override void OnCreate(Bundle savedInstanceState)
      {
           base.OnCreate(savedInstanceState);
      
           // Set our view from the "main" layout resource
           SetContentView(Resource.Layout.Main);
      
           // initializing widget
           mChart = this.FindViewById<FlexChart>(Resource.Id.flexChart1);
      
           mChart.BindingX = "Time";
           mChart.Series.Add(new ChartSeries() { Binding = "Sales", SeriesName = "Sales" });
           mChart.Series.Add(new ChartSeries() { Binding = "Expenses", SeriesName = "Expenses" });
           mChart.ItemsSource = new object[]
           {
                new {Time=new DateTime(2015,1,1), Sales=10, Expenses = 15},
                new {Time=new DateTime(2015,2,1), Sales=10, Expenses=8}
           };
      }