Home > Articles > Programming > Windows Programming

📄 Contents

  1. Displaying a Simple Image in a Web Page
  2. Drawing a Line Graph From Database Data
  3. Summary
  • Print
  • + Share This
From the author of

From the author of

Drawing a Line Graph From Database Data

Most likely, the main way in which you'll take advantage of dynamically generating images is by building graphs from database data. You can use the image classes to create pie chars, bar graphs, line graphs, or any other type of graph that you can imagine.

In this section, we dynamically generate a line graph based on the contents of the Products database table in the SQL Server Northwind database (This database is included as a sample database with Microsoft SQL Server.) We'll chart the values of the UnitPrice column.

One problem that you quickly encounter when drawing graphs is that you need to know the maximum value of the column that you are charting. Otherwise, you can't size the graph to fit into the intended screen real estate. For this reason, we'll load the contents of the database table into a DataSet. Because a DataSet enables us to statically represent the contents of a database table in memory, we can find the maximum value of a column before we start drawing the graph.

The page in Listing 3 generates a DataSet that contains the Products table. Next, the values of the UnitPrice column are charted in a line graph (see Figure 2). You can link to the LineGraph.aspx file here.

Listing 3—LineGraph.aspx

<%@ Page debug="True" ContentType="image/gif" %>
<%@ Import namespace="System.Data" %>
<%@ Import namespace="System.Data.SqlClient" %>
<%@ Import namespace="System.Drawing" %>
<%@ Import namespace="System.Drawing.Imaging" %>

<Script Runat="Server">

Const ImageWidth As Integer = 800
Const ImageHeight As Integer = 500

Sub Page_Load
 Dim conNorthwind As SqlConnection
 Dim dadSelect As SqlDataAdapter
 Dim dstProducts As DataSet
 Dim dtblProducts As DataTable
 Dim drowRow As DataRow
 Dim decMaxValue As Decimal
 Dim intRowCounter As Integer
 Dim decXScale, decYScale As Decimal
 Dim decPrevX, decPrevY As Decimal
 Dim objBitmap As Bitmap
 Dim objGraphics As Graphics

 ' Retrieve Products Table
 conNorthwind = New SqlConnection( "Server=localhost;UID=sa;PWD=secret;database=Northwind" )
 dadSelect = New SqlDataAdapter( "Select UnitPrice From Products", conNorthwind )
 dstProducts = New DataSet
 dadSelect.Fill( dstProducts )

 ' Find Maximum Value 
 dtblProducts = dstProducts.Tables( 0 )
 For each drowRow in dtblProducts.Rows
  If drowRow( "UnitPrice" ) > decMaxValue Then
   decMaxValue = drowRow( "UnitPrice" )
  End If
 Next
 decXScale = ImageWidth / ( dtblProducts.Rows.Count - 1 )
 decYScale = ImageHeight / decMaxValue

 ' Create Bitmap
 objBitmap = New Bitmap( ImageWidth, ImageHeight )

 ' Initialize Graphics Class
 objGraphics = Graphics.FromImage( objBitmap )


 For intRowCounter = 0 to dtblProducts.Rows.Count - 1
  drowRow = dtblProducts.Rows( intRowCounter )
  objGraphics.DrawLine( _
     Pens.Blue, _
     decPrevX, _
     decPrevY, _
     intRowCounter * decXScale, _
     ImageHeight - ( drowRow( "UnitPrice" ) * decYScale ) )
  decPrevX = intRowCounter * decXScale
  decPrevY = ImageHeight - ( drowRow( "UnitPrice" ) * decYScale )
 Next

 ' Display Bitmap
 objBitmap.Save( Response.OutputStream, ImageFormat.Gif )
End Sub

</Script> 

You can experiment with different size images by modifying the values of the ImageWidth and ImageHeight constants. You can also modify the page to display bar graphs by using either the DrawRectangle or FillRectangle methods; or display pie charts by using either the DrawPie or FillPie methods.

Figure 2 Displaying a line graph.

  • + Share This
  • 🔖 Save To Your Account