Contents
- Binding a simple collection to the chart
- Binding complex property to the chart
- Binding array property to the chart
- Listening Property Changes
Having trouble getting help?
Contact Support
Contact Support
DataBinding in UWP Charts (SfChart)
7 Jan 202513 minutes to read
SfChart offers ItemsSource property to bind various datasource ranges from simple collection property to complex properties.
Binding a simple collection to the chart
<syncfusion:SfChart >
<syncfusion:LineSeries
ItemsSource="{Binding Demands}"
XBindingPath="Demand"
YBindingPath="Year2010">
</syncfusion:LineSeries>
</syncfusion:SfChart>SfChart chart = new SfChart();
LineSeries lineSeries = new LineSeries()
{
ItemsSource = new ViewModel().Demands,
XBindingPath = "Demand",
YBindingPath = "Year2010",
};
chart.Series.Add(lineSeries);
public class GoldDemand
{
public string Demand { get; set; }
public double Year2010 { get; set; }
public double Year2011 { get; set; }
}
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.Demands = new ObservableCollection<GoldDemand>
{
new GoldDemand() {Demand = "Jewelry", Year2010 = 1998.0, Year2011 = 2361.2},
new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0},
new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0},
new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0},
new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0},
new GoldDemand() {Demand = "Others", Year2010 = 1090.5, Year2011 = 1032.0},
new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0},
new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0},
new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0},
new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0},
new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0},
new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0}
};
DataContext = this;
}
public ObservableCollection<GoldDemand> Demands { get; set; } }Binding complex property to the chart
The complex property binding feature enables you to access nested object reference property values to render the chart segment.
<syncfusion:LineSeries ItemsSource="{Binding DataWithMultipleData}" XBindingPath="StadiumObject.CupDetailsObj.CupName" YBindingPath="StadiumObject.NumberSeats" /> SfChart chart = new SfChart();
StadiumDetails stadiumDetails = new StadiumDetails();
LineSeries series = new LineSeries()
{
ItemsSource = new ViewModel().DataWithMultipleData,
XBindingPath = "stadiumDetails.CupDetailsObj.CupName",
YBindingPath = "stadiumDetails.NumberSeats",
Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
};
chart.Series.Add(series);
public class StadiumDetails
{
public string PlaceName { get; set; }
public int NumberSeats { get; set; }
public int Price { get; set; }
public CupDetails CupDetailsObj { get; set; }
}
public class CupDetails
{
public string CupName { get; set; }
}
public class DataPointWithMultipleData
{
public string Name { get; set; }
public StadiumDetails StadiumObject { get; set; }
}Binding array property to the chart
The SfChart supports array values for the XBindingPath and YBindingPath. XBindingPath and YBindingPath are bound with the property name in the corresponding index value. You can bind the same property with different index values.
The following code example demonstrates how to bind the array values for the XBindingPath and YBindingPath.
<chart:SfChart>
<chart:ColumnSeries x:Name="series" ItemsSource="{Binding Brands}"
XBindingPath="Brand[1]" YBindingPath="Count[0]" >
</chart:ColumnSeries>
</chart:SfChart>public class Model
{
public string[] Brand { get; set; }
public double[] Count { get; set; }
}
public class ViewModel
{
public ViewModel()
{
Brands = new ObservableCollection<Model>();
Brands.Add(new Model() { Brand = new string[] { "Reebok", "Adidas" }, Count
= new double[] { 34, 23 } });
Brands.Add(new Model() { Brand = new string[] { "Benz", "Audi" }, Count
= new double[] { 50, 20 } });
Brands.Add(new Model() { Brand = new string[] { "iPhone", "Nokia" }, Count
= new double[] { 24, 30 } });
Brands.Add(new Model() { Brand = new string[] { "Lenovo", "Acer" }, Count
= new double[] { 38, 23 } });
Brands.Add(new Model() { Brand = new string[] { "Fastrack", "Titan" },Count
= new double[] { 27, 29 } });
}
public ObservableCollection<Model> Brands { get; set; }
}
private void CreateChart()
{
ViewModel view = new ViewModel();
SfChart chart = new SfChart();
ColumnSeries series = new ColumnSeries();
series.ItemsSource = view.Brands;
series.XBindingPath = "Brand[1]";
series.YBindingPath = "Count[0]";
chart.Series.Add(series);
grid.Children.Add(chart);
}Listening Property Changes
You can notify the XBindingPath and YBindingPath properties changes by setting ListenPropertyChange as true as shown in the below code snippet.
<chart:ScatterSeries ScatterWidth="20" ScatterHeight="20" Label="Coal" ListenPropertyChange="True"
ItemsSource="{Binding EnergyProductions}" Interior="#BCBCBC"
XBindingPath="ID" YBindingPath="Coal">
</chart:ScatterSeries>public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
// When you click on the button, the changes to XBindingPath and YBindingPath are updated in the output
viewmodel.EnergyProductions[1].ID = "1001";
viewmodel.EnergyProductions[1].Coal = 500;
}
}
public class Model : INotifyPropertyChanged
{
private string id;
public string ID
{
get
{
return id;
}
set
{
id = value;
OnPropertyChanged(nameof(ID));
}
}
private string coal;
public string Coal
{
get
{
return coal;
}
set
{
coal = value;
OnPropertyChanged(nameof(Coal));
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}Also, when enabling this property of the series, you need to implement INotifyPropertyChanged in the underlying business model class to make the chart listen to the property changes of your data object.
NOTE
By default, the property change was disabled. So the dynamic updates will not get reflect in chart. You need to enable this property.