Skip to main content

Lesson 1 - Create a Simple Unbound 3D Chart

  • 5 minutes to read

In this tutorial, you will learn how to design a simple 3D chart, populate it with data, and configure common chart settings.

Execute the following steps to create an application with a 3D chart.

Step 1. Create a New Project and Add a Chart

  • Run Microsoft Visual Studio.
  • Create a new WPF Application project.
  • Add the Chart3DControl to your project. You can do this by dragging the Chart3DControl component from the DX.24.1: Data & Analytics Toolbox tab to the main window.

    Chart3DControlinToolbox

  • Right-click the Chart3D control and select Layout | Reset All in the context menu. This will stretch the chart to fill the entire window.

    Layout|ResetAll

After performing these actions, the XAML markup should look as follows. If it does not, overwrite your markup with the markup below.

<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:Chart3D_Lesson1"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="Chart3D_Lesson1.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxc:Chart3DControl>
            <dxc:Chart3DControl.Legends>
                <dxc:Legend BorderBrush="Transparent" 
                            Background="Transparent"/>
            </dxc:Chart3DControl.Legends>
            <dxc:Series3DStorage>
                <dxc:Series3D DisplayName="Series 1">
                    <dxc:Series3D.View>
                        <dxc:SurfaceSeriesView>
                            <dxc:SurfaceSeriesView.FillStyle>
                                <dxc:GradientFillStyle/>
                            </dxc:SurfaceSeriesView.FillStyle>
                        </dxc:SurfaceSeriesView>
                    </dxc:Series3D.View>
                    <dxc:SeriesPoint3DStorage>
                        <dxc:SeriesPoint3D Value="0" XArgument="0" YArgument="0"/>
                        <dxc:SeriesPoint3D Value="0" XArgument="0" YArgument="1"/>
                        <dxc:SeriesPoint3D Value="1" XArgument="1" YArgument="0"/>
                        <dxc:SeriesPoint3D Value="1" XArgument="1" YArgument="1"/>
                        <dxc:SeriesPoint3D Value="0" XArgument="2" YArgument="0"/>
                        <dxc:SeriesPoint3D Value="0" XArgument="2" YArgument="1"/>
                        <dxc:SeriesPoint3D Value="1" XArgument="3" YArgument="0"/>
                        <dxc:SeriesPoint3D Value="1" XArgument="3" YArgument="1"/>
                    </dxc:SeriesPoint3DStorage>
                </dxc:Series3D>
            </dxc:Series3DStorage>
        </dxc:Chart3DControl>
    </Grid>
</Window>

Step 2. Populate the Chart with Data

In this step, you will manually add a series to the 3D chart, and manually populate this series with points.

  • By default, the 3D chart series source is set to Series3DStorage. This storage’s Series3DStorage.Series collection keeps all manually added series. To invoke the collection editor, click the ellipsis button opposite the Series3DStorage.Series property.

    SeriesCollection_PropertiesWindow

  • Remove the default series from the Series3DStorage.Series collection.

    RemovaSeries

  • Then, add a series by clicking the Add button.

    AddSeries

  • To manually populate the series with points, assign a SeriesPoint3DStorage object to the Series3D.PointSource property.

    SeriesPoint3DStorage

  • Expand the PointSource property group and click the ellipsis button opposite the SeriesPoint3DStorage.Points property to invoke series points editor.

    ToInvokePointsEditor

  • Click the Add button to add a point to the point collection.

    AddPoints

  • Next, you need to define the point SeriesPoint3D.XArgument, SeriesPoint3D.YArgument and SeriesPoint3D.Value properties as the following image shows.

    SeriesPoint3D

  • Repeat two previous actions to add other points. Use the following table data to define points parameters.

    Value X-argument Y-argument
    130.32 Canada Fossil
    597.24 Russia Fossil
    333.45 Germany Fossil
    232.49 UK Fossil
    125.28 Spain Fossil
    320.37 Canada Renewable
    199.08 Russia Renewable
    146.25 Germany Renewable
    41.64 UK Renewable
    80.91 Spain Renewable
    81.45 Canada Nuclear
    151.68 Russia Nuclear
    87.75 Germany Nuclear
    65.93 UK Nuclear
    54.81 Spain Nuclear

    Note

    If necessary, you can copy the code implementing points at the end of this section.

  • Click OK to leave the SeriesPoint3D Collection Editor. Click OK again to leave the Series3D Collection Editor.

After these actions are complete, you will get the following 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:Chart3D_Lesson1"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="Chart3D_Lesson1.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxc:Chart3DControl>
            <dxc:Chart3DControl.Legends>
                <dxc:Legend BorderBrush="Transparent" Background="Transparent"/>
            </dxc:Chart3DControl.Legends>
            <dxc:Series3DStorage>
                <dxc:Series3D>
                    <dxc:SeriesPoint3DStorage>
                        <dxc:SeriesPoint3D Value="130.32" XArgument="Canada"  YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="597.24" XArgument="Russia"  YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="333.45" XArgument="Germany" YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="232.49" XArgument="UK"      YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="125.28" XArgument="Spain"   YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="320.37" XArgument="Canada"  YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="199.08" XArgument="Russia"  YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="146.25" XArgument="Germany" YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="41.64"  XArgument="UK"      YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="80.91"  XArgument="Spain"   YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="81.45"  XArgument="Canada"  YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="151.68" XArgument="Russia"  YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="87.75"  XArgument="Germany" YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="65.93"  XArgument="UK"      YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="54.81"  XArgument="Spain"   YArgument="Nuclear"/>
                    </dxc:SeriesPoint3DStorage>
                </dxc:Series3D>
            </dxc:Series3DStorage>
        </dxc:Chart3DControl>
    </Grid>
</Window>

Step 3. Customize the Chart

Follow the instructions in this section to configure the chart appearance.

Specify a Series View Type

The appearance of a series depends on its view. To set the series view type, assign a Bar3DSeriesView object to the Series3D instance’s Series3DBase.View property.

Series3DView_PropertiesWindow

Set Diagram Proportions

To change proportional relationship between diagram height, width and depth, define the Chart3DControl.AspectRatio property to 5 5 3. For this, use XAML below.

<dxc:Chart3DControl AspectRatio="5 5 3">
<!-- Other Chart3D settings -->
</dxc:Chart3DControl>

To set an equal size for all bars in the chart, specify the Bar3DSeriesView.EqualBarSize property to true.

Bars3D_EqualBarSize

Colorize the Series

Provide specific colors to each series point based on its value.

Add a Title

  • Add a title to your chart. For this, click the ellipsis button opposite the ChartControlBase.Titles property.

    TitlesCollection_PropertiesWindow

  • Click Add to add a new title to the Titles collection.
  • Specify the TitleBase.Content property as World Electricity Consumption.

    Chart3DTitleContent

  • Then, modify the title position by setting the TitleBase.HorizontalAlignment property to Center.

    HorizontalAlignment

  • Click the OK button to perform the changes and hide the editor.

Result

The final XAML is shown below.

View Example

<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:Chart3D_Lesson1"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="Chart3D_Lesson1.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxc:Chart3DControl AspectRatio="5 5 3">
            <dxc:Chart3DControl.Legends>
                <dxc:Legend BorderBrush="Transparent" 
                            Background="Transparent"/>
            </dxc:Chart3DControl.Legends>
            <dxc:Chart3DControl.Titles>
                <dxc:Title Content="World Electricity Consumption" 
                           HorizontalAlignment="Center"/>
            </dxc:Chart3DControl.Titles>
            <dxc:Series3DStorage>
                <dxc:Series3D>
                    <dxc:Series3D.View>
                        <dxc:Bar3DSeriesView EqualBarSize="True">
                            <dxc:Bar3DSeriesView.Colorizer>
                                <dxc:RangeColorizer3D RangeStops="0 80 150 300 600" 
                                                      LegendTextPattern="{}{V1:F0} - {V2:F0} TWh/a">
                                    <dxc:RangeColorizer3D.Palette>
                                        <dxc:Office2013Palette/>
                                    </dxc:RangeColorizer3D.Palette>
                                </dxc:RangeColorizer3D>
                            </dxc:Bar3DSeriesView.Colorizer>
                        </dxc:Bar3DSeriesView>
                    </dxc:Series3D.View>
                    <dxc:SeriesPoint3DStorage>
                        <dxc:SeriesPoint3D Value="130.32" XArgument="Canada"  YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="597.24" XArgument="Russia"  YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="333.45" XArgument="Germany" YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="232.49" XArgument="UK"      YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="125.28" XArgument="Spain"   YArgument="Fossil"/>
                        <dxc:SeriesPoint3D Value="320.37" XArgument="Canada"  YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="199.08" XArgument="Russia"  YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="146.25" XArgument="Germany" YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="41.64"  XArgument="UK"      YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="80.91"  XArgument="Spain"   YArgument="Renewable"/>
                        <dxc:SeriesPoint3D Value="81.45"  XArgument="Canada"  YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="151.68" XArgument="Russia"  YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="87.75"  XArgument="Germany" YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="65.93"  XArgument="UK"      YArgument="Nuclear"/>
                        <dxc:SeriesPoint3D Value="54.81"  XArgument="Spain"   YArgument="Nuclear"/>
                    </dxc:SeriesPoint3DStorage>
                </dxc:Series3D>
            </dxc:Series3DStorage>
        </dxc:Chart3DControl>
    </Grid>
</Window>

The application is now ready. Run the project to see the results. The following image demonstrates the resulting chart at runtime.

Chart3DControl_Lesson1_Result