Pie Chart In Silverlight 3 Application


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.