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.
