ne of the many factors that contributed to the phenomenal success of ASP was the ease with which developers could create data-driven Web pages. A very common data-driven Web page, especially in an intranet setting, is one that generates reports. Such a page often pulls figures from a database and presents the information to the visitor in an easy-to-digest manner. While displaying textual report information through an ASP page is simple enough, rendering such information in the form of graphical charts is another challenge entirely.
I first started creating ASP pages back in January 1998 when asked to develop an intranet reporting system for the consulting company I worked for. At the end of each day, each consultant would spend a few minutes on the company intranet entering the hours he or she had worked and for what project. The managers of each consulting group wanted to be able to look at reports that showed past revenue by individual consultant and group. While displaying the raw figures in text form was one way to present the information, the managers requested various charts and graphs illustrating past and expected revenues.
To do this I chose a client-side solution, the Microsoft® MSChart ActiveX® control, which was a hefty 750KB download and, at the time, wouldn't work on any browser software but the latest version of Microsoft Internet Explorer. Since I was developing in a controlled environment, these shortcomings weren't an issue, but they would have been if I had been working on an Internet solution.
A more client-independent approach would have been to generate the graphs and charts in the ASP page as a GIF or JPG image file, and then send the file to the client's browser. Such a task is impossible to do in ASP without using a COM component. Fortunately for ASP developers, there are a number of third-party COM components that can be used to create server-side graphs. I found links to 16 such components on ASPIn.com (http://www.aspin.com/home/components/graphics/charts), which catalogs ASP resources, components, and information.
With the advent of ASP.NET, however, you can create dynamic charts and graphs without a third-party COM component. The Microsoft .NET Framework contains an abundance of classes in the System.Drawing namespace that can be used—in a standalone Windows®-based application or on an ASP.NET Web page—to create and edit images in a variety of formats. Using these classes (I use C# in this article) you can quite easily create an ASP.NET Web page that, when requested, generates a chart based on database information. You can then send this image to the requesting client's browser.
Before tackling a complete dynamic chart, let's first take a look at how you can create some simple images using code for an ASP.NET Web page.
Displaying a Simple Image using Code
The System.Drawing namespace in the .NET Framework contains all of the classes you'll need to create and edit images. When creating images, you'll use two classes: the Bitmap class and the Graphics class. Think of the Bitmap class as your canvas and the Graphics class as your paintbrush. I'll show you how to use the Bitmap class to create a palette to draw on, and, when I've completed drawing, I'll use the Save method of this class to either save the drawing to the file system or send it directly to a stream. The Graphics class contains all of the methods that you'll need for drawing images, shapes, and strings.
To create the canvas, I simply need to create a new instance of the Bitmap class, like so:
Bitmap myBitmap = new Bitmap(width, height);
Now that I have a canvas, I need to create an instance of the Graphics class, create the paintbrush, and specify a canvas to use. I can accomplish this using the static Graphics method FromImage, which takes an Image instance as a single parameter and returns a resulting Graphics instance. (I can pass in the instance of the Bitmap class, since it is derived from the Image class.)
Graphics myGraphics = Graphics.FromImage(myBitmap);
At this point, I'm ready to start creating images, shapes, and strings on the canvas. Take a moment to fire up the .NET Framework documentation and examine the Graphics class. There you'll find a vast array of methods for drawing any shape you'll ever need. Notice that most of these methods come in two varieties: a DrawShape and a FillShape, such as DrawEllipse and FillEllipse, respectively. The Draw variant simply draws the outline of the shape, while the Fill variant draws the shape and fills the contents. For example, if you wanted to create a standard 468×60 pixel advertising banner like the one in Figure 1, you could use the code in Figure 2 in your Page_Load event handler.
|
