Chart a Course With ASP.NET Graphics (Continued)

After you're done drawing your pie chart, save your BitMap object (containing your Graphics object instance) to the Stream object specified in the "target" parameter of the Render() method. This is a simple graphic, so specify the Gif element of the ImageFormat enumeration. You'll be calling the Render() method from an ASP.NET page, so your image will now be sent to the response stream and rendered to the browser. And finally, be a good .NET citizen and call the Dispose() method of your Graphics object and your BitMap object.

You can create a bar chart in much the same fashion (see Listing 1). The big difference between the two is that instead of drawing pie slices, you draw vertical bars (or horizontal, if you so desire). The secret is to draw each bar in relation to the previous one, keeping track of where you are at all times.

Now that you have a fully functioning charting library, put it into action. Add a new Visual C# ASP.NET Web Application named Insight_cs to your Insight solution. Set a project-level reference to your Insight_cs.WebCharts project. Delete the default Web Form, and add a new Web Form named SalesChart.aspx. In HTML view, delete all the code except for the first line, which should look like this (should be all on one line):

<%@ Page ContentType="image/gif" Language="c#"
AutoEventWireup="false"
Codebehind="SalesChart.aspx.cs"
Inherits="Insight_cs.SalesChart" %>

You can see that this Web Form will be returning data to the browser in the form of a GIF image. Open the code-behind file for your SalesChart.aspx Web Form (see Listing 2). Set references to the libraries you will use, including the Insight_cs.WebCharts namespace. Create the Insight_cs namespace (again, this step is not necessary in VB.NET, as it is implied through the Project Properties dialog). The interesting code is in the Page_Load event. First, you need to get some data to build a chart with. This example uses the sales data in the pubs database that ships with SQL Server. The query returns two fields: the year and the quantity of units (books, in this case) sold. Note that you'll have to change the connection string in this code to match the connection credentials required by your SQL Server database.

After you open a DataSet with the sales data from the pubs database, you need to interrogate the QueryString collection for the parameters necessary to build your chart. These parameters are type (pie or bar), width, height, title, and subtitle. This example provides default values for elements required by the Render() method of both the PieChart class and BarChart class. If at least one row was returned from the database query, then render either a pie chart or a bar chart, depending on the contents of the type variable.