Data Binding in WPF Surface Chart (SfSurfaceChart)

18 Aug 20216 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 the ItemsSource property of a surface chart. Each item holds the model properties that are 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 Properties.

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

         <chart:SfSurfaceChart ItemsSource="{Binding DataValue}"  XBindingPath="X"  
                              YBindingPath="Y" ZBindingPath="Z" RowSize="{Binding RowSize}"
                              ColumnSize="{Binding ColumnSize}">
        </chart:SfSurfaceChart>
` 
SfSurfaceChart chart = new SfSurfaceChart();
            chart.SetBinding(SfSurfaceChart.ItemsSourceProperty, "DataValue");
            chart.SetBinding(SfSurfaceChart.RowSizeProperty, "RowSize");
            chart.SetBinding(SfSurfaceChart.ColumnSizeProperty, "ColumnSize");
            chart.XBindingPath = "X";
            chart.YBindingPath = "Y";
            chart.ZBindingPath = "Z";
            ChartColorBar colorBar = new ChartColorBar();
            colorBar.DockPosition = ChartDock.Right;
            colorBar.ShowLabel = true;
            chart.ColorBar = colorBar;
            grid.Children.Add(chart);

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

Using Data.AddPoints method

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

<chart:SfSurfaceChart  x:Name="surface" />
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;
 
}