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!



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

7 comments:

Retro said...

Hi
Great example
But how do you add muliple line series in C# to the chart?

Anonymous said...

Here is an example of how to add multiple Line Series:

http://stackoverflow.com/questions/6101746/how-do-i-chart-multiple-lines-on-one-graph-in-silverlight-4

Laxman said...

hi
Great example
but how to connect chart to database using WCF ria service

Laxman

Success is in d wy u think said...

hi i need stacked column chart using silverlight toolkit, can some one please tel me how to do this.
Thanks.

Margriet Bruggeman said...

Take a look at this article: http://sharepointdragons.com/2011/12/12/about-the-chart-controls-in-the-silverlight-5-toolkit/.

Rashmi RaviKumar Jois said...

THANKS A LOT ,... WOULD BE HELPFUL TO KNOW HOW TO ACHIEVE DRILLDOWN IN SILVERLIGHT 4 CHARTS
THANKS

Anonymous said...

Hi,

please help me on the below issue.

how to arrange legend top or bottom of the chart .