ASP.NET 4 Chart Control


One of the best new feature of ASP.NET 4.0 Web Form (yes it’s still alive) is the new Chart control. There have been a need for a Chart control for a long time – from version 1.0. Folks have used custom controls from various sources or written their own one. Now in ASP.NET 4.0 Microsoft have introduced a Chart control ultimately. This could be used in ASP.NET MVC also apart from Web Forms.

The Chart control provides all different type of charts like Column, Bar, Line, Area, Pie, Doughnut (to name a few). Following is an example of Chart with chart type Column.

image

To set up a basic chart control you have to set a few properties like XValueMember and  YValueMembers. In the example I have displayed the Total Sales figure for few cities. Following is the page markup –

image

As you can see I’ve set XValueMemeber to City and YValueMembers to TotalSales – both of them are properties in my DTO –

image

The chart type could be set in markup or through code for the series –

image

chtSalesData.Series[“Series1”].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Bar;

image         image   

image         image

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s