Archive for the ‘Pie Chart’ Category

I recently returned from a break and had some time to add a few minor features to the pie chart beta. If you have any ideas for features not included in this update, now would be a good time to let me know.

IsDoughnut Property and GapScale

One comment recently requested the ability to create a doughnut chart in Silverlight Beta 2. This functionality has now been added and can be switched on or off via the IsDoughnut property. The size of the hole in relation to the size of the pie-chart can also be controlled via the GapScale property:

The code above shows how a 2D Path (segmentPath) object is assembled for either a single pie-chart segment or a single doughnut segment. A close look reveals four Point objects named A,B,C,D and two ArcSegment objects, one drawn in a Clockwise direction and the other in the default CounterClockwise direction. The following image illustrates the location of these Points and the two ArcSegment objects when the IsDoughnut property is set to true.

For a normal pie-chart segment (the default or when IsDoughnut is false) examination of the code above reveals that the Clockwise ArcSegment ending in point C is not required and that Point B becomes the center of the pie-chart.

Label Location, Color and Visibility

The labels can now be displayed inside or outside of the segments and their color and visibility can be controlled via the LabelLocation, LabelStroke and LabelVisibility properties respectively :

There have also been a few smaller updates in areas such as the MouseEnter animation and the addition of extra buttons to the demo to demonstrate changing values at runtime. If you have an idea you would like to see in a future beta of this control, please let me know.

The API and documentation changes and the fact that Beta2 will not run applications that target Beta1 has obliged me to update links and all the samples previously posted on this blog such as the Pie Chart and Stock List Demo. From this point on all posts will target Silverlight 2 Beta 2.

I started with a brand new Beta 2 solution when updating each sample to keep things clean. The changes required to make the the new Pie Chart Solution work included updating the parameter list for the calls to the static Register method for the Dependency properties in the PieChart class now they require an instance of the PropertyMetadata class; a similar change to the Storyboard.SetTargetProperty method calls in PieLayoutManager that now require an instance of the PropertyPath class. The need to add the MouseEnter animation Storyboard to the resources of the PieChart Canvas is removed thanks to the new support for the ability to create Storyboards in code that can animate parts of the render tree without having to be added to it.

The Stock List Demo Part 3 sample required the same changes for Storyboard.SetTargetProperty and also benefited from the fact that Storyboards created in code no longer have to be added to the Resources of a FrameworkElement for the stock highlight animations to work. Other changes I ran into included that EventHandler<T> now requires T to inherit from EventArgs, the DataGrid’s AutoGenerateColumns is now true by default, displays itself using a smaller font by default and supports auto-sized columns.

Please download the latest version for a substantial demonstration of many areas of Silverlight development including Socket interaction that complies with the new policy changes in Silverlight 2 Beta 2.

As part of the upgrade I did run into this issue of not being able to discover a WCF web-service in the same solution after installing Beta 2 when creating the new solution for Stock List Demo 3. The workaround at the end of the thread here solved the problem.

Please feel free to download the updated samples and as usual let me know any thoughts by adding a quick comment.

In an attempt to demonstrate some of the powerful 2D graphics support in Silverlight 2.0, I recently developed a re-usable implementation of a pie chart. Having lately read some forum postings asking for a pie chart that works with Silverlight 2.0, I thought I’d publish what I’ve come up with.

Full source code and demos are available, the following headings show some of the main features as well as examples of pie charts you can create :

This provides support for databinding, animation of the chart. View the demos and download the code for more information.

8. Efficient drawing and smooth mouse over animation :

Chart is drawn efficiently using framework classes in the System.Windows.Shapes and System.Windows.Media namespaces such as Path, LineSegment, ArcSegment and TranslateTransform. MouseEnter animation is smooth, using a Storyboard in the System.Windows.Media.Animation namespace to animate the rendering of a TranslateTransform.