Back to Devexpress

Lesson 2 - Create a 3D Chart Control with a Series Bound to Data

wpf-117584-controls-and-libraries-charts-suite-chart3d-control-getting-started-lesson-2-create-a-chart3d-control-with-a-series-bound-to-data.md

latest15.8 KB
Original Source

Lesson 2 - Create a 3D Chart Control with a Series Bound to Data

  • Sep 20, 2022
  • 10 minutes to read

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

The following steps should be performed.

Step 1. Prepare an Application

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

  • Run Microsoft Visual Studio.

  • 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.

  • 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.

  • 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.

  • 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.

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.

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.

xaml
<dxc:Series3D DisplayName="Series 1">
    <dxc:Series3D.View>
        <dxc:Point3DSeriesView>
            <dxc:Point3DSeriesView.MarkerModel>
                <dxc:Marker3DSpherePointModel SphereDetalizationLevel="Low"/>
            </dxc:Point3DSeriesView.MarkerModel>
            <dxc:Point3DSeriesView.Colorizer>
                <dxc:RangeColorizer3D RangeStops="-0.4 0.4 1.8 2" 
                                      ApproximateColors="True">
                    <dxc:RangeColorizer3D.ValueProvider>
                        <dxc:ColorObjectValueProvider3D/>
                    </dxc:RangeColorizer3D.ValueProvider>
                    <dxc:RangeColorizer3D.Palette>
                        <dxc:YellowPalette/>
                    </dxc:RangeColorizer3D.Palette>
                </dxc:RangeColorizer3D>
            </dxc:Point3DSeriesView.Colorizer>
        </dxc:Point3DSeriesView>
    </dxc:Series3D.View>
    <!--Point Source Configuration -->
</dxc:Series3D>

Result

The image below demonstrates the launched application.

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

View Example

csharp
namespace GettingStarted2 {
    public class Star {
        public int HipID { get; private set; }
        public string Spectr { get; private set; }
        public double Luminocity { get; private set; }
        public double ColorIndex { get; private set; }
        public double X { get; private set; }
        public double Y { get; private set; }
        public double Z { get; private set; }

        public Star(
                int id,
                double x,
                double y,
                double z,
                string spectr, 
                double luminocity, 
                double colorIndex
        ) {
            HipID = id;
            X = x;
            Y = y;
            Z = z;
            Spectr = spectr;
            Luminocity = luminocity;
            ColorIndex = colorIndex;
        }
    }
}
xaml
<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GettingStarted2"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="GettingStarted2.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="720" Width="1280">
    <Window.DataContext>
        <local:StarStatisticsViewModel/>
    </Window.DataContext>
    <Grid>
        <dxc:Chart3DControl>
            <dxc:Chart3DControl.Legends>
                <dxc:Legend/>
            </dxc:Chart3DControl.Legends>
            <dxc:Series3DStorage>
                <dxc:Series3D DisplayName="Series 1">
                    <dxc:Series3D.View>
                        <dxc:Point3DSeriesView>
                            <dxc:Point3DSeriesView.MarkerModel>
                                <dxc:Marker3DSpherePointModel SphereDetalizationLevel="Low"/>
                            </dxc:Point3DSeriesView.MarkerModel>
                            <dxc:Point3DSeriesView.Colorizer>
                                <dxc:RangeColorizer3D RangeStops="-0.4 0.4 1.8 2" 
                                                      ApproximateColors="True">
                                    <dxc:RangeColorizer3D.ValueProvider>
                                        <dxc:ColorObjectValueProvider3D/>
                                    </dxc:RangeColorizer3D.ValueProvider>
                                    <dxc:RangeColorizer3D.Palette>
                                        <dxc:YellowPalette/>
                                    </dxc:RangeColorizer3D.Palette>
                                </dxc:RangeColorizer3D>
                            </dxc:Point3DSeriesView.Colorizer>
                        </dxc:Point3DSeriesView>
                    </dxc:Series3D.View>
                    <dxc:SeriesPoint3DDataSourceAdapter DataSource="{Binding Stars}" 
                                                        XArgumentDataMember="X" 
                                                        YArgumentDataMember="Y"
                                                        ValueDataMember="Z" 
                                                        ColorDataMember="ColorIndex"/>
                </dxc:Series3D>
            </dxc:Series3DStorage>
        </dxc:Chart3DControl>
    </Grid>
</Window>
csharp
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Globalization;
using System.IO;
using System.Windows;
using System.Windows.Resources;

namespace GettingStarted2 {
    public class StarStatisticsViewModel {
        public IEnumerable<Star> Stars { get; private set; }

        public StarStatisticsViewModel() {
            Stars = StarStatisticsLoader.Load("/Data/starsdata.csv");
        }
    }

    static class StarStatisticsLoader {
        public static IEnumerable<Star> Load(string filepath) {
            StreamResourceInfo streamInfo = Application.GetResourceStream(
                new Uri(filepath, UriKind.RelativeOrAbsolute)
            );
            StreamReader reader = new StreamReader(streamInfo.Stream);
            Collection<Star> stars = new Collection<Star>();
            while (!reader.EndOfStream) {
                String dataLine = reader.ReadLine();
                String[] serializedValues = dataLine.Split(';');
                stars.Add(
                    new Star(
                        id: Convert.ToInt32(serializedValues[0], CultureInfo.InvariantCulture),
                        x: Convert.ToDouble(serializedValues[3], CultureInfo.InvariantCulture),
                        y: Convert.ToDouble(serializedValues[4], CultureInfo.InvariantCulture),
                        z: Convert.ToDouble(serializedValues[5], CultureInfo.InvariantCulture),
                        spectr: serializedValues[1],
                        luminocity: Convert.ToDouble(serializedValues[6], CultureInfo.InvariantCulture),
                        colorIndex: Convert.ToDouble(serializedValues[2], CultureInfo.InvariantCulture)
                    )
                );
            }

            return stars;
        }
    }
}
vb
Imports System.Collections.ObjectModel
Imports System.Globalization
Imports System.IO
Imports System.Windows.Resources

Public Class StarDataViewModel
    Dim mStars As IEnumerable(Of Star)
    Public ReadOnly Property Stars As IEnumerable(Of Star)
        Get
            Return mStars
        End Get
    End Property

    Public Sub New()
        mStars = StarStatisticsLoader.Load("/Data/starsdata.csv")
    End Sub
End Class

Public Module StarStatisticsLoader
    Public Function Load(ByVal filepath As String) As IEnumerable(Of Star)
        Dim streamInfo As StreamResourceInfo = Application.GetResourceStream(
                New Uri(filepath, UriKind.RelativeOrAbsolute)
            )
        Dim reader As StreamReader = New StreamReader(streamInfo.Stream)
        Dim stars As Collection(Of Star) = New Collection(Of Star)()
        While (Not reader.EndOfStream)
            Dim dataLine As String = reader.ReadLine()
            Dim serializedValues As String() = dataLine.Split(";")
            stars.Add(
                    New Star(
                        id:=Convert.ToInt32(serializedValues(0), CultureInfo.InvariantCulture),
                        x:=Convert.ToDouble(serializedValues(3), CultureInfo.InvariantCulture),
                        y:=Convert.ToDouble(serializedValues(4), CultureInfo.InvariantCulture),
                        z:=Convert.ToDouble(serializedValues(5), CultureInfo.InvariantCulture),
                        spectr:=serializedValues(1),
                        luminocity:=Convert.ToDouble(serializedValues(6), CultureInfo.InvariantCulture),
                        colorIndex:=Convert.ToDouble(serializedValues(2), CultureInfo.InvariantCulture)
                    )
                )
        End While
        Return stars
    End Function
End Module
xaml
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GettingStarted2"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="GettingStarted2.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="720" Width="1280">
    <Window.DataContext>
        <local:StarDataViewModel/>
    </Window.DataContext>
    <Grid>
        <dxc:Chart3DControl>
            <dxc:Chart3DControl.Legends>
                <dxc:Legend/>
            </dxc:Chart3DControl.Legends>
            <dxc:Series3DStorage>
                <dxc:Series3D DisplayName="Series 1">
                    <dxc:Series3D.View>
                        <dxc:Point3DSeriesView>
                            <dxc:Point3DSeriesView.MarkerModel>
                                <dxc:Marker3DSpherePointModel SphereDetalizationLevel="Low"/>
                            </dxc:Point3DSeriesView.MarkerModel>
                            <dxc:Point3DSeriesView.Colorizer>
                                <dxc:RangeColorizer3D RangeStops="-0.4 0.4 1.8 2" 
                                                      ApproximateColors="True">
                                    <dxc:RangeColorizer3D.ValueProvider>
                                        <dxc:ColorObjectValueProvider3D/>
                                    </dxc:RangeColorizer3D.ValueProvider>
                                    <dxc:RangeColorizer3D.Palette>
                                        <dxc:YellowPalette/>
                                    </dxc:RangeColorizer3D.Palette>
                                </dxc:RangeColorizer3D>
                            </dxc:Point3DSeriesView.Colorizer>
                        </dxc:Point3DSeriesView>
                    </dxc:Series3D.View>
                    <dxc:SeriesPoint3DDataSourceAdapter DataSource="{Binding Stars}" 
                                                        XArgumentDataMember="X" 
                                                        YArgumentDataMember="Y"
                                                        ValueDataMember="Z" 
                                                        ColorDataMember="ColorIndex"/>
                </dxc:Series3D>
            </dxc:Series3DStorage>
        </dxc:Chart3DControl>
    </Grid>
</Window>
vb
Public Class Star
    Dim mHipID As Int32
    Dim mSpectr As String
    Dim mX, mY, mZ, mLuminocity, mColorIndex As Double

    Public ReadOnly Property HipID() As Int32
        Get
            Return mHipID
        End Get
    End Property

    Public ReadOnly Property Spectr() As String
        Get
            Return mSpectr
        End Get
    End Property

    Public ReadOnly Property X() As Double
        Get
            Return mX
        End Get
    End Property

    Public ReadOnly Property Y() As Double
        Get
            Return mY
        End Get
    End Property

    Public ReadOnly Property Z() As Double
        Get
            Return mZ
        End Get
    End Property

    Public ReadOnly Property Luminocity() As Double
        Get
            Return mLuminocity
        End Get
    End Property

    Public ReadOnly Property ColorIndex() As Double
        Get
            Return mColorIndex
        End Get
    End Property

    Public Sub New(
            ByVal id As Int32,
            ByVal x As Double,
            ByVal y As Double,
            ByVal z As Double,
            ByVal spectr As String,
            ByVal luminocity As Double,
            ByVal colorIndex As Double)
        mHipID = id
        mX = x
        mY = y
        mZ = z
        mSpectr = spectr
        mLuminocity = luminocity
        mColorIndex = colorIndex
    End Sub
End Class