How to: Visualize Pivot Grid Data in the Chart Control

  • 2 minutes to read

This example demonstrates how to bind a ChartControl to a PivotGridControl. For this, assign the PivotGridControl.ChartDataSource property value to the ChartControl.DataSource property.

The Transpose Data Source check box is bound to the PivotGridControl.ChartProvideDataByColumns property. If the check box is checked, the property is set to false, and chart series are based on pivot grid rows instead of columns.

NOTE

The complete sample project How to Visualize PivotGrid Data with the ChartControl is available in the DevExpress Examples repository.

<Window xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        xmlns:dxpg="http://schemas.devexpress.com/winfx/2008/xaml/pivotgrid" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:local="clr-namespace:DXPivotGrid_ChartsIntegration"
        x:Class="DXPivotGrid_ChartsIntegration.MainWindow" 
        Height="450" Width="800" Title="PivotGrid and Bound ChartControl
        "
        Loaded="Window_Loaded">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <CheckBox x:Name="cbTransposeDataSource" Content="Transpose Data Source" 
                  Margin="5,10,5,10">
            <CheckBox.IsChecked>
                <Binding ElementName="pivotGridControl1" Path="ChartProvideDataByColumns"
                         Mode="TwoWay" Converter="{local:InverseBooleanConverter}"/>
            </CheckBox.IsChecked>
        </CheckBox>
        <dxpg:PivotGridControl ShowRowGrandTotals="False" ShowColumnGrandTotals="False"
                               Grid.Column="0" Grid.Row="1" x:Name="pivotGridControl1"
                               ShowFilterHeaders="False" ChartSelectionOnly="False"
                               ChartFieldValuesProvideMode="DisplayText"
                               ChartProvideDataByColumns="True">
            <dxpg:PivotGridControl.Fields>
                <dxpg:PivotGridField Name="fieldYear" FieldName="OrderDate" Area="ColumnArea"
                                     Caption="Year" GroupInterval="DateYear" />
                <dxpg:PivotGridField Name="fieldSalesPerson" FieldName="Salesperson"
                                     Area="RowArea" Caption="Sales Person" />
                <dxpg:PivotGridField Name="fieldQuantity" FieldName="Quantity" Area="DataArea" />
            </dxpg:PivotGridControl.Fields>
        </dxpg:PivotGridControl>
        <dxc:ChartControl DataSource="{Binding ElementName=pivotGridControl1, Path=ChartDataSource}"
                          x:Name="chartControl1" Grid.Column="1" Grid.Row="1">
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D SeriesDataMember="Series">
                    <dxc:XYDiagram2D.SeriesTemplate>
                        <dxc:BarSideBySideSeries2D ArgumentDataMember="Arguments" 
                                                   ValueDataMember="Values"/>
                    </dxc:XYDiagram2D.SeriesTemplate>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
        </dxc:ChartControl>
    </Grid>
</Window>