Introduction

In this article we will explore on Pie Chart in Silverlight 3. Pie Chart comes with Silverlight 3 Toolkit.

Crating Silverlight Project

Fire up Expression Blend 3 and create a Silverlight Application. Name it as PieChartInSL3.

Go ahead and add a Pie Series into your application.

You can find it in Asset Library.

By adding a Pie Series, you just added an Assembly System.Windows.Controls.DataVisualization.

And Blend automatically refers to the Namespace.

If you see the xaml code behind you will find the following:

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

Now we will add some data into it.

Create a class called Appointment and add the following code into it.

public class Appointment

{

public int Id { get; set; }

public string AppName { get; set; }

public string AppointmentDetails { get; set; }

public int Duration { get; set; }

public Appointment()

{

}

public Appointment(int id, string appName, string appointmentDetails, int duration)

{

Id = id;

AppName = appName;

AppointmentDetails = appointmentDetails;

Duration = duration;

}

Pie Series takes Key Value pair as it's data. So we will create a class named AppointmentHelper which will convert a Dictionary to Key Value Pair.

public static Dictionary<String, int> GetTimeDistribution(this List<Appointment> appts)

{

Dictionary<String, int> myTimeDistribution = new Dictionary<string, int>();

var appointments = (from time in appts

select time.AppName).Distinct();

foreach (var app in appointments)

{

var time = (from pjts in appts

where pjts.AppName == app

select pjts.Duration).Sum();

myTimeDistribution.Add(app, time);

}

return myTimeDistribution;

}

Now we will add values.

List<Appointment> appointments;

public MainPage()

{

InitializeComponent();

CreateTimeLists();

}

private List<AppointmentDTO> CreateTimeLists()

{

appointments = new List<Appointment>

{

new Appointment { Id=1, AppName="Meeting", AppointmentDetails="Video COnference", Duration=30},

new Appointment { Id=1, AppName="Call", AppointmentDetails="Audio COnference", Duration=90},

new Appointment { Id=1, AppName="Session", AppointmentDetails="Session for Silverlight", Duration=120}

};

return appointments;

}

Now we will bind our data to Pie Series.

<chartingToolkit:Chart x:Name="TypicalChart" Title="Typical Pie Chart">

<chartingToolkit:Chart.Series>

<chartingToolkit:PieSeries Margin="0,0,20,20" d:LayoutOverrides="Width, Height" Title="Pie Chart Sample" IndependentValueBinding="{Binding Path=Key}"

DependentValueBinding="{Binding Path=Value}"/>

</chartingToolkit:Chart.Series>

</chartingToolkit:Chart>

As you see from the above code I have added two properties as IndependentValueBinding and DependentValueBinding. We need to give the Binding Path to respective key and value.

Now Type cast the chart to Pie Series and assign the ItemSource property.

private void UserControl_Loaded(object sender, RoutedEventArgs e)

{

((PieSeries)TypicalChart.Series[0]).ItemsSource = appointments.GetTimeDistribution();

}

Now go ahead run the application to see the Pie Chart.

That's it you have successfully used Pie Series in Silverlight 3.

Enjoy Coding.

4 Comments

Join the conversation! Your thoughts help the community grow.

Anindita Basak15y ago
nice article ..
Norwill Gutierrez16y ago
thanks a lot, i doit a litles change to your sample and post in my blog. http://developergutierrez.wordpress.com/
tofu Lette17y agoedited
Thank you very much. This is the first example i found that works and is easy to understand. You saved my day!!
Sanjiv17y agoedited
How do I get dynamic values to be displayed in SL3.0 chart either within the pie sections or around it? The data set we have is dynamic. Thanks.

Pie Chart In Silverlight 3

Reactions

Introduction

Crating Silverlight Project

4 Comments