1

.NET Web Forms

Graphics and Charts© 2002 by Jerry Post

2

Good News/Bad News

Good news: Finally, Microsoft included a graphics package that generates GIF and JPEG on the fly.

Bad news: They didn’t bother to write any charting routines.

Compensation: The graphics capabilities are relatively strong, and it is not too difficult to add charting capabilities.

3

Web Structure for Graphics

Create a form to display the chart. Typically include an image control, but you can also put images on buttons and other controls.

Specify the image URL to a page that will generate the image. Often, you can use the same form through post back. Button to Draw, code:

Page_Load, code:

imgChart.ImageUrl = Request.Url.AbsolutePath & "?Draw=TotalSales"

Select Case Request.QueryString("Draw") Case "TotalSales" ShowColumnChart() Case "JanFebSales" ShowJanFebColumnChart() Case "TotalSalesBar" ShowBarChart() Case Else ' do nothing, but don't crashEnd Select

4

Setup/Calling Code

Uses WebCharts component (see next slides) Additional properties can be set to configure options. You need to pass the current page, because the entire page will

be replaced on return with an image.

Private Sub ShowColumnChart() Dim wc As WebCharts = New WebCharts() wc.Height = imgChart.Height.Value wc.Width = imgChart.Width.Value Dim cmpMain As DBMain = New DBMain() cmpMain.FillEmployeeSales(DsEmployeeSales1) Dim aryColList() As String = {"Value"} wc.DrawColumnChart(Me, Me.dvEmployeeSales, aryColList, "LastName")End Sub

5

Graphics/Chart Structure

Public Sub DrawColumnChart(ByVal pg As Page, ByVal dv As DataView, ByVal aryColData() As String, ByVal sColLabel As String)

Dim bmp As New Bitmap(m_Width, m_Height,Imaging.PixelFormat.Format16bppRgb565)

Dim gr As Graphics = Graphics.FromImage(bmp) gr.Clear(m_BGColor)

‘ Get min/max values‘ Set Chart Box size, Define scale, Draw Axes, Draw Labels, Draw Chart

pg.Response.Clear() pg.Response.ContentType = "image/jpeg" bmp.Save(pg.Response.OutputStream, Imaging.ImageFormat.Jpeg) m_fntTitle.Dispose() m_fntAxes.Dispose() gr.Dispose() bmp.Dispose()End Sub

6

Graphics Key Elements

Dim bmp As New Bitmap(m_Width, m_Height,Imaging.PixelFormat.Format16bppRgb565)

Dim gr As Graphics = Graphics.FromImage(bmp)gr.Clear(m_BGColor)pg.Response.Clear()pg.Response.ContentType = "image/jpeg"bmp.Save(pg.Response.OutputStream, Imaging.ImageFormat.Jpeg)

Many image formats (see PixelFormat) and output types (see ImageFormat).Some combinations of format and output type may not match. Experiment.JPEG Format16bppRgb565 Format24bppRgb most othersGIF Format16bppRgb565 Format16bppRgb555PNG none work??

7

Transformations

.Net graphics supports world coordinates, page coordinates, and device coordinates (sort of).

You can use TranslateTransform, and RotateTransform The generic form of transformations are handled through a matrix

(see the documentation, it is tricky). A key problem is that the origin for the device is always at the top

left corner, and y values increase moving down. Most mathematical graphs and charts require a reflection across the horizontal axis to make y increase vertically. This reflection can only be done by assigning a negative value to the

middle element of the matrix. Even if you do it, font values utilize world coordinates, and somehow

fonts no longer work. Technically, you could solve it by temporarily storing the

transformation matrix, clearing all transformations, drawing the font, and then restoring the original transformation matrix.

8

Manual Transformation

Another solution is to write your own translation that handles the chart data, and leaves the fonts and everything else in raw/pixel format.

Generate scale coefficients based on min/max values.

sXscale = CType((pxXRight - pxXLeft), Single) / (fXRight - fXLeft) Use simple functions to translate all x and y values into pixels.

return pxXLeft + CType((x - fXLeft) * sXscale + 0.5, Integer) Then calls to drawing:

gr.DrawLine(myPen, pX(x1), pY(y1), pX(x2), pY(y2))

9

Charts

The chart package just builds from basic drawing tools. The key is to load all of the desired data into a data view from a

query. The view can be sorted and filtered using standard ADO commands.

The easiest structure of the view is to store each series in a different column, and each element in a different row. Then you need an array of column names to identify the various data series to plot.

See the Column and Chart routines in the WebCharts for examples. The foundation routines created to support these two charts can also be used to quickly write additional chart types.