1. 1.NET Web Forms Graphics and Charts © 2002 by Jerry Post

2. 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. 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 crash End Select

4. 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. 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. 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. JPEGFormat16bppRgb565Format24bppRgbmost others GIFFormat16bppRgb565Format16bppRgb555 PNGnone work??

7. 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. 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. 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.