How to link a pie chart to the contents of the pivot table

1 min read
It can be achieved by making use of DockingManager which is available in our control. The following code snippet explains the same.
XAML
<syncfusion:DockingManager Grid.Row="1" UseDocumentContainer="False" Name="dmStrat">
            <!-- Customized Header Template-->
            <syncfusion:DockingManager.HeaderTemplate>
                <DataTemplate>
                    <DockPanel LastChildFill="True" >
                        <TextBlock Text="{Binding}" TextTrimming="CharacterEllipsis" 
                       VerticalAlignment="Center" Margin="5,0,0,0" />
                    </DockPanel>
                </DataTemplate>
            </syncfusion:DockingManager.HeaderTemplate>
            <!-- Find Results docking window-->
            <!-- PivotGrid Designer docking window -->
            <Grid syncfusion:DockingManager.Header="Chart Container" 
                  Background="Transparent"
                  Name="_pvDesginer" 
                  syncfusion:DockingManager.DesiredHeightInDockedMode="300"
                  syncfusion:DockingManager.DesiredMaxHeightInDockedMode="400"
                  syncfusion:DockingManager.State="Dock"
                  syncfusion:DockingManager.SideInDockedMode="Bottom">
              
                <syncfusion:Chart Name="PieChart1"  >
                    <!--Chart area to present chart segments-->
                    <syncfusion:ChartArea  BorderThickness="0" RenderTransformOrigin="0.5,0.5" >
                         <!--Chart 1st series declaration-->
                        <syncfusion:ChartSeries ShowDataLabels="False"  Name="Series1"   
                                           Type="Pie" StrokeThickness="0" Label="PivotGrid's ItemSource" BindingPathX="Product" BindingPathsY="Quantity">
                            <!--Chart series Adornment declaation-->
                          <syncfusion:ChartSeries.AdornmentsInfo>
                            <syncfusion:ChartAdornmentInfo SegmentIsOut="True" SegmentLabelFontSize="8"  SegmentShowLine="True" x:Name="Adornments" LabelContentPath="DataPoint.Tag.Date" Visible="True"   SegmentHorizontalAlignment="Center" SegmentVerticalAlignment="Top"  ConnectorTemplate="{StaticResource ConnectorTemplate}"/>
                          </syncfusion:ChartSeries.AdornmentsInfo>
 
                        </syncfusion:ChartSeries>
                        <!--ChartArea Legend declaration-->
                        <syncfusion:ChartArea.Legend>
                            <syncfusion:ChartLegend ColumnsCount="3"  syncfusion:Chart.Dock="Left" CornerRadius="0" ItemMargin="5,0,5,0" ItemTemplate="{StaticResource LegendTemplate1 }" ElementMargin="5"  BorderThickness="1"/>
                        </syncfusion:ChartArea.Legend>
                    </syncfusion:ChartArea>
                </syncfusion:Chart>
 
            </Grid>
 
            <!--Pivot Grid Area-->
            <syncfusion:DockingManager.ClientControl>
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <syncfusion:PivotGridControl x:Name="pivotGrid1"  ItemSource="{Binding SalesData}">
                        <syncfusion:PivotGridControl.PivotRows>
                            <syncfusion:PivotItem FieldMappingName="Product" FieldHeader="Product" TotalHeader="Total"/>
                            <syncfusion:PivotItem FieldMappingName="Date" FieldHeader="Date" TotalHeader="Total"/>
                        </syncfusion:PivotGridControl.PivotRows>
                        <syncfusion:PivotGridControl.PivotColumns>
                            <syncfusion:PivotItem FieldMappingName="Country" FieldHeader="Country" TotalHeader="Total"/>
                        </syncfusion:PivotGridControl.PivotColumns>
                        <syncfusion:PivotGridControl.PivotCalculations>
                            <syncfusion:PivotComputationInfo CalculationName = "Total" SummaryType="DecimalTotalSum" Description = "Summation of values" FieldName = "Quantity" Format = "#,##0"/>
                        </syncfusion:PivotGridControl.PivotCalculations>
                        <syncfusion:PivotGridControl.PivotFields>
                            <syncfusion:PivotItem FieldMappingName="State" FieldHeader="State" TotalHeader="Total"/>
                        </syncfusion:PivotGridControl.PivotFields>                        
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Loaded">
                                <action:PivotGridLoadAction TargetName="Series1" />
                            </i:EventTrigger>
                            <i:EventTrigger EventName="DataRefreshed">
                                <action:DataRefreshedAction TargetName="Series1" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </syncfusion:PivotGridControl>
                </Grid>
            </syncfusion:DockingManager.ClientControl>
        </syncfusion:DockingManager>