Getting Started with Chart control in ASP.Net 4.0

In this article I am going to demonstrate the Chart control available in ASP.Net 4 and Visual Studio 2010. Most of the web applications need to generate reports for business users. The business users are happy to view the results in a graphical format more that seeing it in numbers.

For the purpose of this demonstration, I have created a sales table. I am going to create charts from this sale data. The sale table looks as follows

I have created an ASP.Net web application project in Visual Studio 2010. I have a default.aspx page that I am going to use for the demonstration.

First I am going to add a chart control to the page. Visual Studio 2010 has a chart control. The Chart Control comes under the Data Tab in the toolbox.

Drag and drop the Chart control to the default.aspx page. Visual Studio adds the below markup to the page.

<asp:Chart ID="Chart1" runat="server"></asp:Chart>

In the designer view, the Chart controls gives the following output.

As you can see this is exactly similar to other server controls in ASP.Net, and similar to other controls under the data tab, Chart control is also a data bound control. So I am going to bind this with my sales data.

From the design view, right click the chart control and select “show smart tag”

Here you need so choose the Data source property and the chart type.

From the choose data source drop down, select new data source.

In the data source configuration wizard, select the SQL data base and write the query to retrieve the data. At first I am going to show the chart for amount of sales done by each sales person. I am going to use the following query inside sqldatasource select command.

“SELECT SUM(SaleAmount) AS Expr1, salesperson FROM SalesData GROUP BY SalesPerson”

This query will give me the amount of sales achieved by each sales person.

The mark up of SQLDataSource is as follows.

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SampleConnectionString %>" SelectCommand="SELECT SUM(SaleAmount) as amount, SalesPerson FROM SalesData GROUP BY SalesPerson"></asp:SqlDataSource>

Once you selected the data source for the chart control, you need to select the X and Y values for the columns. I have entered salesperson in the X Value member and amount in the Y value member.

After modifications, the Chart control looks as follows

Click F5 to run the application. The output of the page is as follows.

Using ASP.Net it is much easier to represent your data in graphical format. To show this chart, I didn’t even write any single line of code. The chart control is a great tool that helps the developer to show the business intelligence in their applications without using third party products.

I will write another blog that explore further possibilities that shows more reports by using the same sales data.

If you want to get the Project in zipped format, post your email below.