Silverlight 2.0 Pie Chart (Beta)

Edited on 26/June/2008 : Code download and Demos updated to support Silverlight 2 Beta 2

Edited on 20/October/2008 : Code download and Demos updated to support Silverlight 2 RTW

Basic Pie Chart Live Demo

Video Pie Chart Live Demo

Code Download for Silverlight 2 RTW

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 :

1. Basic Silverlight 2.0 Pie Chart :

2. Supports Radial Gradient, Linear Gradient and Video segments :

3. How to create basic Pie Chart in XAML only :

<charts:PieChart x:Name="pieChart1" Center="150.0,150.0" Radius="100.0"
                 Stroke="LightGray" StrokeThickness="2.0" FontSize="10">
    <charts:PieSegment Percentage="35" Foreground="Orange" />
    <charts:PieSegment Degrees="38" Foreground="Blue" />
    <charts:PieSegment Degrees="72" Foreground="Green" />
    <charts:PieSegment Degrees="101" Foreground="Red" />
    <charts:PieSegment Degrees="23" Foreground="Purple" />
</charts:PieChart>

4. How to create basic Pie Chart in C# only :

PieChart pieChart1 = new PieChart()
{
    Center = new Point(150.0, 150.0),
    Radius = 100.0,
    Stroke = new SolidColorBrush(Colors.LightGray),
    StrokeThickness = 2.0,
    FontSize = 10.0,
    Segments = new PieSegmentList()
    {
        new PieSegment() { Percentage = 35, Foreground = new SolidColorBrush(Colors.Orange) },
        new PieSegment() { Degrees = 38, Foreground = new SolidColorBrush(Colors.Blue) },
        new PieSegment() { Degrees = 72, Foreground = new SolidColorBrush(Colors.Green) },
        new PieSegment() { Degrees = 101, Foreground = new SolidColorBrush(Colors.Red) },
        new PieSegment() { Degrees = 23, Foreground = new SolidColorBrush(Colors.Purple) }
    }
};

// XAML contains <Canvas x:Name="Canvas1" />
Canvas1.Children.Add(pieChart1);

5. Specify segment size in Degrees or as a Percentage :

6. View changes as you type in Visual Studio 2008 Silverlight 2.0 Designer :

7. Implemented using Dependency Properties and ObservableCollection :

The chart will re-draw at runtime when you specify a new Segments Collection or modify the Center or Radius properties for example.

// Chart will redraw at new size and location
pieChart1.Radius = 150.0;

pieChart1.Center = new Point()
{
    X = 150.0,
    Y = 250.0
};

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.

9. View running demos and download source :

Basic Pie Chart Live Demo

Video Pie Chart Live Demo

Code Download for Silverlight 2 RTW

Let me know any thoughts, requests, questions etc by posting a comment, it will help prioritise my todo list and I’m only too happy to hear if this is useful to you or not.

About these ads