From 73155c64d18f642fa671bec457907e246100e4c0 Mon Sep 17 00:00:00 2001 From: Naveenkumar S Date: Thu, 24 Nov 2022 14:56:11 +0530 Subject: [PATCH 1/3] Update UG document for the Classic/Chart/3D-Charts.md --- wpf/Classic/Chart/3D-Charts.md | 319 +++++++++++++++++++++++++++++++++ 1 file changed, 319 insertions(+) diff --git a/wpf/Classic/Chart/3D-Charts.md b/wpf/Classic/Chart/3D-Charts.md index 572baf77c4..877d64564c 100644 --- a/wpf/Classic/Chart/3D-Charts.md +++ b/wpf/Classic/Chart/3D-Charts.md @@ -12,4 +12,323 @@ documentation: ug 3D mode can be easily enabled on a ChartArea using the View3DMode property as follows. +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + +{% endhighlight %} + +{% highlight c# %} + +Chart chart = new Chart(); +chart.Areas.Add(new ChartArea()); +chart.Areas[0].View3DMode= true; +chart.Areas[0].Series.Add(new ChartSeries(ChartTypes.Column)); + +{% endhighlight %} + +{% endtabs %} + +![](Chart-Controls_images/Chart-Controls_img222.jpeg) + +3D Mode is supported in the following chart types. + + + + + + + + + + + + + + + + + + + + + + + + +
Area +Pyramid, Funnel
+SplineArea +Column
+StepArea +RangeColumn
+StackingArea +StackingColumn
+Bar +StackingColumn100
+Stacking Bar +Tornado
+Line +Gantt
+FastLine +Scatter
+Spline +Bubble
+RotatedSpline +Pie
+StepLine +Doughnut
+ +## Customizing Side Walls + +3D chart allows the user to customize the look and feel of the side walls in the 3D chart. Exclusive properties has been implemented to customize the look and feel of the side walls. The following are properties that can be used to add look and feel to 3D chart. + +* ShowLeftWall-This property is used to display or hide the left side wall +* ShowBackWall-This property is used to display or hide the back wall of the 3D chart +* ShowBottomWall-This property is used to display or hide the bottom wall of the 3D chart +* BackWallBackground-This property is used to customize the look and feel of the back wall +* LeftWallBackground-This property is used to customize the look and feel of the left wall +* BottomWallBackground-This property is used to customize the look and feel of the bottom wall + +The following lines of code can be used to customize the side wall's look and feel. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight c# %} + +chart1.Areas[0].Chart3DSettings.ShowBackWall = true; +chart1.Areas[0].Chart3DSettings.ShowBottomWall = true; +chart1.Areas[0].Chart3DSettings.ShowLeftWall = true; +chart1.Areas[0].Chart3DSettings.BackWallBackground = Brushes.AliceBlue; +chart1.Areas[0].Chart3DSettings.LeftWallBackground = Brushes.AliceBlue; +chart1.Areas[0].Chart3DSettings.BottomWallBackground = Brushes.AliceBlue; + +{% endhighlight %} + +{% endtabs %} + +![](Chart-Controls_images/Chart-Controls_img223.jpeg) + +## Camera Projection Views + +Chart 3D supports two types of camera projection views namely perspective and orthographic. Camera projection for the chart can be changed using the CameraProjection property of the Chart3D type, as follows. +{% tabs %} + +{% highlight xaml %} + + + + + + + + + +{% endhighlight %} +{% highlight c# %} + +chart1.Areas[0].Chart3DSettings.CameraProjection = CameraProjection.Perspective; + +{% endhighlight %} + +{% endtabs %} + +![](Chart-Controls_images/Chart-Controls_img224.jpeg) + +![](Chart-Controls_images/Chart-Controls_img225.jpeg) + +## 3-D Manhattan Bar Chart + +### Features + +3D Manhattan Chart is a three dimensional charting feature that enables the chart control to visualize data in a three dimensional space (i.e. along the X, Y a, and Z axes). The feature supports basic Chart Types like Column, Bar, Line and Area, and helps the user to plot graphs in the third axis (Z axis), apart from X and Y axes, which already are supported in Chart. + +### Use Case Scenarios + +* You can avail of 3D Manhattan bar support by using the IsClustered property, when IsClustered is set to false. Each series is plotted in value of Z Axis, whereas Clustered view has series added to only X Axis +* You can plot various fields in a chart, using the 3D Manhattan Chart, in a more comprehensive manner, as shown in the following example: + +![C:/Users/sujithas/AppData/Local/Syncfusion/EssentialStudio/9.2.0.137/WPF/Chart.WPF/Samples/3.5/WindowsSamples/Chart Area/3D Manhattan Chart Demo/Images/3D Manhattan Chart Demo.png](Chart-Controls_images/Chart-Controls_img226.png) + +### Properties + + + + + + + + +
+Property +Description +Type +Data Type +Reference links
+IsClustered +To cluster the series along X axis when isClustered is set to true. +Dependency Property. +Boolean +NA
+IsRotated +To allow the 3D Chart to rotate +Dependency Property +Boolean +NA
+ +Adding 3D Manhattan Bar Chart to an Application + +{% tabs %} +{% highlight xaml %} + + + + + + + +{% endhighlight %} +{% highlight c# %} + +Chart1.Areas[0].IsClustered = true; + +{% endhighlight %} +{% endtabs %} + +## 3-D Chart with Data Points in Z-Axis + +This feature helps the user to plot the chart series in 3-D area, with data points mapping to three coordinate axes namely X, Y, and Z. This feature is supported in line, spline, rotated spline, column, range column, stacked column, 100% stacked column, bar, Gantt, stacked bar, 100% stacked bar, scatter, bubble, 3-D surface, and candle chart types. + +These 3-D types can be bound to all basic types of data sources such as IList, ObservableCollection, Linq, and DataTable as like 2-D types. User can specify the mapping value for z-axis of a 3-D data point using BindingPathsY that is basically an array of string (paths), in which the last value maps to z-axis. + +For example, in the column chart type, BindingPathsY[0] corresponds to a mapping value for y-axis, and BindingPathsY[1] corresponds to a mapping value for z-axis. For the range column chart type, BindingPathsY[0] corresponds to a starting value for y-axis, BindingPathsY[1] corresponds to an end value for y-axis, and BindingPathsY[2] corresponds to a mapping value for z-axis. + +![](Chart-Controls_images/Chart-Controls_img227.png) + +![](Chart-Controls_images/Chart-Controls_img228.png) + +### Properties Table + +Following are the properties of the ChartArea class pertain to the z-axis feature. + + + + + + + + +
+Property +Description +Type +Data Type +Reference links
+EnableDepthAxis +Allows the user to view z-axis. +Dependency Property +Bool +NA
+DepthAxis +Gets or sets the axis for z-axis and also used to specify the range, interval, tick lines and appearance of the z-axis. +Dependency Property +ChartAxis +NA
+ +### Adding Z-Axis to the Chart + +The z-axis (or depth axis) for 3-D charts can be enabled using EnableDepthAxis. The following code example illustrates this. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight c# %} + +this.Area1.EnableDepthAxis = true; + +{% endhighlight %} + +{% endtabs %} + +The attributes of the z-axis (or depth axis) can be set using the DepthAxis property. The following code example illustrates this. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + +{% endhighlight %} +{% highlight c# %} + +this.Area1.DepthAxis.Header = "Z Axis"; +this.Area1.DepthAxis.RangePadding = ChartRangePaddingType.Normal; +this.Area1.DepthAxis.LabelForeground = new SolidColorBrush(Colors.Black); +this.Area1.DepthAxis.IsAutoSetRange = true; +{% endhighlight %} +{% endtabs %} From 54500c807f246176c17f90ad0c1afedcdc4e94dc Mon Sep 17 00:00:00 2001 From: Naveenkumar S Date: Fri, 25 Nov 2022 11:00:54 +0530 Subject: [PATCH 2/3] Updated Alt text for the Classic/Chart/3D-Charts.md --- wpf/Classic/Chart/3D-Charts.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/wpf/Classic/Chart/3D-Charts.md b/wpf/Classic/Chart/3D-Charts.md index 877d64564c..5d6aaf9b9c 100644 --- a/wpf/Classic/Chart/3D-Charts.md +++ b/wpf/Classic/Chart/3D-Charts.md @@ -47,7 +47,7 @@ chart.Areas[0].Series.Add(new ChartSeries(ChartTypes.Column)); {% endtabs %} -![](Chart-Controls_images/Chart-Controls_img222.jpeg) +![Enabling 3D Mode in WPF chart](Chart-Controls_images/Chart-Controls_img222.jpeg) 3D Mode is supported in the following chart types. @@ -155,7 +155,7 @@ chart1.Areas[0].Chart3DSettings.BottomWallBackground = Brushes.AliceBlue; {% endtabs %} -![](Chart-Controls_images/Chart-Controls_img223.jpeg) +![Customizing Side Walls in WPF chart](Chart-Controls_images/Chart-Controls_img223.jpeg) ## Camera Projection Views @@ -181,9 +181,9 @@ chart1.Areas[0].Chart3DSettings.CameraProjection = CameraProjection.Perspective; {% endtabs %} -![](Chart-Controls_images/Chart-Controls_img224.jpeg) +![Orthographic Camera Projection view](Chart-Controls_images/Chart-Controls_img224.jpeg) -![](Chart-Controls_images/Chart-Controls_img225.jpeg) +![Perspective camera Projection View](Chart-Controls_images/Chart-Controls_img225.jpeg) ## 3-D Manhattan Bar Chart @@ -196,7 +196,7 @@ chart1.Areas[0].Chart3DSettings.CameraProjection = CameraProjection.Perspective; * You can avail of 3D Manhattan bar support by using the IsClustered property, when IsClustered is set to false. Each series is plotted in value of Z Axis, whereas Clustered view has series added to only X Axis * You can plot various fields in a chart, using the 3D Manhattan Chart, in a more comprehensive manner, as shown in the following example: -![C:/Users/sujithas/AppData/Local/Syncfusion/EssentialStudio/9.2.0.137/WPF/Chart.WPF/Samples/3.5/WindowsSamples/Chart Area/3D Manhattan Chart Demo/Images/3D Manhattan Chart Demo.png](Chart-Controls_images/Chart-Controls_img226.png) +![3D Manhattan Chart](Chart-Controls_images/Chart-Controls_img226.png) ### Properties @@ -252,9 +252,9 @@ These 3-D types can be bound to all basic types of data sources such as IList, O For example, in the column chart type, BindingPathsY[0] corresponds to a mapping value for y-axis, and BindingPathsY[1] corresponds to a mapping value for z-axis. For the range column chart type, BindingPathsY[0] corresponds to a starting value for y-axis, BindingPathsY[1] corresponds to an end value for y-axis, and BindingPathsY[2] corresponds to a mapping value for z-axis. -![](Chart-Controls_images/Chart-Controls_img227.png) +![3-D Chart with Data Points in Z-Axis](Chart-Controls_images/Chart-Controls_img227.png) -![](Chart-Controls_images/Chart-Controls_img228.png) +![3-D Chart with Data Points in Z-Axis](Chart-Controls_images/Chart-Controls_img228.png) ### Properties Table From ab49c44a8159a0c7d1bc0377855548c7ada8315a Mon Sep 17 00:00:00 2001 From: Naveenkumar S Date: Fri, 25 Nov 2022 11:05:13 +0530 Subject: [PATCH 3/3] Resolved alt text error in Chart/3D-Charts.md --- wpf/Classic/Chart/3D-Charts.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/wpf/Classic/Chart/3D-Charts.md b/wpf/Classic/Chart/3D-Charts.md index 5d6aaf9b9c..ef4fc47b4f 100644 --- a/wpf/Classic/Chart/3D-Charts.md +++ b/wpf/Classic/Chart/3D-Charts.md @@ -196,7 +196,7 @@ chart1.Areas[0].Chart3DSettings.CameraProjection = CameraProjection.Perspective; * You can avail of 3D Manhattan bar support by using the IsClustered property, when IsClustered is set to false. Each series is plotted in value of Z Axis, whereas Clustered view has series added to only X Axis * You can plot various fields in a chart, using the 3D Manhattan Chart, in a more comprehensive manner, as shown in the following example: -![3D Manhattan Chart](Chart-Controls_images/Chart-Controls_img226.png) +![Three Dimensional Manhattan Chart](Chart-Controls_images/Chart-Controls_img226.png) ### Properties @@ -252,9 +252,9 @@ These 3-D types can be bound to all basic types of data sources such as IList, O For example, in the column chart type, BindingPathsY[0] corresponds to a mapping value for y-axis, and BindingPathsY[1] corresponds to a mapping value for z-axis. For the range column chart type, BindingPathsY[0] corresponds to a starting value for y-axis, BindingPathsY[1] corresponds to an end value for y-axis, and BindingPathsY[2] corresponds to a mapping value for z-axis. -![3-D Chart with Data Points in Z-Axis](Chart-Controls_images/Chart-Controls_img227.png) +![Three Dimensional Chart with Data Points in Z-Axis](Chart-Controls_images/Chart-Controls_img227.png) -![3-D Chart with Data Points in Z-Axis](Chart-Controls_images/Chart-Controls_img228.png) +![Three Dimensional Chart with Data Points in Z-Axis](Chart-Controls_images/Chart-Controls_img228.png) ### Properties Table