This tutorial shows you how to use the new MS Chart to render a Column Chart from a DataTable source in C#.

In this tutorial, you will learn how to use the new MS Chart to render a bar graph from a DataTable, and show just how easy Microsoft make it for us to do so. We can use the Chart control like other ASP.NET data controls, and assign it a data source.
If you need help with installing Microsoft Chart Controls, please read this tutorial.

In this example, we will be programmatically instantiating and populating a DataTable on button click. In a real-world application, the chart would be bound with data from an external source, like a database or XML file. However, the results will be similar.

Before we begin anything, and even start up Visual Studio.NET, we first need to download and install the Chart extension. You can download from the above web address, and the install is a quick process – consisting of two EXEs.
Once installed, we can start up Visual Studio and create a new Web Application. Then the first thing to do is add two references in the Web.config:
In system.web/httpHandlers, add the following:

Then in system.webserver/handlers, add this:

After adding the references, we can begin to implement Charts into our ASPX page. You can add the Chart to the toolbox by right-clicking an empty space on the toolbox and selecting Choose Items, then navigating to the install folder (Program Files/Microsoft Chart Controls/Assemblies). You will want to select the System.Web.DataVisualization.dll to add to the toolbox.

To begin, either drag the Chart onto your ASPX page from the toolbox, or add the following code manually:

If you dragged from the toolbox, you should also notice the following added to the top of the page. If you added manually, then this code also needs to be added below the page directive:

We do not need to do anything further to this page for this example. We could change the look and feel of the chart using styles, but this tweaking can be left until we actually know what the graph will look like.
We will now move to the code-behind where we will add our logic to display the graph.

Before we code anything related to the Chart, in order to use Charting and DataTables, we need to add the following references:

As mentioned earlier in this tutorial, we are going to hard-code a datatable for use in this exampl. We will be keeping it simple and use only two columns for illustration purposes – Name, and Age:

On Page_load, we can set the type of graph we wish to render. Let’s use column:

Now, we will render the graph simply by setting the datasource of the Chart control:

Here, we are setting which columns within the DataTable are to be set to which axis. This will also lead the axes to take on the correct labels. Once bound, the data will be displayed in graph form.

The other way to achieve this result, which is a little more messy, is to loop through the values individually and then plot them on the graph:

Obviously for a computer, this is virtually instantaneous, but the code is a little more cumbersome than simply setting the datasource and axes. Both methods have their disadvantages and advantages with different data sources.

We’ll now clean up the code a little, adding a button and implementing AJAX. Simply add a ScriptManager and UpdatePanel to the ASPX page:

And then we populate the datatable and set the graph datasource on button click:

Download Source Files