How to: Create a 3D Manhattan Bar Chart

• Jun 07, 2019
• 4 minutes to read

This example demonstrates how to create a 3D Manhattan Bar chart.

1. Create a ChartControl and specify its ChartControl.Diagram property to a XYDiagram3D object.

   Note

   Note that the ChartControl.Diagram is a content property. You can declare a diagram in XAML directly after a chart control’s declaration and not wrap it in opening and closing ChartControl.Diagram tags.

2. Add a BarSeries3D object to the Diagram.Series collection.

   Note

   Note that the Diagram.Series is a content property. You can declare series in XAML directly after a diagram’s declaration and not wrap it in opening and closing Diagram.Series tags.

3. Use the following properties to bind the series to data:

   • Series.DataSource - Specifies the series’s data source.
   • Series.ArgumentDataMember - Defines the data member that provides the series’s arguments.
   • Series.ValueDataMember - Specifies the data member that provides the series’s values.

   View Example

Window1.xaml

<Window x:Class="ManhattanBar3DChart.Window1"
        xmlns:local="clr-namespace:ManhattanBar3DChart"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        Title="Main Window" Height="492" Width="851.5">
    <Grid>
        <dxc:ChartControl Name="chartControl1">
            <dxc:ChartControl.DataContext>
                <local:DevAVSalesByYear/>
            </dxc:ChartControl.DataContext>
            <dxc:XYDiagram3D BarDistance="0.3" 
                             BarDistanceFixed="5" 
                             SeriesDistance="1" 
                             ZoomPercent="140" 
                             HorizontalScrollPercent="-10"
                             VerticalScrollPercent="10">
                <dxc:XYDiagram3D.ContentTransform>
                    <MatrixTransform3D>
                        <MatrixTransform3D.Matrix>
                            <Matrix3D M11="0.82" M12="-0.06" M13="0.575" M14="0"
                                      M21="0.01" M22="1" M23="0.089" M24="0" 
                                      M31="-0.578" M32="-0.067" M33="0.813" M34="0"
                                      M44="1" 
                                      OffsetZ="0" OffsetX="0" OffsetY="0"/>
                        </MatrixTransform3D.Matrix>
                    </MatrixTransform3D>
                </dxc:XYDiagram3D.ContentTransform>
                <dxc:BarSeries3D
                        x:Name="series1"
                        DisplayName="{Binding Series1DisplayName}"                        
                        DataSource="{Binding Series1Source}" 
                        ArgumentDataMember="Region"
                        ValueDataMember="Sales"/>
                <dxc:BarSeries3D
                        x:Name="series2"
                        DisplayName="{Binding Series2DisplayName}"                        
                        DataSource="{Binding Series2Source}" 
                        ArgumentDataMember="Region"
                        ValueDataMember="Sales"/>
                <dxc:BarSeries3D
                        x:Name="series3"
                        DisplayName="{Binding Series3DisplayName}"                        
                        DataSource="{Binding Series3Source}" 
                        ArgumentDataMember="Region"
                        ValueDataMember="Sales"/>
            </dxc:XYDiagram3D>
            <dxc:ChartControl.Legends>
                <dxc:Legend
                    HorizontalPosition="Right"
                    ReverseItems="True" />
            </dxc:ChartControl.Legends>
            <dxc:ChartControl.Titles>
                <dxc:Title Content="DevAV Sales"
                           Dock="Top"
                           HorizontalAlignment="Center"/>
            </dxc:ChartControl.Titles>
        </dxc:ChartControl>
    </Grid>
</Window>

Window1.xaml.cs

using System;
using System.Data;
using System.Windows;

namespace ManhattanBar3DChart {
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }
    public class DevAVSalesByYear {
        public DataTable Data {
            get { return GetData(); }
        }
        public DataTable Series1Source {
            get {
                return GetData().AsEnumerable()
                          .Where(r => r.Field<int>("Year") == DateTime.Now.Year - 1)
                          .CopyToDataTable();
            }
        }
        public DataTable Series2Source {
            get {
                return GetData().AsEnumerable()
                          .Where(r => r.Field<int>("Year") == DateTime.Now.Year - 2)
                          .CopyToDataTable();
            }
        }
        public DataTable Series3Source {
            get {
                return GetData().AsEnumerable()
                          .Where(r => r.Field<int>("Year") == DateTime.Now.Year - 3)
                          .CopyToDataTable();
            }
        }
        public string Series1DisplayName {
            get { return (DateTime.Now.Year - 1).ToString(); }
        }
        public string Series2DisplayName {
            get { return (DateTime.Now.Year - 2).ToString(); }
        }
        public string Series3DisplayName {
            get { return (DateTime.Now.Year - 3).ToString(); }
        }
        public DataTable GetData() {
            int lastYear = DateTime.Now.Year - 1;
            DataTable table = new DataTable();
            table.Columns.AddRange(new DataColumn[] {
                    new DataColumn("Year", typeof(int)),
                    new DataColumn("Region", typeof(string)),
                    new DataColumn("Sales", typeof(decimal))
                });

            table.Rows.Add(lastYear - 2, "Asia", 4.23M);
            table.Rows.Add(lastYear - 2, "North America", 3.485M);
            table.Rows.Add(lastYear - 2, "Europe", 3.088M);
            table.Rows.Add(lastYear - 2, "Australia", 1.78M);
            table.Rows.Add(lastYear - 2, "South America", 1.602M);

            table.Rows.Add(lastYear - 1, "Asia", 4.768M);
            table.Rows.Add(lastYear - 1, "North America", 3.747M);
            table.Rows.Add(lastYear - 1, "Europe", 3.357M);
            table.Rows.Add(lastYear - 1, "Australia", 1.957M);
            table.Rows.Add(lastYear - 1, "South America", 1.823M);

            table.Rows.Add(lastYear, "Asia", 5.289M);
            table.Rows.Add(lastYear, "North America", 4.182M);
            table.Rows.Add(lastYear, "Europe", 3.725M);
            table.Rows.Add(lastYear, "Australia", 2.272M);
            table.Rows.Add(lastYear, "South America", 2.117M);

            return table;
        }
    }
}

Window1.xaml.vb

Imports System
Imports System.Data
Imports System.Windows

Namespace ManhattanBar3DChart
    Partial Public Class Window1
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
    Public Class DevAVSalesByYear
        Public ReadOnly Property Data() As DataTable
            Get
                Return GetData()
            End Get
        End Property
        Public ReadOnly Property Series1Source() As DataTable
            Get
                Return GetData().AsEnumerable().Where(Function(r) r.Field(Of Integer)("Year") = Date.Now.Year - 1).CopyToDataTable()
            End Get
        End Property
        Public ReadOnly Property Series2Source() As DataTable
            Get
                Return GetData().AsEnumerable().Where(Function(r) r.Field(Of Integer)("Year") = Date.Now.Year - 2).CopyToDataTable()
            End Get
        End Property
        Public ReadOnly Property Series3Source() As DataTable
            Get
                Return GetData().AsEnumerable().Where(Function(r) r.Field(Of Integer)("Year") = Date.Now.Year - 3).CopyToDataTable()
            End Get
        End Property
        Public ReadOnly Property Series1DisplayName() As String
            Get
                Return (Date.Now.Year - 1).ToString()
            End Get
        End Property
        Public ReadOnly Property Series2DisplayName() As String
            Get
                Return (Date.Now.Year - 2).ToString()
            End Get
        End Property
        Public ReadOnly Property Series3DisplayName() As String
            Get
                Return (Date.Now.Year - 3).ToString()
            End Get
        End Property
        Public Function GetData() As DataTable
            Dim lastYear As Integer = Date.Now.Year - 1
            Dim table As New DataTable()
            table.Columns.AddRange(New DataColumn() { _
                New DataColumn("Year", GetType(Integer)), _
                New DataColumn("Region", GetType(String)), _
                New DataColumn("Sales", GetType(Decimal)) _
            })
            table.Rows.Add(lastYear - 2, "Asia", 4.23D)
            table.Rows.Add(lastYear - 2, "North America", 3.485D)
            table.Rows.Add(lastYear - 2, "Europe", 3.088D)
            table.Rows.Add(lastYear - 2, "Australia", 1.78D)
            table.Rows.Add(lastYear - 2, "South America", 1.602D)

            table.Rows.Add(lastYear - 1, "Asia", 4.768D)
            table.Rows.Add(lastYear - 1, "North America", 3.747D)
            table.Rows.Add(lastYear - 1, "Europe", 3.357D)
            table.Rows.Add(lastYear - 1, "Australia", 1.957D)
            table.Rows.Add(lastYear - 1, "South America", 1.823D)

            table.Rows.Add(lastYear, "Asia", 5.289D)
            table.Rows.Add(lastYear, "North America", 4.182D)
            table.Rows.Add(lastYear, "Europe", 3.725D)
            table.Rows.Add(lastYear, "Australia", 2.272D)
            table.Rows.Add(lastYear, "South America", 2.117D)
            Return table
        End Function
    End Class
End Namespace