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.

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

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

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

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