.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Create PIE Chart in Silverlight Application

Posted By:Diptimaya Patra       Posted Date: March 21, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

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

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.

PieChartImg1.gif


Go ahead and add a Pie Series into your application.
You can find it in Asset Library.

PieChartImg2.gif


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 GetTimeDistribution(this List appts)
{
  Dictionary myTimeDistribution = new Dictionary();

  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 appointments;

public MainPage()
{
  InitializeComponent();
   CreateTimeLists();
}

private List CreateTimeLists()
{
  appointments = new List 
  { 
  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.


  
  
  
  

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.
PieChartImg3.gif

That's it you have successfully used Pie Series in Silverlight 3.
Enjoy Coding.
 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend