ptg 694 . Area—Shows the rate of change over time by shading the area under the line . Bar—Similar to a Column chart but displays the values horizontally instead of vertically . Line—Displays changes in data by rendering data points as a single continuous line . Point—Displays each value as a point on the chart . Pie—Shows how much each data point contributes to the entire data set by render- ing it as a percentage . Box Plot—Shows how data is distributed across a data set by displaying one or more boxes . Candlestick—Commonly used to display stock information, such as the high and low values, along with the opening and closing prices NOTE You can find the complete set of possible char t types on the MSDN website at http://msdn.microsoft.com/en-us/library/dd489233(VS.100).aspx. Sorting and Filtering Data An instance of a chart control contains a DataManipulator property that can be used to sort and filter the chart data. You can sort any series in the chart by any axis (X, Y, Y2, and so on), and you can choose to sort in either an ascending or descending order. The DataManipulator property provides a Sort method to do this. To use the sorting functionality, your chart must already be populated with data. To ensure this, we wait until the OnDataBound event to invoke our sorting code. Listing 15.3 sorts the movie categories from highest count to lowest count by executing the chtMovies_DataBound method after it binds to the SqlDataSource (see Figure 15.3). CHAPTER 15 Using the Chart Control From the Library of Wow! eBook ptg 695 FIGURE 15.3 Sorting a chart. Chart Control Fundamentals 15 LISTING 15.3 SortChart.aspx <%@ Page Language=”C#” %> <%@ Register Assembly=”System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35” Namespace=”System.Web.UI.DataVisualization.Charting” TagPrefix=”asp” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> void chtMovies_DataBound(object sender, EventArgs e) { chtMovies.DataManipulator.Sort(PointSortOrder.Descending, “Y”, ➥ “MovieCategorySeries”); } </script> <html xmlns=”http://www.w3.org/1999/xhtml”> <head id=”Head1” runat=”server”> <title>Show Chart</title> </head> <body> <form id=”form1” runat=”server”> <div> From the Library of Wow! eBook ptg 696 FIGURE 15.4 Filtering chart data. <asp:Chart ID=”chtMovies” runat=”server” DataSourceID=”srcMovies” OnDataBound=”chtMovies_DataBound”> <Series> <asp:Series Name=”MovieCategorySeries” XValueMember=”Category” YValueMembers=”Count”> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name=”MovieChartArea”> </asp:ChartArea> </ChartAreas> </asp:Chart> <asp:SqlDataSource ID=”srcMovies” ConnectionString=”<%$ ➥ ConnectionStrings:Movies %>” SelectCommand=”CountMoviesInCategory” SelectCommandType=”StoredProcedure” runat=”server” /> </div> </form> </body> </html> Filtering chart data is similar to sorting it. The DataManipulator provides a FilterTopN method that enables you to only display the top “n” number of data points. For example, Listing 15.4 shows only the three movie categories with the highest counts (see Figure 15.4). CHAPTER 15 Using the Chart Control From the Library of Wow! eBook ptg 697 Chart Control Fundamentals 15 LISTING 15.4 FilterChart.aspx <%@ Page Language=”C#” %> <%@ Register Assembly=”System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35” Namespace=”System.Web.UI.DataVisualization.Charting” TagPrefix=”asp” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> void chtMovies_DataBound(object sender, EventArgs e) { chtMovies.DataManipulator.FilterTopN(3, “MovieCategorySeries”, “MovieCategorySeries”, “Y”, true); } </script> <html xmlns=”http://www.w3.org/1999/xhtml”> <head id=”Head1” runat=”server”> <title>Show Chart</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Chart ID=”chtMovies” runat=”server” DataSourceID=”srcMovies” OnDataBound=”chtMovies_DataBound”> <Series> <asp:Series Name=”MovieCategorySeries” XValueMember=”Category” YValueMembers=”Count”> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name=”MovieChartArea”> </asp:ChartArea> </ChartAreas> </asp:Chart> <asp:SqlDataSource ID=”srcMovies” ConnectionString=”<%$ ➥ ConnectionStrings:Movies %>” SelectCommand=”CountMoviesInCategory” SelectCommandType=”StoredProcedure” runat=”server” /> </div> </form> </body> </html> From the Library of Wow! eBook ptg 698 CHAPTER 15 Using the Chart Control FIGURE 15.5 Displaying the mean. NOTE It is also possible to define custom sorts and filters for your chart. The DataManipulator provides a Sort method that takes an object of type IComparer as a parameter, along with a Filter method that takes an object of type IDataPointFilter as a parameter. You can write classes that implement these inter- faces and build the logic that sorts or filters your data however you like. Using Statistical Formulas Statistical analysis goes hand in hand with charting and data visualization, and the ASP.NET charting control provides a wealth of functionality in this area. The DataManipulator property makes it easy to add statistical analyses to your charts. You can use the Statistics property on the DataManipulator to perform statistical analyses on data series without having to hand-write custom algorithms. (Though you can do that too, if necessary.) The code in Listing 15.5 illustrates adding a label to the top of a page that contains a chart showing the mean value of a series of data points (see Figure 15.5). LISTING 15.5 ShowMean.aspx <%@ Page Language=”C#” %> <%@ Register Assembly=”System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35” Namespace=”System.Web.UI.DataVisualization.Charting” TagPrefix=”asp” %> From the Library of Wow! eBook ptg 699 Chart Control Fundamentals 15 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> void chtMovies_DataBound(object sender, EventArgs e) { lblAverage.Text = chtMovies.DataManipulator.Statistics.Mean(“MovieCategorySeries”).ToString(); } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show Chart</title> </head> <body> <form id=”form1” runat=”server”> <div> <p>Average Number of Movies In a Category: <asp:Label ID=”lblAverage” ➥ runat=”server” /></p> <asp:Chart ID=”chtMovies” runat=”server” DataSourceID=”srcMovies” OnDataBound=”chtMovies_DataBound”> <Series> <asp:Series Name=”MovieCategorySeries” XValueMember=”Category” YValueMembers=”Count” > </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name=”MovieChartArea”> </asp:ChartArea> </ChartAreas> </asp:Chart> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”CountMoviesInCategory” SelectCommandType=”StoredProcedure” Runat=”server” /> </div> </form> </body> </html> From the Library of Wow! eBook ptg 700 CHAPTER 15 Using the Chart Control FIGURE 15.6 Displaying a strip line. You can also use these calculated statistics to display strip lines—a band across any axis to bring attention to a value or range of values. Strip lines can be defined declaratively on any axis within ChartArea. Listing 15.6 adds a strip line to display the average count (mean) within the chart by declaring a StripLine on the AxisY axis (see Figure 15.6). LISTING 15.6 ShowMeanStripLine.aspx <%@ Page Language=”C#” %> <%@ Register Assembly=”System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35” Namespace=”System.Web.UI.DataVisualization.Charting” TagPrefix=”asp” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> void chtMovies_DataBound(object sender, EventArgs e) { double average = ➥ chtMovies.DataManipulator.Statistics.Mean(“MovieCategorySeries”); lblAverage.Text = average.ToString(); chtMovies.ChartAreas[“MovieChartArea”].AxisY.StripLines[0].IntervalOffset = average; } </script> From the Library of Wow! eBook ptg 701 Chart Control Fundamentals 15 <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show Chart</title> </head> <body> <form id=”form1” runat=”server”> <div> <p>Average Number of Movies In a Category: <asp:Label ID=”lblAverage” ➥ runat=”server” /></p> <asp:Chart ID=”chtMovies” runat=”server” DataSourceID=”srcMovies” OnDataBound=”chtMovies_DataBound”> <Series> <asp:Series Name=”MovieCategorySeries” XValueMember=”Category” YValueMembers=”Count” > </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name=”MovieChartArea”> <AxisY> <StripLines> <asp:StripLine BorderColor=”Orange” BorderWidth=”2” /> </StripLines> </AxisY> </asp:ChartArea> </ChartAreas> </asp:Chart> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”CountMoviesInCategory” SelectCommandType=”StoredProcedure” Runat=”server” /> </div> </form> </body> </html> The Statistics property provides common formulas such as mean, median, normal distribution, correlation, and covariance. Advanced calculations specific to financial analy- ses can be performed by using the FinancialFormula method on the DataManipulator object. Some common financial formulas that can be calculated with the FinancialFormula method follow: From the Library of Wow! eBook ptg 702 CHAPTER 15 Using the Chart Control FIGURE 15.7 Displaying a financial analysis series. . MovingAverage—An average of data calculated over a period of time. . ExponentialMovingAverage—Similar to a MovingAverage, except recent days have more weight in the calculation. . Forecasting—Predicts the future values by analyzing the historical data. . MassIndex—Predicts the reversal of a trend by comparing the difference and range between the high and low values in a dataset. . StandardDeviation—Calculates the difference between values in a dataset. Listing 15.7 demonstrates how to perform financial analysis on a sample set of data and display it as a series (see Figure 15.7). LISTING 15.7 ShowFinancialAnalysis.aspx <%@ Page Language=”C#” %> <%@ Register Assembly=”System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35” Namespace=”System.Web.UI.DataVisualization.Charting” TagPrefix=”asp” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> void PopulateData() { From the Library of Wow! eBook ptg 703 Chart Control Fundamentals 15 chtPrices.Series[“PriceSeries”].Points.AddXY(“2/1/2010”, 50); chtPrices.Series[“PriceSeries”].Points.AddXY(“2/2/2010”, 75); chtPrices.Series[“PriceSeries”].Points.AddXY(“2/3/2010”, 35); chtPrices.Series[“PriceSeries”].Points.AddXY(“2/4/2010”, 85); chtPrices.Series[“PriceSeries”].Points.AddXY(“2/5/2010”, 45); chtPrices.Series[“PriceSeries”].Points.AddXY(“2/6/2010”, 87); chtPrices.Series[“PriceSeries”].Points.AddXY(“2/7/2010”, 72); } void Page_Load() { PopulateData(); chtPrices.DataManipulator.FinancialFormula(FinancialFormula.Forecasting, “Exponential,3,false,false”, “PriceSeries”, “ForecastSeries”); } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show Chart</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Chart ID=”chtPrices” runat=”server” > <Series> <asp:Series Name=”PriceSeries” ChartType=”Line” Color=”Red” BorderWidth=”2”></asp:Series> <asp:Series Name=”ForecastSeries” ChartType=”Line” ➥ Color=”Blue”></asp:Series> </Series> <ChartAreas> <asp:ChartArea Name=”PriceChartArea”> <AxisY> <LabelStyle Format=”C0” /> </AxisY> </asp:ChartArea> </ChartAreas> </asp:Chart> </div> </form> </body> </html> From the Library of Wow! eBook . <AxisY> <StripLines> < ;asp: StripLine BorderColor=”Orange” BorderWidth=”2” /> </StripLines> </AxisY> < /asp: ChartArea> </ChartAreas> < /asp: Chart> < ;asp: SqlDataSource. chtPrices.Series[“PriceSeries”].Points.AddXY(“2 /4/ 2010”, 85); chtPrices.Series[“PriceSeries”].Points.AddXY(“2/5/2010”, 45 ); chtPrices.Series[“PriceSeries”].Points.AddXY(“2/6/2010”, 87); chtPrices.Series[“PriceSeries”].Points.AddXY(“2/7/2010”,. <div> < ;asp: Chart ID=”chtPrices” runat=”server” > <Series> < ;asp: Series Name=”PriceSeries” ChartType=”Line” Color=”Red” BorderWidth=”2”>< /asp: Series> < ;asp: Series Name=”ForecastSeries”