Dynamically creating a pie chart with ASP.NET and GDI+

Aim
To dynamically produce a pie chart in ASP.NET using the System.Drawing Namespace.

Here is what we will hopefully end up with:

What is GDI+?

GDI+ is a set of classes in the System.Drawing Namespace to draw images ‘on the fly’

Let’s get going!

In this tutorial I am going to use inline code, this will still work with code behind.

> Start the page and import required namespaces.

Source Code: <%@ Page Language="VB" ContentType="Image/jpeg" %> <%@ import Namespace="System.Drawing" %> <%@ import Namespace="System.Drawing.Imaging" %> <%@ import Namespace="System.Drawing.Drawing2d" %>

You will notice that the ContentType for this page is set to “Image/jpeg”. This is because we need to tell the browser that this is an image not html.

> Start writing the code for this webform

Source Code: <script runat="server"> Sub Page_Load() Dim strTitle As String Dim arrLabels(2) As String Dim arrData(2) As String strTitle = “What do you think of this pie chart?” arrData(0) = 9 arrData(1) = 19 arrData(2) = 12 arrLabels(0) = “I love it!” arrLabels(1) = “It’s ok” arrLabels(2) = “It’s Amazing”

This is the only part you really need to modify; these arrays could be bound by a database.

Source Code: Dim i As Integer Dim b As New Bitmap(400, 205) Dim g As Graphics Dim sum AS integer Dim icons As PointF = New PointF(230, 35) Dim desc As PointF = New PointF(255, 33) Dim current As Single = 0 Dim total As Single = 0 Dim encoderParams as System.Drawing.Imaging.EncoderParameters = new System.Drawing.Imaging.EncoderParameters() Dim quality as long Dim arrayICI as ImageCodecInfo() = ImageCodecInfo.GetImageEncoders() Dim jpegICI as ImageCodecInfo Dim x as integer Dim legendheight As Integer

These are all the declarations for this webform.

Source Code: legendheight = arrLabels.Length * 16 'Set up graphics g = Graphics.FromImage(b) g.Clear(color.White) g.Smoothingmode = Smoothingmode.HighQuality 'get total of data For i = 0 To arrData.Length - 1 sum += arrData(i) Next i 'draw title g.DrawString(strtitle, New Font("Verdana", 10), Brushes.Black, New PointF(0, 0)) 'draw legend g.FillRectangle(brushes.Silver, 229, 34, 131, legendheight) g.DrawRectangle(pens.black, 228, 33, 130, legendheight - 1) g.FillRectangle(brushes.Beige, 228, 33, 130, legendheight - 1) For i = 0 To Ubound(arrLabels) g.FillRectangle(New SolidBrush(SelectColor(i)), icons.X, icons.Y, 20, 10) g.DrawRectangle(Pens.Black, icons.X, icons.Y, 20, 10) g.DrawString(arrLabels(i), New Font("Tahoma", 10), Brushes.Black, desc) icons.Y += 15 desc.Y += 15 Next i 'Draw the pie chart g.FillPie(New System.Drawing.SolidBrush(color.silver), 2, 24, 175, 176, 360, 360) i = 0 For i = 0 To arrData.Length - 1 current = arrData(i) / sum * 360 g.FillPie(New SolidBrush(SelectColor(i)), 2, 22, 173, 175, total, current) g.DrawPie(Pens.Black, 2, 22, 173, 175, total, current) total += current Next i 'Save image to output stream quality = 90 Dim encoderParam as System.Drawing.Imaging.EncoderParameter = new System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, quality) encoderParams.Param(0) = encoderParam for x = 0 to arrayICI.Length-1 if (arrayICI(x).FormatDescription.Equals("JPEG")) then jpegICI = arrayICI(x) exit for end if next if not jpegICI is nothing then b.Save(Response.OutputStream, jpegICI, encoderParams) End If End Sub

Ok, now we’ve finished the main code, now there’s just a simple function to specify the colours for the piechart.

Source Code: Function SelectColor(i As Integer) As Color Dim output As Color Select Case i Case 0 Return Color.Blue Case 1 Return Color.Red Case 2 Return Color.Yellow Case 3 Return Color.Purple Case 4 Return Color.Orange Case 5 Return Color.Brown Case 6 Return Color.Gray Case 7 Return Color.SkyBlue Case 8 Return Color.Salmon Case 9 Return Color.lime End Select End Function </script>

And that’s it!

This Article was written on 1/19/2004 12:58:00 PM by   Martin