Bubble chart


This is the first of a mutli-part entry on the Bubble Chart from the Silverlight Toolkit.  I became interested in this chart when I was working on my soon-to-be-released videos on the PieChart and the Column Charts, which share a common idiom and form.

<!-- pseudo chart layout -->
<charting:Chart x:Name="<name>" BorderBrush="<color>" Margin="<#>" Grid.Row="<#>" Grid.ColumnSpan="<#>"> <charting:[PieSeries | ColumnSeries | BubbleSeries] IndependentValueBinding="{Binding Path=<property>}" DependentValueBinding="{Binding Path=<property>}" /> </charting:Chart>

For a pie chart whose name is DrillDown , if you want your margin to be 1 and you want to place it in row 1 of the grid with a column span of 3, and if you have a data object you will bind to that has properties Letter and Count, your Xaml will look like this (note the substitutions for the values in angle brackets)

<charting:Chart x:Name="DrillDownChart"
  <charting:PieSeries IndependentValueBinding="{Binding Path=Letter}"
                      DependentValueBinding="{Binding Path=Count}" />


Creating the Column Chart just substitutes a ColumnSeries for a PieSeries,

<charting:Chart x:Name="DrillDownChart"
  <charting:ColumnSeries IndependentValueBinding="{Binding Path=Letter}"
                         DependentValueBinding="{Binding Path=Count}" />


Easy as, er, pie.

Who took my ItemSource?

The code behind is a great place to put the itemsource, which can be a collection of any object that has the two properties Letter and Count. (For the video I used the same set of words that I generate for the other controls, and created a dopey useful little class that counts how many words begin with each letter of the alphabet)

The key code in wiring this up looks like this:

PieSeries pieSlice = DrillDownChart.Series[0] as PieSeries;
pieSlice.ItemsSource = frequencyCounters;

where frequencyCounters is defined as

private List<FrequencyCounter> frequencyCounters;
and FrequencyCounter itself is defined (in part) as
 public class FrequencyCounter
   public int Count { get; set; }
   public char Letter { get; set; }

There is also a static method to do the counting, but we can ignore that for now.

[Don’t get too caught up in these details, they’re all available in the coming video and in the code that comes with it. The essential point is that you can create a business class that has the two properties that your chart will use for input. You can provide a a collection of those business objects as the the source for the chart and bind it dynamically while declaring the chart in Xaml. ]

If you feed this collection to the pie chart, zap (xap?)  instant analysis of how many words begin with each letter (essential for quantitative analysis of meaningless information).


Swap in the column chart and the same information now shows the letters distributed in columns.



The Bubbles Chart

What caught my attention  when I was building these examples, however, was the Bubbles chart.  At first glance, it seemed to follow the same pattern,

  <charting:BubbleSeries Title="!"
    IndependentValueBinding="{Binding Path=ASCII}"
    DependentValueBinding="{Binding Path=Count}" 
    SizeValueBinding="{Binding Path=Count}" />

But wait! Note that there are now three values!  That third sets the size of the bubble, and in the examples shown on the Toolkit site it is set to the same binding as the  dependent value , so that is what I’ve done tonight (it’s late, I’m tired, and let’s start easy).


It makes for a very interesting chart, where the size of the bubble represents the size of the dependent value (in this case the count) and has a lot of appeal for  those of us who like this kind of representation in cloud tagging,


But What About A Third Axis Of Information?

The obvious question, though,  is whether this doesn’t also offer the opportunity to represent a third piece of information. For example, might we not use the x axis to represent the Tag, and the Y axis to represent the number of articles on the tag, and the size of the bubble to represent the average length of the article? Or perhaps the size of the bubble could represent the average rating articles on that tag.  That latter approach would give the user a  pretty good idea at a glance if a blog was writing about what people care about. Large bubbles high up in the chart would mean a very responsive blog (lots of articles on popular topics).  Once could begin to talk about blogs that float and blogs that sink.

I will pursue this tomorrow. This is exciting. 



About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

4 Responses to Bubble chart

  1. Kaarthikshankar says:

    How to Set Labels in Dependent Value Axis i.e. in X-axis? It supports only integers.

  2. Kaarthikshankar says:

    How to Set Labels in Dependent Value Axis i.e. in X-axis? It soupports only integers.

  3. Marc says:

    But wait! There is a FOURTH dimension. Can you see it?

    It’s the color of the bubble. It can range from red via orange, yellow, green, blue, and indigo to violet!

Leave a Reply

Your email address will not be published.