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>