Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

How to: Visualize Data from the DXPivotGrid Control using the DXCharts Suite

  • 2 minutes to read

This example shows how to visualize data displayed by the DXPivotGrid using the DXCharts Suite.

<Window x:Class="HowToBindToMDB.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
    xmlns:dxpg="http://schemas.devexpress.com/winfx/2008/xaml/pivotgrid" 
    Title="MainWindow" Height="633" Width="720" Loaded="Window_Loaded">
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <dxpg:PivotGridControl Name="pivotGridControl1" Grid.Row="0"
                               HorizontalAlignment="Left" VerticalAlignment="Top" 
                               DataSource="{Binding}" ChartProvideDataByColumns="True"  >
            <dxpg:PivotGridControl.Fields>
                <dxpg:PivotGridField Name="fieldCustomer" FieldName="Sales Person" 
                                     Area="FilterArea" Caption="Customer" Visible="False" />
                <dxpg:PivotGridField Name="fieldYear" FieldName="OrderDate" 
                                     Area="ColumnArea" Caption="Year" GroupInterval="DateYear" />
                <dxpg:PivotGridField Name="fieldCategoryName" FieldName="CategoryName" 
                                     Area="RowArea" Caption="Product Category" />
                <dxpg:PivotGridField Name="fieldProductName" FieldName="ProductName" 
                                     Area="RowArea" Caption="Product Name" />
                <dxpg:PivotGridField Name="fieldExtendedPrice" FieldName="Extended Price" 
                                     Area="DataArea" Caption="Extended Price" CellFormat="c0" />
            </dxpg:PivotGridControl.Fields>
        </dxpg:PivotGridControl>
        <dxc:ChartControl Name="chart" Grid.Row="1" 
                          DataSource="{Binding ElementName=pivotGridControl1, Path=ChartDataSource}">
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D SeriesDataMember="Series">
                    <dxc:XYDiagram2D.SeriesTemplate>
                        <dxc:BarSideBySideSeries2D ArgumentDataMember="Arguments" ValueDataMember="Values">
                            <dxc:BarSideBySideSeries2D.PointOptions>
                                <dxc:PointOptions PointView="Values">
                                    <dxc:PointOptions.ValueNumericOptions>
                                        <dxc:NumericOptions Format="Currency" Precision="0" />
                                    </dxc:PointOptions.ValueNumericOptions>
                                </dxc:PointOptions>
                            </dxc:BarSideBySideSeries2D.PointOptions>
                        </dxc:BarSideBySideSeries2D>
                    </dxc:XYDiagram2D.SeriesTemplate>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
            <dxc:ChartControl.Legend>
                <dxc:Legend ReverseItems="True" />
            </dxc:ChartControl.Legend>
        </dxc:ChartControl>
        </Grid>
</Window>