One of the newest controls available to you now with ASP.NET 4 is the Chart server control. This control made its way into the core part of ASP.NET through a previous acquisition of the Dundas charting company and is a great control for getting you up and running with some good-looking charts.
The new Chart server control supports many chart types including:
➤ Point
➤ FastPoint
➤ Bubble
➤ Line
➤ Spline
➤ StepLine
➤ FastLine
➤ Bar
➤ StackedBar
➤ StackedBar100
➤ Column
➤ StackedColumn
➤ StackedColumn100
➤ Area
➤ SplineArea
➤ StackedArea
➤ StackedArea100
➤ Pie
➤ Doughnut
➤ Stock
➤ CandleStick
➤ Range
➤ SplineRange
➤ RangeBar
➤ RangeColumn
➤ Radar
➤ Polar
➤ ErrorBar
➤ BoxPlot
➤ Renko
➤ ThreeLineBreak
➤ Kagi
➤ PointAndFigure
➤ Funnel
Those are a lot of different chart styles! You can find the Chart server control in the toolbox of Visual Studio 2010 underneath the Data tab. It is part of the System.Web.DataVisualization namespace. When you drag it from the toolbox and place it on the design surface of your page, you are presented with a visual representation of the chart type that are you going to use. See Figure 1 for an example.
 |
| Figure 1 |
Open up the smart tag for the control, and you find that you can assign a data provider for the chart as well as select the chart type you are interested in using. Changing the chart type gives you a sample of what that chart looks like (even if you are not yet working with any underlying data) in the design view of the IDE.
Create a new web application and add the AdventureWorks database to your App_Data folder within the application. After that is accomplished, drag and drop the Chart server control onto the design surface of your page. From the smart tag of the control, select <New Data Source> from the drop-down menu when choosing your data source. Work your way through this wizard making sure that you are choosing a SQL data source as your option. As you work through the wizard, you are going to want to choose the option that allows you to choose a custom SQL statement and use the following SQL for this operation:
SELECT TOP (5) Production.Product.Name, Sales.SalesOrderDetail.OrderQty
FROM Sales.SalesOrderDetail
INNER JOIN Production.Product
ON Sales.SalesOrderDetail.ProductID = Production.Product.ProductID
ORDER BY Sales.SalesOrderDetail.OrderQty DESC
With that in place and the new chart server control bound to this data source control, you now find that you have more options in the smart tag of the chart server control. This is presented in Figure 2. Now you can select the series data members and choose what is on the x-axis and what is on the y-axis. I have assigned the Name of the product to be on the x-axis and the quantity ordered to be on the y-axis.
 |
| Figure 2 |
Code for Charting with the new Chart server control
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebServerControls.WebForm1" %>
<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>MultiView Server Control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1"
Width="500px">
<Series>
<asp:Series ChartType="Bar" Name="Series1" XValueMember="Name"
YValueMembers="OrderQty" YValuesPerPoint="2">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT TOP (5) Production.Product.Name,
Sales.SalesOrderDetail.OrderQty FROM Sales.SalesOrderDetail
INNER JOIN Production.Product ON
Sales.SalesOrderDetail.ProductID =
Production.Product.ProductID ORDER BY
Sales.SalesOrderDetail.OrderQty DESC">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
From this, you can see that there isn’t much code needed to wire everything up. Most notably, you can see that putting this Chart server control on your page actually added a @Register directive to the top of the page. This is unlike most of the ASP.NET server controls. Within the <Series> element of this control, you can have as many series as you want, and this is something that is quite common when charting multiple items side by side (such as a time series of prices for two or more stocks).
Running this code, you get results similar to what is presented here in Figure 3.
 |
| Figure 3 |
No comments:
Post a Comment