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>
Figure: Linking Pie chart with pivot table