Articles in this section
Category / Section

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>

 

 

 

http://www.syncfusion.com/downloads/Support/DirectTrac/101773/clip_image001-955269359.png

Figure: Linking Pie chart with pivot table

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied