How to: Visualize Data from a Pivot Grid Control using the Chart Control

• Apr 15, 2018
• 3 minutes to read

The following example shows how to bind a ChartControl to a PivotGridControl to visualize data.

In this example, the ChartControl is bound to the PivotGrid by assigning the PivotGridControl.ChartDataSource property value to the ChartControl.DataSource property.

The main form of this sample application contains the ‘Transpose Data Source’ check box that defines the PivotGridControl.ChartProvideDataByColumns property value. If the check box is checked, the property is set to false, and series are created based on pivot grid rows (instead of columns, which is the default behavior).

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-visualize-pivot-grid-data-via-the-dxcharts-suite-e2913.

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="600" Width="1400" Title="Main Window"
        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();
        }      
    }
}

Internal.cs

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

namespace DXPivotGrid_ChartsIntegration {
    public partial class MainWindow : Window {
        private void Window_Loaded(object sender, RoutedEventArgs e) {
            pivotGridControl1.BestFit();
        }
    }
    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;
        }
    }
}

MainWindow.xaml.vb

Imports Microsoft.VisualBasic
Imports System.Windows

Namespace DXPivotGrid_ChartsIntegration
    Partial Public Class MainWindow
        Inherits Window
        Public Sub New()
            InitializeComponent()

            ' Binds the pivot grid to data.
            pivotGridControl1.DataSource = (New DataSet1TableAdapters.InvoicesTableAdapter()).GetData()
        End Sub
    End Class
End Namespace

Internal.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Globalization
Imports System.Windows
Imports System.Windows.Data
Imports System.Windows.Markup

Namespace DXPivotGrid_ChartsIntegration
    Partial Public Class MainWindow
        Inherits Window
        Private Sub Window_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
            pivotGridControl1.BestFit()
        End Sub
    End Class
    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 CBool(value)
        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 CBool(value)
        End Function
        #End Region
        Public Overrides Function ProvideValue(ByVal serviceProvider As IServiceProvider) As Object
            Return Me
        End Function
    End Class
End Namespace