ASP.NET 4.0 Chart Control to Display Statistical and Analytical Data

I was conducting an ASP.NET 4.0 training for a webdev team recently. The participants were working on a project where they were supposed to display a statistical report using charts. Now with ASP.NET 3.5 Charts, this was somewhat challenging since no default charts controls were provided in 3.5. However In ASP.NET 4.0, adding charts to applications is much simpler.

In ASP.NET 4.0, the Chart control is provided under the namespace ‘System.Web.UI.DataVisualation.Charting’. It provides a Chart class which serves as a root class for all chart controls. This class defines the ‘Series’ property of the type SeriesCollection class. This class defines grouping of related data points and attribute for the series. The Chart class also defines a chart area collection of the type ChartArea. This class represents the chart area on the chart image.

Step 1: Open VS2010 and create a ASP.NET 4.0 blank web site, name it as ‘ASPNET40_Charting’. To this web site, add a new WebForm and name it as ‘WebForm_Charts.aspx’.

Step 2: Drag-Drop  a CheckBox, DropDownList and Chart control on the webform as shown below:

Set the control names as below:



Step 3: In the Web Site, add a new class file and name it as ‘DataClasses.cs’. Add the following classes in it:



Step 4: In the code-behind, write the following code in the loaded event:



The above code gets all chart names from the enumeration ‘SeriesChartType’ and these names are displayed in the DropDownList.

Step 5: In the SelectedIndexChanged event of the Drop-Down List, write the following code: (Note: Please read the comments summary).



Step 6: Run the application and select the Chart-Name for the Drop-Down, the result will be as shown below:



Now check the ‘View as 3D’ check box and select the chart from the Drop-Down. The result will be as shown below:



Conclusion: Since developers are provided with out-of-box charts in ASP.NET 4 web development, it is easy for the developers to represents the statistical and analytical reports.

Download the Source Code