Geeks With Blogs

@Sorskoot
  • Sorskoot "Visual Studio 2013, will be available later this year, with a preview build publicly available at Build" http://t.co/SV28646Qr6 about 483 days ago

News


Timmy Kokke's Blog

↑ Grab this Headline Animator

Timmy Kokke at Blogged
Timmy Kokke …just sorting my bubbles…

The Bubble Chart is part of the Silverlight toolkit and is available for Silverlight 2 and Silverlight 3 at http://silverlight.codeplex.com/. This chart uses the size of the “bubbles” to display more data.  For this article I used the Silverlight 3 version of the toolkit and the newly released Expression Blend 3 and Silverlight 3.

 FinishedChart

Creating the Chart

Start by creating a new Silverlight 3 project in Expression Blend. Add a reference to the Silverlight toolkit by going to Project  in the menu and click Add Reference…

AddReference

By default the toolkit is installed in C:\Program Files\Microsoft SDKs\v3.0\Toolkit\March 2009\Libraries\ , but this might be different on other installations. Add a reference to System.Windows.Controls.DataVisualization.Toolkit.dll

Make sure

Now add a Chart control to the Layout Root element by clicking on the “>>” icon in the toolbar and go to the Custom Controls tab. Select the Chart control and add it to the grid. The Chart control is a host for the ChartSeries like the BarSeries, ColumnSeries and the BubbleSeries.

AddCustomControlChart

Set the all margins to 0 to make the chart span the entire grid. Set the Horizontal and Vertical alignment to Stretch.

To add the BubbleSeries select the Chart, go to it’s common properties and click the button with the ellipses to edit the items in the collection. Yes, it’s actually a collection of series. A chart can have multiple series at once.

 

CommonProperties-Series

First, click the red “X” at the bottom to remove the default ColumnSeries item from the list.

Click the “Add another item”-button to add the new series to the list. Expend both namespaces and select BubbleSeries

SelectObject

… and click “ok” to add and again to close the dialog. At this point, your xaml should look something like this:

<UserControl
     ...
     xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.
DataVisualization.Charting;assembly=System.Windows.Controls.
DataVisualization.Toolkit">
     
     <Grid x:Name="LayoutRoot" 
                         Background="#FFFFFFFF" >
          <chartingToolkit:Chart Margin="0,0,0,0" 
                         Title="Chart Title">               
               <chartingToolkit:BubbleSeries/>
          </chartingToolkit:Chart>
     </Grid>
</UserControl>

At this point the chart is empty. A chart needs data to be useful. One of the new features in Expression Blend 3 is design-time sample data. It’s possible to create data that is used when designing, or even when testing your UX.

 

Binding Data

To define sample data, go to the Data tab and click the “add sample datasource”-button like shown below. Click Define New Sample Data…to create a new datasource.

DefineNewSampleData

Give the datasource a nice name, like BubbleData. Make sure the “Enable sample data when application is running”-checkbox is checked and click Ok.

DefineNewSampleDataDialog

Expand the data tree all the way down. Rename the default property Property1 to Name, by double-clicking it. The sample data can hold various types of data in numerous forms. To change the data format click the “abc”-icon at the end of the line and the format “Name” , leaving it’s format at “String”.

Add a simple property to the collection by clicking on the “ + ”-icon at the end of the line, next to “Collection”.  Rename this property to Date. Change it’s format to “Date”, leaving it’s format at “String” too.

Add simple another property and name this Count. Change it’s type to “Number” and set the “Length” to 3.

The forth property needed is named Image. The sample data can show images, so why not make use of that. Set the type of the property to “Image” and leave the location the way it is. You can use pictures from your latest fishing trip if you like, but for demo purposes I stick with the default.

The bubble chart shows bubbles of different sizes, so the last property would be named Size and is of type “Number”. Use a “length” of 2.

By now you should have a collection like this:

DefiningCollection

To bind the collection to the chart, simply click on the collection, shown in the image above, and drag it to the BubbleSeries element. Release it on top of that.

DragCollectionToBubbleSeries

The “Create Data Binding”-Dialog  appears. Find and select ”ItemsSource” in the dropdown list, than click “ok”.

CreateDataBindingDialog

An Orange/Yellow border is drawn around the datasource. This indicates that the data is bound to something. Behind the scenes, Expression Blend has bound the datasource BubbleData to the DataContext property of the LayoutRoot grid. This enables all collections and data items to be used throughout the child elements of that grid.

<Grid x:Name="LayoutRoot" Background="#FFFFFFFF" 
          DataContext="{Binding Source={StaticResource BubbleData}}" >
     <chartingToolkit:Chart Margin="0,0,0,0" Title="Chart Title">
          <chartingToolkit:BubbleSeries 
               ItemsSource="{Binding Mode=OneWay, Path=Collection}" />
     </chartingToolkit:Chart>
</Grid>

The data is bound to the chart now, but the chart does not know which data goes where. In this example I want to show the counts per date. The means the Date property is the “Independent Value” which goes on the horizontal axis of the chart or the X axis.  The Count property depends on the Date property, thus it is called the “Dependent Value” which goes on the vertical, or Y, axis of the chart.

In Silverlight there are two ways to bind the collection properties to the charts axis. The first option is to set a binding to the “DependentValueBinding” property of the BubbleSeries. This is needed when you want to set more properties than only the “Path” property in the binding, like a conversion for example. This binding will look like the to earlier binding to the DataContext and the ItemsSource properties. When no other properties need to be set, there is a simpler way. Just set the “DependentValuePath” property to Path and the “IndependentValuePath” to Date. Both properties can be found in the “Common Properties” section when the BubbleSeries control is selected in Blend.

By default the Dependent Value is used to determine the size of the bubbles. This is not very useful, so there is a “SizeValuePath” property which is used in the same way as the dependent and independent value properties. Set this property to Size.

If everything went well, there should be a couple of random bubbles in the chart by now and your xaml should look something like:

<Grid x:Name="LayoutRoot" Background="#FFFFFFFF" 
          DataContext="{Binding Source={StaticResource BubbleData}}" >
     <chartingToolkit:Chart Margin="0,0,0,0" Title="Chart Title">
          <chartingToolkit:BubbleSeries 
               ItemsSource="{Binding Mode=OneWay, Path=Collection}" 
               DependentValuePath="Count" 
               IndependentValuePath="Date" 
               SizeValuePath="Size"/>
     </chartingToolkit:Chart>
</Grid>

Styling the Chart

Now it’s time for the fun part: Creating a style and template for the bubbles, or data points. First, create a style by selecting the BubbleSeries control from the element tree and going to “Object”in the menu bar. Select “Edit Other Styles…”, than “Edit Datapointstyle…” and finally “Edit a copy…”. This shows a dialog that let’s you create a new resource for the style. Name the style BubbleDataPointStyle and click “Ok”.

That’s it for the style. Creating the template is just as easy. Go to the “Miscellaneous” section of the style’s properties and click on the little square next to the “Template” property. Click on “Convert to new resource…” to create a new template and use the default as a base for that. The “create ControlTemplate resource” appears. Name the template “BubbleDateTemplate” and click “Ok” . Notice the green border around the the template textbox, indicating that a resource is being used for this property. Click on this Textbox and select “Edit Resource…” from the popup to start editing the template.

Start by deleting the children of the Root  control, this the 2 ellipses and the 2 highlights. Click on “>>” in the toolbar to get to the assets and select the “ViewBox”. Add the ViewBox control to the Root and set is width and height to auto.

Because the Bubbles are resized to according to a specified value from the data, all contents need to be scaled and stretched properly too. The ViewBox control is the solution for scaling difficulties, because everything inside a ViewBox will be scaled and stretched to the size of the ViewBox, independent of their individual properties.

Next, add a Border to the ViewBox. Set it’s width and height to 100, it’s corner radii to 5, it’s border widths to 1 and it’s BorderBrush to a full black. To use the color defined in the BubbleSeries control, click the little square next to the Background property. Select “Template Binding…” and set it to “Background”. To give the bubbles a nice see-thru look, set the Opacity of the Border to 75%.

At this point the template should look a bit like this, although the color may be different, because is randomly chosen.

TemplateBorder

To layout the contents of bubble, add Grid to Border and set it’s Margins to 5.

Add Textblock to the grid to show some text on the bubble, and set the following properties: Margins to 0; Horizontal alignment to “stretch”; and Vertical alignment to “top”. Because I won’t look very good when the text is wrapping, disable the wrapping expanding the “Text” section to the “Advanced Properties” and setting the “TextWrapping” to “NoWrap”.

The Textblock needs to show the data from the Collection. Therefore a databinding is needed. To create this databinding, click on the little square next to the “Text” property of the Textblock in the “Common Properties” section and select “Data Binding…” . In the “Create Data Binding” dialog, check the “Use custom path expression”-checkbox and write Name in the textbox next to it. Click “Ok” to close the window and approve the databinding.

To exit the template editing mode and return to the scope of the UserControl, click on button just above the elements tree.

ReturnScopeToUserControl

The chart looks something like this now:

TemporaryExampleChart01

To easily get back to the template, go to the “Resources”-tab on the right side and click the resource button next to the BubbleDataTemplate.

EditResourceDataTemplate

To make the bubbles more appealing, add an image to the template. Click on the “>>” button in the toolbar to get to the asset library. By default the Image control isn’t showing up in the asset library. To find it, type “img” in the search textbox. Add the image control to the Grid and place it above the text, so that the text will be written on top of the image. The element tree looks something like below at this point:

ElementTree

The binding of the Image property to the Source property of the image control goes in the same way as described earlier with the textblock. First make sure the image control is selected. Next, click the little square next to the “Source” property in the “Common properties” section and select “Data Binding…”. Check the “Use custom path expression”-checkbox and write Image in the textbox next to it. Now click “Ok” to make the changes definitive.

Leave the template editing and go back to the userControl to have a look at what you’ve created.

FinishedChart

What’s next?

The chart’s in the Silverlight toolkit can have different states. The states commonly used are the “Reveal states”. Theses states are used when showing or hiding the datapoints in the chart. I recommend you experiment with these states.

 The sourcode for this tutorial can be downloaded here

 

Posted on Wednesday, April 1, 2009 11:02 PM Silverlight , Blend | Back to top


Comments on this post: Creating, Binding and Styling a Bubble Chart

# re: Creating, Binding and Styling a Bubble Chart
Requesting Gravatar...
Hi,

Excellent blog post!
Truly top notch.

I loved seeing of the new Blend 3 features come together with Silverlight Toolkit Charting (selecting a series in the "Objects and Timeline" pane, sample data, etc).

Really awesome blog post. The custom BubbleDataPoint template you created looks amazing.

I've added this blog post to our official Charting resources up on codeplex:
http://silverlight.codeplex.com/Wiki/View.aspx?title=Silverlight%20Toolkit%20Overview%20Part%202

Keep up the excellent blogging you've been up to.

-- Justin Angel
Silverlight Toolkit Program Manager
Left by Justin Angel on Apr 02, 2009 7:01 AM

# re: Creating, Binding and Styling a Bubble Chart
Requesting Gravatar...
Is there a way to indicate a size value range? We want to use a bubble chart, but we want to limit the size of the bubbles since we may end up with quite a few on screen.
Left by Mark Larson on Jun 04, 2009 4:43 PM

# re: Creating, Binding and Styling a Bubble Chart
Requesting Gravatar...
The sourcecode doesn't seem to match the example. All i get is a bar chart - not a bubble chart?!
Left by David on Nov 10, 2009 6:15 PM

# re: Creating, Binding and Styling a Bubble Chart
Requesting Gravatar...
Thank you for pointing this out, David! I haven't got a clue on how this could have happened. I'm not able to fix the code at this moment, but as soon as I have the change I'll correct it.
Left by Timmy on Nov 10, 2009 8:09 PM

# re: Creating, Binding and Styling a Bubble Chart
Requesting Gravatar...
Thanks, look forward the update :)
Left by David on Nov 11, 2009 11:42 AM

# re: Creating, Binding and Styling a Bubble Chart
Requesting Gravatar...
The source has been updated. It should work now.
Left by Timmy on Nov 11, 2009 12:35 PM

# re: Creating, Binding and Styling a Bubble Chart
Requesting Gravatar...
Excellent, all works wonderfully - many thanks for this tutorial and for fixing the link :)
Left by David on Nov 11, 2009 2:08 PM

# re: Creating, Binding and Styling a Bubble Chart
Requesting Gravatar...
Nice chart styling application. I've never seen anything quite as unique as this before. Good application idea.
Left by Conference Pop Up Displays Today on Mar 23, 2010 12:30 PM

# re: Creating, Binding and Styling a Bubble Chart
Requesting Gravatar...
Hi,
Nice article
Is it possible to make a bubble chart like in excell?
I really need such an option. I am also willing to pay you for such a thing.
Left by Efi on Aug 19, 2010 4:55 PM

# re: Creating, Binding and Styling a Bubble Chart
Requesting Gravatar...
Thanks for this. Still new to Silverlight but learning fast!
Left by Cheap Pop Up Displays on Nov 02, 2010 7:56 PM

# re: Creating, Binding and Styling a Bubble Chart
Requesting Gravatar...
while adding reference to System.Windows.Controls.DataVisualization.Toolkit.dll in the silverlight project, Expression Blend is throwing an pop up box saying "System.Windows.Controls.DataVisualization.Toolkit.dll could not be referenced because it was not built against the silverlight runtime. Silverlight projects can only work with Silverlight assemblies"
Left by Aditya Singh on Aug 25, 2011 9:21 AM

# re: Creating, Binding and Styling a Bubble Chart
Requesting Gravatar...
seems good, will surely try
Left by MissMir on May 16, 2012 2:17 PM

Your comment:
 (will show your gravatar)
 


Copyright © Timmy Kokke | Powered by: GeeksWithBlogs.net | Join free