Silverlight 4 Chart Example

The Silverlight Toolkit contains controls like the Chart control to make data visualization easy. Let us see an example of using Silverlight 4 Charts in your applications.

Silverlight Toolkit is a free add-on available on Microsoft’s CodePlex site and comes with some rich controls, including the chart control. For smaller applications, the Silverlight Chart control can be a very good alternative when compared to the professional charting controls in the market.

The Silverlight chart control allows you to create single and multiple series charts or even charts that change dynamically as the data in it changes. At the time of this writing, you can render data visually in one of the following different chart types: Area, Bar, Bubble, Column, Line, Pie, Scatter, and Stacked.

Let us see an example of how to use the Silverlight Chart Control to create a Pie chart, by binding it to a List<> collection.

Assuming you have downloaded the Silverlight control toolkit, Open VS 2010 and drag and drop a Chart control from the Toolbox to your design area. Then add a chart series and a LineSeries to the chart as shown below:

All you did in the markup shown above was to add a LineSeries, provide an ItemsSource (List<Customers>) and configure the Dependent (X-axis) and Independent values (Y-axis).

The last step is to configure your ItemSource. Write the following code in the codebehind

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(UC_Loaded);
    }

    void UC_Loaded(object sender, RoutedEventArgs e)
    {
        List<Customer> cust = new List<Customer>();
        cust.Add(new Customer() { CustName = "Mark", Orders = 30 });
        cust.Add(new Customer() { CustName = "Peter", Orders = 60 });
        cust.Add(new Customer() { CustName = "Manish", Orders = 20 });
        cust.Add(new Customer() { CustName = "Robert", Orders = 10 });
        cust.Add(new Customer() { CustName = "Jacob", Orders = 70 });
        this.DataContext = cust;
    }
}

public class Customer
{
    public string CustName { get; set; }
    public int Orders { get; set; }
}

That’s it. Run the application and you have a LineChart!