Creating ASP.NET Charts with .netCharting Enterprise Edition

Introduction

You can use .netCharting Enterprise Edition to generate and display advanced charts in your ASP.NET applications. This product was designed for the serious developer who needs to graphically display complicated data in a professional manner. .netCharting Enterprise Edition is a commercial product produced by Corporate Web Solutions. You can download a trial version of this software from www.DotNetCharting.com.

The best feature of .netCharting is the number of different types of charts that this product supports. As you would expect, you can use .netCharting to display standard charts such as bar charts, pie charts, and scatter charts. However, this product also supports several advanced types of charts such as bubble, radar, donut, and financial charts. If you can visualize it, you most likely can generate it.

Another great feature of .netCharting is its formatting support. You are provided with complete control over the appearance of your charts. For example, you can create 3D charts, transparent charts, and charts with drop shadows. You also have control over the formatting of the various types of labels displayed in your charts.

.netCharting also supports a variety of different data sources. You can generate charts using data retrieved from a SQL database. You can define your database queries inline or by using stored procedures. You can even use .netCharting to display data retrieved from an Excel spreadsheet.

Finally, .netCharting enable you to create interactive "drill down" charts. You can create charts that contain regions which you can click to display more detailed data.

In this article, you'll learn how to build basic charts by using .netCharting edition. You'll create basic bar, pie, and drill down charts and learn how you can customize their appearance.

Creating a Simple Chart

.netCharting Enterprise Edition consists of two main objects: the Chart control and the Series object. The Chart control is used to display a chart on a page. You use the Chart control to specify global properties of a chart such as its type and overall appearance.

A chart consists of one or more series of numbers. For example, you might want to create a chart that displays a series of numbers which represent your company sales by region. Or, you might want to display two series of numbers in a chart side-by-side which compare last year's sales with this year's sales.

A particular series of number is represented by the Series object. After you create a Series object, you display the series in a chart by adding the Series object to the Chart control's SeriesCollection collection.

For example, the ASP.NET page in Listing 1.0 displays a bar chart which displays the number of units in stock for each product (see Figure 1.0 for the results):

Listing 1 using VB.NET

<%@ Page Language="VB" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<script runat="server">

Sub Page_Load()
    Dim objSeries As New Series()
    objSeries.ConnectionString = "server=localhost;uid=sa;pwd=secret;database=Northwind"
    objSeries.SqlStatement = "SELECT ProductName, UnitsInStock FROM Products"
    myChart.SeriesCollection.Add( objSeries )
    myChart.Title = "Units in Stock"
End Sub

</script>

<dotnet:Chart id="myChart" runat="Server" />

Figure 1 - Chart 1

The Chart control is declared in the body of the page with the name myChart. In the Page_Load method, a Series object is created and the data for the Series object is loaded from the SQL Server Northwind database table. After the Series object has been loaded, it is added to the Chart control's SeriesCollection.

The data is loaded into the Series object with the following SQL query:

SELECT ProductName, UnitsInStock FROM Products

The first database column, ProductName, is used for the x axis of the chart. The second column, UnitsInStock, is used for the y axis.

You can also create pie charts with .netCharting by modifying the Chart control's type property. For example, the code in Listing 2.0 displays a Pie chart that represents the number of products in each product category.

Listing 2 - Pie Chart using VB.NET

<%@ Page Language="VB" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<script runat="server">

Sub Page_Load()
    Dim objSeries As New Series()
    objSeries.ConnectionString = "server=localhost;uid=sa;pwd=secret;database=Northwind"
    objSeries.SqlStatement = "SELECT CategoryName, COUNT(*) FROM Products JOIN Categories ON Products.CategoryID = Categories.CategoryID GROUP BY CategoryName"
    myChart.SeriesCollection.Add( objSeries )
    myChart.Title = "Products by Category"
    myChart.Type = ChartType.Pies
End Sub

</script>

<dotnet:Chart id="myChart" runat="Server" />

Figure 2 - Chart 2

In the page in Listing 2.0, a Series object is loaded with the following SQL query:

SELECT CategoryName, COUNT(*)
FROM Products
JOIN Categories
ON Products.CategoryID = Categories.CategoryID
GROUP BY CategoryName

The value of the first database column is used to display the name of each pie slice. The value of the second database column is used to determine the size of each slice (see Figure 2.0).

Customizing the Appearance of a Chart

One of the greatest strengths of.netCharting is its support for customization. Both the Chart and Series objects include several properties for customizing the appearance of a chart.

For example, you can create a three-dimensional, exploded, transparent Pie chart with the code in Listing 3.0:

Listing 3 - Exploded Pie Chart using VB.NET

<%@ Page Language="VB" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<script runat="server">

Sub Page_Load()
    Dim objSeries As New Series()
    objSeries.ConnectionString = "server=localhost;uid=sa;pwd=secret;database=Northwind"
    objSeries.SqlStatement = "SELECT CategoryName, COUNT(*) FROM Products JOIN Categories ON Products.CategoryID = Categories.CategoryID GROUP BY CategoryName"
    myChart.SeriesCollection.Add( objSeries )
    myChart.Title = "Products by Category"
    myChart.Type = ChartType.Pies
    myChart.Use3D = True
    myChart.DefaultSeries.DefaultElement.ExplodePieSlice = True
    myChart.DefaultSeries.DefaultElement.Transparency = 20

End Sub

</script>

<dotnet:Chart id="myChart" runat="Server" />

Figure 3 - Chart 3

The Use3D property of the Chart control is used to display the Pie chart in three dimensions. The ExplodePieSlice and Transparency properties are used to display the Pie chart as exploded and transparent (see Figure 3.0).

Creating a Drill-Down Chart

.netCharting supports drill-down charts. When using a drill-down chart, you can click on the chart to display more detailed information.

To create a drill-down chart, you need to set the DrillDownChain property of the Chart control. For example, in the code in Listing 4.0, the DrillDownChain property is assigned the value "Years,Months,Days". When the Chart is first displayed, orders are displayed by year (see Figure 4.0). When you click on the orders for a particular year, orders are displayed by month. Finally, when you click a specific month, orders are displayed by day.

Listing 4 - Drill-Down Chart using VB.NET

<%@ Page Language="VB" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<script runat="server">

Sub Page_Load()
         Dim objSeries As New Series()
         objSeries.ConnectionString = "server=localhost;uid=sa;pwd=secret;database=Northwind"
         objSeries.StartDate = DateTime.Parse("1/1/1990")
         objSeries.EndDate = DateTime.Parse("1/1/2000")
         objSeries.SqlStatement = "SELECT OrderDate,COUNT(*) FROM Orders WHERE OrderDate >= #STARTDATE# AND OrderDate <= #ENDDATE# GROUP BY OrderDate ORDER BY OrderDate"
         myChart.SeriesCollection.Add( objSeries )

         myChart.DateGrouping = TimeInterval.Years
         myChart.DrillDownChain="Years,Months,Days"
         myChart.Title = "Orders by Date"
         myChart.XAxis.Label.Text="Years"
End Sub

</script>

<dotnet:Chart id="myChart" runat="Server" />

Figure 4 - Chart 4

Conclusion

The only weakness of .netCharting Enterprise Edition is the steep learning curve associated with learning how to take advantage of all of its features. Given the number of different types of charts and the degree of customization which this control supports, this steep learning curve is not surprising. If you need a method of generating complex and highly customized charts for enterprise applications, then you should consider .netCharting Enterprise Edition.

ASP.NET 3.5 Unleashed - Containing almost 2,000 pages of code samples and in-depth explanation of the ASP.NET 3.5 Framework, ASP.NET 3.5 Unleashed is the most comprehensive book written on the ASP.NET 3.5 Framework.

ASP.NET 3.5 Unleashed is now available in your local bookstore and online (Published January 7, 2008).

All of the code samples from this book are hosted "live" at this website. Click here to view the table of contents and code samples.