Generating Dynamic Graphics in ASP.NET Applications

Web developers are often requested to generate charts and graphs using data from a source such as a database. There are a variety of charting packages, many of them with hefty commercial price tags, that can be used to accomplish this. Generally, these packages create images dynamically for display on a web page. For complex charts, a charting package is probably a worthwhile investment. But what if you have a custom chart or graph that you want to produce?

How can you produce custom graphics dynamically within the context of an ASP.NET web application? The answer is surprisingly simple.

GDI+ is the ASP.NET wrapper assembly for Microsoft's GDI (Graphics Device Interface) technology. GDI+ is generally thought of as a technology for producing graphics within the context of Windows, i.e. - as part of a Windows application. It turns out that GDI+ is a lot more flexible than that.

To illustrate how to use GDI+ to create dynamic graphics in a web application, we'll create two web pages. The first web page shows a dynamically generated image, and is shown in Listing 1. The second web page won't produce HTML at all; it will be responsible for generating the image. See Listing 2 for the code.

Listing 1: Displaying a Generated Image

<%@ Page Language="vb" Debug="true" %>
    <title>GDI+ Test</title>
<img src="gdi_ellipse.aspx">

The first web page is really just using plain old HTML to references the graphic image. Note the "src" attribute for the image tag references the "gdi_ellipse.aspx" web page,which is shown in Listing 2. The second web page isn't really a web page at all, because it's going to send back an image rather than HTML.

In Listing 2, the code creates an in-memory bitmap, which will serve as the canvas where the drawing will be created. Since the canvas background color defaults to black, the first task will be to set the background color to white. Then, to illustrate a simple graphic-related operation, we'll draw an ellipse on the canvas.

Once the image has been produced, it has to be sent back to the requester. In order to do this, the requester first has to be informed that it's getting an image and not an HTML page back. To accomplish this, the subroutine sets the content type of the Response object to "image/jpeg".

Next, the image has to be sent as a output stream. Fortunately, the Bitmap class allows the image to be saved in a variety of ways. In this case, the image is saved as a JPG file and written to Response.OutputStream. Thus, the only content sent back to the requester, which is the first web page, is the image.

Listing 2: Creating a Dynamically Generated Image

<%@ Page Language="vb" Debug="true" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Imaging" %>
<script runat="server" language="vb">
    SUB Page_Load()
        '--- Create a bitmap and draw on it
        DIM objCanvas AS Bitmap = new Bitmap(200, 150)
        DIM objGraphic AS Graphics = Graphics.FromImage(objCanvas)
        objGraphic.DrawEllipse(Pens.Red, 10, 10, 150, 100)
        '--- Send the graphic to the web client
        Response.ContentType = "image/jpeg"
        objCanvas.Save(Response.OutputStream, ImageFormat.Jpeg)
        '--- Now cleanup the in-memory graphics objects

GDI+ provides a great deal of functionality for creating and manipulating images. With the technique described in this article, all of that power is now at the disposal of web developers.


No comments yet. Be the first.

Leave a Comment

Comments are moderated and will not appear on the site until reviewed.

(not displayed)