Customising the Bubble Series to have Piechart-like Datapoints: Part 3

Go To <<Part 2

Customising the Bubble Chart

Now for the main score. 

AT the heart of this customisation is the DataPointStyle of the BubbleSeries. So what we need to do is to define a style that would change the plain bubbles to sectored ones (as in a pie chart). In this vein, our task is simple: to define a pie series as a style in the resources and set it as the DataPointStyle of the BubbleSeries.

Step 1:Define a Style with the Pie Series as its template.

<Style x:Key="MyPieStyle" TargetType="chartingToolkit:BubbleDataPoint">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="chartingToolkit:BubbleDataPoint">

                        <chartingToolkit:Chart Name="pieChart" Background="Transparent"  BorderBrush="Transparent" BorderThickness="0" Padding="0,0,0,0">                           

                            <chartingToolkit:Chart.Series>

                                <chartingToolkit:PieSeries Name="pieSeries" DependentValuePath="Value" ItemsSource="{Binding Breakdown}">

                                </chartingToolkit:PieSeries>

                            </chartingToolkit:Chart.Series>

                        </chartingToolkit:Chart>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

Note that the PieSeries has its DependentValuePath pointing to the value property of the Breakdown class.

Step 2: Set the DataPointStyle property of the bubble series to the ‘MyPieStyle’ defined above.

DataPointStyle="{DynamicResource MyPieStyle}"

Yeah, I know I didn’t warn you about this. There’s still a little more to do. But I’ll explain what happened above.

Just like the bubble series, the default implementation of the Pie Series has a Legend and a chart container (background). So by setting the Bubble Series’ DatapointStyle to the Pie Series, It attempts to plot the PieSeries and all its embodiments into the datapoint. In most cases this is actually too large to fit into the datapoint and most will not display at all except the largest datapoint (as can be seen above).

I took you through this first, so that you would have a good understanding of why I had to do take the subsequent steps.

Step 3: Removal of Legend and Background of each PieChart.

This is where reference to the WPFToolkit Source code was made. It basically involves redefining the default Template of the PieSeries, which can only be gotten from the source.

Add the code segment below between the <chartingToolkit:Chart></chartingToolkit:Chart> tag.

<chartingToolkit:Chart.Template>

<ControlTemplate TargetType="chartingToolkit:Chart">

      <Border Background="{TemplateBinding Background}"    

BorderBrush="{TemplateBinding  BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">

        <Grid>

              <chartingprimitives:EdgePanel x:Name="ChartArea">

              <Grid Canvas.ZIndex="-1" Background="Transparent" />

              <Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="0" />

              </chartingprimitives:EdgePanel>

      </Grid>

     </Border>

</ControlTemplate>

</chartingToolkit:Chart.Template>

The job is done! Here is the result you’ll get.

Customising the Bubble Series to have Piechart-like Datapoints: Part 1

Introduction
Bubble Series are a unique type of charts because unlike most others (line, bar, etc), It can be made to present more than 2 sets (x and y) of data – typically 3 sets, the third (chosen by the user) is illustrated as size of the bubbles. See image below: 

But that’s not just it: by creating bubbles that have sectors as in a Pie Chart, the chart has the capability of representing more sets of data for analogy. Thus, some weeks ago, I was in desperate need of how to create bubble charts that display additional information using sectors in the bubbles. I was using the WPF Toolkit.

My initial thought was to ofcourse use google to find out someone who might have done something similar and could help me. But my entire search for nearly one week was futile and so I gradually decided that I would have to do it myself; noting that it basically needed one to edit the default implementation for the bubble datapoint, so I downloaded the source code for the wpf toolkit here.

It’s quite straightforward, but involves a few steps that I would demonstrate subsequently in separate parts to enable easier comprehension of the reader.

Have fun! And feel free to drop any questions you have.
Go to Part 2>>