Pie Chart In Silverlight 3 Application

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:


{codecitation class="brush: xml; gutter: true;" width="650px"}

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

{/codecitation}

Now we will add some data into it.
Create a class called Appointment and add the following code into it.

{codecitation class="brush: csharp; gutter: true;" width="650px"}

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

}

{/codecitation}

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.

{codecitation class="brush: csharp; gutter: true;" width="650px"}

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


{/codecitation}

Now we will add values.

{codecitation class="brush: csharp; gutter: true;" width="650px"}

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



{/codecitation}

Now we will bind our data to Pie Series.

{codecitation class="brush: xml; gutter: true;" width="650px"}

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


{/codecitation}

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.

{codecitation class="brush: csharp; gutter: true;" width="650px"}

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
((PieSeries)TypicalChart.Series[0]).ItemsSource = appointments.GetTimeDistribution();
}


{/codecitation}

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. Thank you

About the Author

Diptimaya Patra Description :I am a Master in Computer Application (MCA) from SRM University, Chennai. I am MCTS in ASP.Net Web Development, and MOSS 2007 Administration. I have extreme exposure to Microsoft Technologies in recent times like Silverlight 2, Silverlight 3. I am from Cuttack, Orissa. You can reach me using this mail (diptimaya.patra@gmail.com). Currently I am working as a Software Engineer in UST Global Inc in Trivandrum Center. Occupation :Software Engineer Company : UST Global. Location : India Follow me at twitter : http://twitter.com/dpatra