From 3dec0de3fe87aa6f3018b3fc539561ba6a52ba23 Mon Sep 17 00:00:00 2001 From: sanjayvikramsf4373 Date: Tue, 17 Sep 2024 19:20:20 +0530 Subject: [PATCH] 909488 - Improve UG content, replace all existing images in WPF surface chart control. --- wpf/Surface-Chart/ColorBar.md | 9 ++- wpf/Surface-Chart/Data-Binding.md | 17 ++--- wpf/Surface-Chart/Getting-Started.md | 94 ++++++++++++++++++++++------ wpf/Surface-Chart/Overview.md | 2 +- wpf/Surface-Chart/Surface-Area.md | 24 ++++--- wpf/Surface-Chart/Surface-Axis.md | 2 +- wpf/Surface-Chart/Surface-Types.md | 44 +++++++++---- 7 files changed, 141 insertions(+), 51 deletions(-) diff --git a/wpf/Surface-Chart/ColorBar.md b/wpf/Surface-Chart/ColorBar.md index 361baeb962..432a9ba14b 100644 --- a/wpf/Surface-Chart/ColorBar.md +++ b/wpf/Surface-Chart/ColorBar.md @@ -18,9 +18,12 @@ Color bar can either show or hide the labels and this can be done using the [`Sh {% highlight xaml %} - + diff --git a/wpf/Surface-Chart/Data-Binding.md b/wpf/Surface-Chart/Data-Binding.md index 75ab21896f..4ecd037a60 100644 --- a/wpf/Surface-Chart/Data-Binding.md +++ b/wpf/Surface-Chart/Data-Binding.md @@ -9,7 +9,7 @@ documentation: ug # Data Binding in WPF Surface Chart (SfSurfaceChart) -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. +In surface chart, data can be applied in a grid format, with a specified number of rows and columns as shown in the following table. @@ -49,16 +49,16 @@ Yn2
Ynn
-You can apply the data in surface in two ways. +You can apply data to the surface chart 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`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_ItemsSource) property of a surface chart. Each item holds the model properties that are used to map surface [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_XBindingPath), [`YBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_YBindingPath) and [`ZBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_ZBindingPath) property. +You can bind an IEnumerable collection to the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_ItemsSource) property of the surface chart. Each item contains model properties that map to the [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_XBindingPath), [`YBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_YBindingPath) and [`ZBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_ZBindingPath) properties. -Also, you must set the given data row and column size to surface chart [`RowSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_RowSize) and [`ColumnSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_ColumnSize) Properties. +You must also set the data's row and column size using the surface chart's [`RowSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_RowSize) and [`ColumnSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_ColumnSize) properties. {% tabs %} @@ -68,9 +68,12 @@ Also, you must set the given data row and column size to surface chart [`RowSize - + {% endhighlight %} diff --git a/wpf/Surface-Chart/Getting-Started.md b/wpf/Surface-Chart/Getting-Started.md index 45205778d1..b7a6ec8bd0 100644 --- a/wpf/Surface-Chart/Getting-Started.md +++ b/wpf/Surface-Chart/Getting-Started.md @@ -18,8 +18,8 @@ The following image helps you understand various elements in SfSurfaceChart when ![Visual Structure](surface_chart_images/surface_chart_img2.jpeg) -* Surface Header – Represents the title of surface chart -* Wall – Represents the wall that bounds the surface chart. +* Surface Header – Represents the title of surface chart. +* Wall – Represents the sides that enclose the surface chart. * Major Gridlines- Represents the surface axis gridline for surface chart. * Color Bar- Displays the value range in color for surface chart. * Axis Label- Displays the label for surface axis. @@ -53,11 +53,21 @@ You need to initialize the surface chart from the following namespace Syncfusion {% tabs %} {% highlight xaml %} + + + - - - - + + + {% endhighlight %} {% endtabs %} @@ -178,13 +188,17 @@ After you populate the data to the chart, you can bind the properties as shown i {% highlight xaml %} - + ColumnSize="{Binding ColumnSize}" > {% endhighlight %} @@ -212,9 +226,12 @@ The following code example illustrates how to add XAxis, YAxis and ZAxis to the {% highlight xaml %} - + @@ -238,6 +255,41 @@ The following code example illustrates how to add XAxis, YAxis and ZAxis to the {% endhighlight %} +{% highlight c# %} +public class SurfaceChartViewModel +{ + + public ObservableCollection DataValues { get; set; } + + public int RowSize { get; set; } + + public int ColumnSize { get; set; } + + public SurfaceChartViewModel() + { + DataValues = new ObservableCollection(); + + // Adding data points + DataValues.Add(new Data() { X = 0, Y = 3, Z = 0 }); + DataValues.Add(new Data() { X = 0, Y = 2, Z = 1 }); + DataValues.Add(new Data() { X = 0, Y = 1, Z = 2 }); + + DataValues.Add(new Data() { X = 1, Y = 2, Z = 0 }); + DataValues.Add(new Data() { X = 1, Y = 1, Z = 1 }); + DataValues.Add(new Data() { X = 1, Y = 2, Z = 2 }); + + DataValues.Add(new Data() { X = 2, Y = 1, Z = 0 }); + DataValues.Add(new Data() { X = 2, Y = 2, Z = 1 }); + DataValues.Add(new Data() { X = 2, Y = 3, Z = 2 }); + + // Set row and column size + RowSize = 3; + ColumnSize = 3; + } +} + +{% endhighlight %} + {% endtabs %} N> SfSurfaceChart supports default axes, all the axes are generated automatically, even when it has not been defined explicitly. @@ -278,13 +330,17 @@ Now you have created a simple surface chart. The following code example is for X + ColumnSize="{Binding ColumnSize}"> @@ -349,7 +405,7 @@ SfSurfaceChart surface = new SfSurfaceChart(); ### Add Data to surface chart -You can set the surface chart data in code behind, by directly adding data points to the Data property of surface chart using **AddPoints****(****x****,****y****,****z****)** method as shown in the following code example. +To add data to the surface chart in the code-behind, use the **AddPoints****(****x****,****y****,****z****)** method to insert data into the Data property. After setting the data points, specify the chart's row and column sizes, {% highlight c# %} diff --git a/wpf/Surface-Chart/Overview.md b/wpf/Surface-Chart/Overview.md index 143487fb08..65826979d9 100644 --- a/wpf/Surface-Chart/Overview.md +++ b/wpf/Surface-Chart/Overview.md @@ -9,7 +9,7 @@ documentation: ug # WPF Surface Chart (SfSurfaceChart) Overview -Essential Surface Chart shows a three-dimensional surface that connects a set of data points. +Essential Surface Chart shows a three-dimensional surface used to display the relationship between three variables (X, Y, and Z). It is particularly useful for analyzing and presenting complex data sets where two dimensions (X and Y) are related to a third variable (Z). ![WPF Surface Chart overview.](surface_chart_images/wpf-surface-chart-overview.jpeg) diff --git a/wpf/Surface-Chart/Surface-Area.md b/wpf/Surface-Chart/Surface-Area.md index 8f12e4a897..0ef97c0f2b 100644 --- a/wpf/Surface-Chart/Surface-Area.md +++ b/wpf/Surface-Chart/Surface-Area.md @@ -9,7 +9,7 @@ documentation: ug # Surface Area in WPF Surface Chart (SfSurfaceChart) -Surface area represents the entire surface chart and all its elements. It's a virtual rectangle area that includes all the surface elements like axis, color bar, wall etc. +Surface area represents the entire surface chart and all its elements, such as the axis, color bar and walls.It is a virtual rectangular space that contains these elements. The surface chart can be customized to enrich your application’s look and feel. SfSurfaceChat provides API’s to customize surface area based on your requirement. This section explains about the elements and API for common customization of surface area. @@ -126,17 +126,27 @@ Gets or sets the bool value that represents a value whether to show the contour Gets or sets the double value that represents a value of brush count in surface chart.

-The following code sample explains the customization of surface area. +The following code sample explains the customization of the surface area. This customization of the SfSurfaceChart sets up a wireframe 3D surface chart that dynamically binds to data from the view model. It enhances the visual appearance with custom colors, rotation, tilt, and a perspective projection {% tabs %} {% highlight xaml %} - + {% endhighlight %} diff --git a/wpf/Surface-Chart/Surface-Axis.md b/wpf/Surface-Chart/Surface-Axis.md index 4fb1585f89..48be2d98cf 100644 --- a/wpf/Surface-Chart/Surface-Axis.md +++ b/wpf/Surface-Chart/Surface-Axis.md @@ -9,7 +9,7 @@ documentation: ug # Surface Axis in WPF Surface Chart (SfSurfaceChart) -SurfaceAxis is used to locate a data point inside the surface area. In surface, you require three axis to locate data points, such as X-Axis, Y-Axis and Z-Axis. You can define axis in surface using the following code example. If you do not define the axis, then it automatically takes the default axis with default properties values. +SurfaceAxis is used to locate a data point inside the surface area. In surface, you require three axis to locate data points, such as X-Axis, Y-Axis and Z-Axis. You can define axis in surface using the following code example. If no axis is defined, the chart will automatically use the default axes with preset property values. XAML: diff --git a/wpf/Surface-Chart/Surface-Types.md b/wpf/Surface-Chart/Surface-Types.md index 331d22f42c..727d2b6ac4 100644 --- a/wpf/Surface-Chart/Surface-Types.md +++ b/wpf/Surface-Chart/Surface-Types.md @@ -18,17 +18,21 @@ Essential Surface Chart provides the following types to plot three dimensional d ### Surface -Surface charts are used to explore the relationship between three dimensional data. +Surface charts are used to visualize the relationship between three-dimensional data. -The following code shows how to set the type of surface. +The following code demonstrates how to set the surface type. {% tabs %} {% highlight xaml %} - + {% endhighlight %} @@ -49,7 +53,7 @@ The following code shows how to set the type of surface. {% endtabs %} -The following code specifies the view model data bound to the chart for surface type. +The following code specifies the view model data bound to the chart for defining the surface type. {% highlight c# %} @@ -99,9 +103,13 @@ You can draw the wireframe or mesh, for the surface chart. {% highlight xaml %} - + {% endhighlight %} @@ -132,8 +140,13 @@ Viewing the surface chart from the top is called contour. It is a graphical tech {% highlight xaml %} - @@ -195,8 +208,13 @@ You can draw the wireframe or mesh for the contour chart {% highlight xaml %} -