- Displaying a Simple Image in a Web Page
- Drawing a Line Graph From Database Data
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.
){kind=link}
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.