How to: Visualize Pivot Grid Data in the Chart Control

• Jul 09, 2019
• 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.

MainWindow.xaml

<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>

MainWindow.xaml.cs

using System.Windows;

namespace DXPivotGrid_ChartsIntegration {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();

            // Binds the pivot grid to data.
            pivotGridControl1.DataSource =
                (new DataSet1TableAdapters.InvoicesTableAdapter()).GetData();
        }
    }
}

InverseBooleanConverter.cs

using System;
using System.Globalization;
using System.Windows.Data;
using System.Windows.Markup;

namespace DXPivotGrid_ChartsIntegration
{
    public class InverseBooleanConverter : MarkupExtension, IValueConverter
    {
        #region IValueConverter Members
        public object Convert(object value, Type targetType,
                object parameter, CultureInfo culture)
        {
            return !(bool)value;
        }
        public object ConvertBack(object value, Type targetType,
                object parameter, CultureInfo culture)
        {
            return !(bool)value;
        }
        #endregion
        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            return this;
        }
    }
}

InverseBooleanConverter.vb

Imports System
Imports System.Globalization
Imports System.Windows.Data
Imports System.Windows.Markup

Namespace DXPivotGrid_ChartsIntegration
    Public Class InverseBooleanConverter
        Inherits MarkupExtension
        Implements IValueConverter

        #Region "IValueConverter Members"
        Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object Implements IValueConverter.Convert
            Return Not DirectCast(value, Boolean)
        End Function
        Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
            Return Not DirectCast(value, Boolean)
        End Function
        #End Region
        Public Overrides Function ProvideValue(ByVal serviceProvider As IServiceProvider) As Object
            Return Me
        End Function
    End Class
End Namespace