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.
