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 2

Go To <<Part 1
Creating the Bubble Chart

Tools Used:

• Visual Studio 2010 (2008 should work too).
• WPF Toolkit (dll and source - download at www.codeplex.com). 
• C#

Step 1: Create a New Visual Studio Project with any name; I’ll call mine ‘CustomBubble’.

Step 2: Add a reference to the “System.Windows.Controls.DataVisualisation.Toolkit.dll” file.

Right-Click on the ‘References’ node under project name in solutions explorer and select ‘Add Reference…’ Navigate to the WPF Toolkit install folder and select the appropriate .dll package.

Step 3: Add the following namespace declarations to the XAML Window:

xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

xmlns:chartingprimitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"

xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"

Step 4: Add an instance of the main chart area and the bubble series within the <Grid></Grid> tag. See Code below:

<chartingToolkit:Chart Name="chartSample" Background="Silver" BorderBrush="Black" BorderThickness="3">

            <chartingToolkit:Chart.Series>

                <chartingToolkit:BubbleSeries Name="bubbleSeries" />

            </chartingToolkit:Chart.Series>

 </chartingToolkit:Chart>

Step 5: Next we’ll specify some static data to be plotted. See code below. You can add this in the code-behind or create a new class file for it.

public class TestData: ObservableCollection<TestDataItem>

    {

        public TestData()

        {

            Add(new TestDataItem()

            {

                Label = "North America",

                Total = 10,

                X = 6,

                Y = 3,

                Breakdown = new Breakdown() { 

                    new BreakDownItem() { Label = "Hats", Value = 3 },

                    new BreakDownItem() { Label = "Shoes", Value = 5 },

                    new BreakDownItem() { Label = "Bags", Value = 2 }

                }

            });

            Add(new TestDataItem()

            {

                Label = "South America",

                Total = 5,

                X = 9,

                Y = 4,

                Breakdown = new Breakdown() { 

                    new BreakDownItem() { Label = "Hats", Value = 1 },

                    new BreakDownItem() { Label = "Shoes", Value = 1 },

                    new BreakDownItem() { Label = "Bags", Value = 1 }

                }

            });

            Add(new TestDataItem()

            {

                Label = "Europe",

                Total = 7,

                X = 3,

                Y = 8,

                Breakdown = new Breakdown() { 

                    new BreakDownItem() { Label = "Hats", Value = 3 },

                    new BreakDownItem() { Label = "Shoes", Value = 1 },

                    new BreakDownItem() { Label = "Bags", Value = 3 }

                }

            });

            Add(new TestDataItem()

            {

                Label = "Australia",

                Total = 15,

                X = 5,

                Y = 6.5,

                Breakdown = new Breakdown() { 

                    new BreakDownItem() { Label = "Hats", Value = 2 },

                    new BreakDownItem() { Label = "Shoes", Value = 7 },

                    new BreakDownItem() { Label = "Bags", Value = 6 }

                }

            });

            Add(new TestDataItem()

            {

                Label = "Africa",

                Total = 7,

                X = 7.5,

                Y = 9,

                Breakdown = new Breakdown() { 

                    new BreakDownItem() { Label = "Hats", Value = 1 },

                    new BreakDownItem() { Label = "Shoes", Value = 1 },

                    new BreakDownItem() { Label = "Bags", Value = 0 }

                }

            });

        }

    }

    public class TestDataItem

    {

        public string Label { get; set; }

        public double Total { get; set; }

        public double X { get; set; }

        public double Y { get; set; }

        public Breakdown Breakdown { get; set; }

    }

    public class Breakdown: ObservableCollection<BreakDownItem>

    {

      

    }

    public class BreakDownItem

    {

        public string Label { get; set; }

        public double Value { get; set; }

    }

Step 6: Now we have defined the data to be plotted, we need to set it as the ItemSource of the Bubble Series. First we add an instance of the main class (TestData) to the Resources collection of the Window:

<Window.Resources>

        <local:TestData x:Key="data" />

 </Window.Resources>

Then add relevant properties to the Bubble Series to point it to the data.

<chartingToolkit:BubbleSeries Name="bubbleSeries" Title="Bubble" DependentValuePath="Y" IndependentValuePath="X" SizeValuePath="Total" ItemsSource="{StaticResource data}" />

Voila! You can run the application to see what your bubble series looks like.

The ‘X’ and ‘Y’ values determine the 2D location of the bubbles while the ‘Total’ value determines the size of the bubble.

Yes, it was actually that easy.

The next thing now is to change the blue bubbles that you see to display the data in ‘Breakdown’ class as sectors in each of the bubbles. See example below:

Go To Part 3>>