Data Binding in WPF Surface Chart (SfSurfaceChart)

18 Nov 20185 minutes to read

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

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

You can apply the data to a surface in two ways.

  • Using the ItemsSource property.
  • Directly passing values through the 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 the surface XBindingPath, YBindingPath, and ZBindingPath properties.

Additionally, you must set the data row and column size to the 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 ObservableCollection<Data> DataValue { get; set; }
    public int RowSize = 20;
    public int ColumnSize = 20;

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

Using Data.AddPoints method

In this approach, you can directly pass the data points to the AddPoints(x, y, z) method of the Data property. Here, you do not need to create an items source and its member path. However, you need to specify the data row 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);
            // Here you can directly pass data.
            surface.Data.AddPoints(x, y, z);
        }
    }

    surface.RowSize = 20;
    surface.ColumnSize = 20;
}