Silverlight 4 Chart Example

Tweet

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!

Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.