[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Collapse]Charts Suite
   [Expand]Chart Control
   [Collapse]Chart3D Control
    [Collapse]Getting Started
      Lesson 1 - Create a Simple Unbound 3D Chart
      Lesson 2 - Create a Chart3D Control with a Series Bound to Data
      Lesson 3 - Create a 3D Chart with Automatically Generated Series
    [Expand]Series
     Legends
     Axes
     Titles
     Interactivity
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 2 - Create a Chart3D Control with a Series Bound to Data

In this lesson, you'll go through steps required to visualize a data source.

The following steps should be performed.

Expanded Step 1. Prepare an Application

You will add a data file with the Model and ViewModel classes to the project.

  • Run MS Visual Studio 2010, 2012, 2013, or 2015.
  • Create a new WPF Application project.
  • Add a new model class. For this, right-click the project in the Solution Explorer. From the invoked menu, select the Add | New Item... element.

    In the invoked Add New Item dialog, select the Code group and then Class from the item list. Set the file name to Star.cs and click OK.

  • Replace the code that the added file contains with the following code describing the model object used in this getting started lesson.

  • Add the data file to the project. Copy the stardata.csv file shipped with the DevExpress Charts Demo to the newly created Data directory within the project directory.

    Note

    By default, this file is available in the C:\Users\Public\Documents\DevExpress Demos 19.1\Components\WPF\CS\ChartsDemo.Wpf\Data directory.

    In the Solution Explorer, toggle the Show All Files button and right-click the Data directory. From the invoked menu, select Include In Project.

    Click the stardata.csv file within the Solution Explorer, and in the Properties window, set the Build Action property to Resource.

  • The ViewModel should load model objects from the data file. Add the file to the project for a new ViewModel, as was previously done for the model.

    Replace the code within the new file with the following code.

  • Now, assign the ViewModel to the Window.DataContext property: select the Window, locate the DataContext property, and click the New button. In the invoked window, select the GettingStarted.StarDataViewModel class and click OK.

The preparatory work is finished. The next set of steps details how to add the Chart3D control, assign data, and customize display settings.

Expanded Step 2. Add a Chart and a Series Bound to Data

The Chart3D control will be added, and a series will be populated with view model data.

  • To add the Chart3DControl to the form, drag it from the toolbox. The control can be found in the DX.19.1: Data & Analytics tab.

    After placing the control, right-click it and from the invoked menu, select Layout | Reset All.

    Note

    By default, after the Chart3D control is added from the toolbox, it will contain a legend and series storage that stores series with manually populated series points.

  • Now, display the view model data within Chart3D series. To do so, locate the Chart3DControl.SeriesSource property in the Properties window and expand it. Locate the Series3DStorage.Series property and click the ellipsis button opposite it. Then, in the invoked Series3D Collection Editor, select the Series3D series and in the Properties list, set the Series3D.PointSource property to SeriesPoint3DDataSourceAdapter.

    Locate the SeriesPoint3DDataSourceAdapter.DataSource property and click the property marker. From the invoked menu, select Create Data Binding....

    In the invoked Create Data Binding dialog window, select the Stars property of the ViewModel and click OK.

    Now, specify the names of data members used for arguments and values of points. Set the Series3DDataSourceAdapter.XArgumentDataMember property to X, Series3DDataSourceAdapter.YArgumentDataMember to Y and Series3DDataSourceAdapter.ValueDataMember to Z. Also, set the SeriesPoint3DDataSourceAdapter.ColorDataMember property to ColorIndex. Data source values specified by this property will colorize the points. Click OK to close the Editor and save changes.

    Chart3D data is configured. Currently, XAML markup of the series should appear as follows.

    The data was bound to the Chart3D control. The next step will configure appearance options for the series.

Expanded Step 3. Configure the Series View

The appearance of series will be configured. A different series view will be assigned. Additionally, a colorizer that colorizes points by their ColorIndex values will be used to provide colors.

Currently, the XAML markup of the series should look as follows.

Expanded Result

The image below demonstrates the launched application.

The following code is the result of this getting started lesson.

Is this topic helpful?​​​​​​​