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.