Data Binding in WPF Surface Chart (SfSurfaceChart)

23 Oct 2019 / 4 minutes to read

In surface chart, you cane apply data in a grid table format, that contains the number of rows and columns as shown in the following table.

Z0 Z1 Z2 Zn
X1 Y00 Y01 Y02 Y0n
X1 Y10 Y11 Y12 Y1n
X2 Y20 Y21 Y22 Y2n
Xn Yn0 Yn1 Yn2 Ynn

You can apply the data in surface in two ways.

  • Using ItemsSource property
  • Directly passing value through Data.AddPoints method.

Using ItemsSource

You can bind the IEnumerable collection property to surface chart ItemsSource property. Each item holds the model properties used to map surface XBindingPath, YBindingPath and ZBindingPath property.

Also you must set the given data row and column size to surface chart RowSize and ColumnSize Property.

public class Data
    {
        public double X { get; set; }
        public double Y { get; set; }
        public double Z { get; set; }
    }

public class ViewModel
    {
        
        public ViewModel()
        {
            DataValue = new ObservableCollection<Data>();
            for (double x = -10; x < 10; x++)
            {
                for (double z = -10; z < 10; z++)
                {
                    double y = x*Math.Sin(z) + z*Math.Sin(x);
                    DataValue.Add(new Data() { X = x, Y = y, Z = z });
                }
            } 
         }       
         

        public ObservableCollection<Data> DataValue { get; set; }
        public int RowSize = 20;
        public int ColumnSize = 20;
    }
<Grid.DataContext>

     <local:ViewModel />
	 
</Grid.DataContext>

<chart:SfSurfaceChart  ItemsSource="{Binding DataValue}"   XBindingPath="X" YBindingPath="Y" ZBindingPath="Z" RowSize="{Binding RowSize}" ColumnSize="{Binding ColumnSize}" />

Using Data.AddPoints method

In this we can directly pass the data points to Data property AddPoints(x,y,z) method. Here we no need to create items source and its member path. But we need to specify provided data rows and column size.

public MainWindow()

{
	InitializeComponent();
	
	SetData();
	
 }
	 
private void SetData()

{

for (double x = -10; x < 10; x++) 

 {
 
	for (double z = -10; z < 10; z++)
	
	{
		double y = x*Math.Sin(z) + z*Math.Sin(x);
		
		surface.Data.AddPoints(x,y,z); //here we can directly pass data   
        
	 }
	 
 } 
 
 surface.RowSize = 20;
 
 surface.ColumnSize = 20;
 
}
<chart:SfSurfaceChart  x:Name="surface" />