![\"Step-by-step](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2016\/05\/3d-scatter-chart.png\")
Step-by-step guide on how to build a 3D surface or scatter chart<\/p><\/div>\n
I. General Settings<\/strong><\/p>\n We start with a new WPF project and add the libraries needed for the WPF surface chart: MindFusion.Charting.Wpf and MindFusion.Licensing. We create a mapping to the charting namespace like that:<\/p>\n If you have installed the control or MindFusion WPF Pack with toolbox integration you’ll just need to drag and drop the surface chart control.<\/p>\n Drag and drop the surface chart control<\/p><\/div>\n Next step is to declare the Surface Chart. We do this in XAML:<\/p>\n We use a ShaderEffect<\/a> to make the chart more beautiful. The ShowSurface<\/a> property means the control shall draw a surface but will not draw a wireframe or scatters – we’ll change that later. The SideWallThickness<\/a> sets how the walls will look – we make them modestly thick. If we don’t set a GridType<\/a> it will be more difficult to read the chart, so we set a horizontal grid. Scale determines how the chart will be zoomed and GroundLevel<\/a> sets the location of the bottom or ground wall.<\/p>\n II. Data Binding<\/strong><\/p>\n We’ll use a single series in the chart and we initialize it in XAML as well:<\/p>\n For the purpose of this sample we create just a List of Point3D objects, which will be the data source. We do this in code.<\/p>\n We generate the points using the algorithm for a cone. Now let’s bind the data list to the chart’s properties.<\/p>\n The DataPath<\/a> properties specify the names of each data bound property.<\/p>\n Now that we know our data we must set the minimum and maximum value of all three chart axes to make sure data is rendered correctly:<\/p>\n Each axis exposes MinValue<\/a>, MaxValue<\/a> and Interval<\/a> properties, which are used to define the scale.<\/p>\n III. Colours<\/strong><\/p>\n The colours for a surface chart are set with the Fills<\/a> property. In a surface chart, if you use a gradient brush, each point will read its color mapped to the matching position on the gradient. If you want more details, you can use the TextureType<\/a> and ColorMapList<\/a> properties to specify the colour map. In our sample we use XAML and add a gradient brush:<\/p>\n IV. Customizations<\/strong><\/p>\n We can show a wire frame by setting ShowWireFrame<\/a> to “true”. If we want to show scatters, we’d better turn off ShowSurface<\/a> and set ShowScatters<\/a> to true. A wire frame can be show no matter the surface type. You can combine all of them – scatters, wire frame and surface.<\/p>\n InterpolationType<\/a> lets you choose among various types of interpolation. Choosing None means that the control shall simply connect the 3D points.<\/p>\n An important property is PointMergeThreshold<\/a> – it indicates the smallest difference at which a point that comes too close to another point won’t be drawn. If we set it to 0 or a negative number all points will be drawn.<\/p>\n Here is a selection of images of charts with different combination of surface properties turned on: wire frame, surface, scatters.<\/p>\n By turning a single property you can completely change the appearance of a 3D surface chart<\/p><\/div>\n You can download the sample directly from this link:<\/p>\n Download MindFusion Surface Chart Tutorial<\/a><\/p>\n Learn more about the WPF Chart & Gauge control here.<\/a><\/p>\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" This is a step-by-step guide on how to build a surface chart using MindFusion WPF Surface Chart control. The data is set with data binding. After we build the chart we’ll adjust some properties and preview how they affect the … Continue reading xmlns:chart=\"http:\/\/mindfusion.dev\/charting\/wpf\"\n<\/pre>\n
![\"Drag](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2016\/05\/visual-studio-surface-chart-control.png\")
<chart:surfacechart<\/span> x:name<\/span>=\"surfaceChart<\/a>\" effect3d<\/span>=\"ShaderEffect<\/a>\" scatterfacesize<\/span>=\"1<\/a>\" showsurface<\/span>=\"True<\/a>\" showwireframe<\/span>=\"True<\/a>\" showscatters<\/span>=\"False<\/a>\" title<\/span>=\"ScatterChart3D<\/a>\" sidewallthickness<\/span>=\"0.5<\/a>\" interpolationtype<\/span>=\"Bezier<\/a>\" gridtype<\/span>=\"Horizontal<\/a>\" scale<\/span>=\"200<\/a>\" groundlevel<\/span>=\"0<\/a>\">\n<\/span><\/chart:surfacechart<\/span>><\/pre>\n<chart:surfaceseries<\/span> x:name<\/span>=\"series1<\/a>\">\n<\/span><\/chart:surfaceseries<\/span>><\/pre>\nList Data = new List();\nPoint3D point3D;\n\nfor (int i = 0; i < 360; i+=10)\n{\ndouble angle_rad = i \/ 180.0 * Math.PI;\n\nfor (int r = 0; r <= 10; r++)\n{\ndouble radius = r * 0.2;\ndouble x = radius * Math.Cos(angle_rad);\ndouble z = radius * Math.Sin(angle_rad);\n\npoint3D = new Point3D(x, radius, z);\nData.Add(point3D);\n }\n}\n\n<\/pre>\nsurfaceChart.DataSource = Data;\nseries1.XDataPath = \"X\";\nseries1.YDataPath = \"Y\";\nseries1.ZDataPath = \"Z\";\n<\/pre>\n
surfaceChart.XAxisSettings.MinValue = -2;\nsurfaceChart.XAxisSettings.Interval = 0.4;\nsurfaceChart.XAxisSettings.MaxValue = 2;\nsurfaceChart.YAxisSettings.MinValue = 0;\nsurfaceChart.YAxisSettings.MaxValue = 2;\nsurfaceChart.YAxisSettings.Interval = 0.4;\nsurfaceChart.ZAxisSettings.MinValue = -2;\nsurfaceChart.ZAxisSettings.MaxValue = 2;\nsurfaceChart.ZAxisSettings.Interval = 0.4;\n<\/pre>\n
<chart:surfaceseries.fills<\/span>>\n<\/span> \t<lineargradientbrush<\/span> startpoint<\/span>=\"0,0<\/a>\" endpoint<\/span>=\"0,1<\/a>\">\n<\/span><gradientstop<\/span> color<\/span>=\"#D2D9A3<\/a>\" offset<\/span>=\"0<\/a>\">\n<\/span><gradientstop<\/span> color<\/span>=\"#023E73<\/a>\" offset<\/span>=\"0.33<\/a>\">\n<\/span><gradientstop<\/span> color<\/span>=\"#8A188C<\/a>\" offset<\/span>=\"0.66<\/a>\">\n<\/span><gradientstop<\/span> color<\/span>=\"#F24B6A<\/a>\" offset<\/span>=\"1.0<\/a>\">\n<\/span><\/gradientstop<\/span>><\/gradientstop<\/span>><\/gradientstop<\/span>><\/gradientstop<\/span>><\/lineargradientbrush<\/span>>\n<\/span><\/chart:surfaceseries.fills<\/span>><\/pre>\n![\"By](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2016\/05\/surface-chart-types.png\")