Creating Graphics and Charts programmatically using VB.Net

Charts and Graphs are a very good medium for representing data in structured format. There are a lot of third party charting controls are available that can be used with ASP.Net web applications. Some of them are Telerik, .NetCharting, Dundas Chart, etc. But we can also create graphics and charts on the fly using .Net. Graphics related classes provided by .Net are packaged in the “System.Drawing” namespace.

Creating simple Graphics Programmatically

Since each Chart or Graph is displayed as an image, so first of all we will see how to create a simple image using .Net. To generate an image, mainly two classes are used Bitmap and Graphics. Both of these are available within the “System.Drawing” namespace. Following code snippet can be used to create a simple image on the fly:

objBitmap.Save("C:\Inetpub\wwwroot\WebApp\TestImage.jpg")

objGraphics.Dispose()

objBitmap.Dispose()

To display this image in an ASP.Net web page just add the above code snippet in the Page_Load event of that web page and add an ASP.Net Image control for which the code will be as follows:

<asp:ImageID="Image1"runat="server"ImageUrl="TestImage.jpg"/>

When this ASP.Net web page will execute, it will look like as follows:
 

We can also display the programmatically generated image in an ASP.Net web page without saving it in the file system. To do that just remove the Image control from the page and replace the objBitmap.Save() statement by the following statement:

Response.ContentType = "image/jpeg"
objBitmap.Save(Response.OutputStream, Imaging.ImageFormat.Jpeg)

Creating Charts and Graphs Programmatically

With the help of above code snippet you can create simple images on fly. But .Net provides a lot of classes and functions that you can use to generate very complex images too.

The following code snippet demonstrates the creation of an image consisted of a Bar Chart and the data for the Bar Chart will be read from MS Access database:

'Create a connection to the MS Access database
Dim con AsNew OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=C:\Inetpub\wwwroot\WebApp\db1.mdb")) 

'Create a command object to run an SQL query
Dim cmd AsNew OleDbCommand("SELECT Sales, YearFROM SalesData”, con) 

'Create and Populate the DataSet
Dim ds AsNew DataSetDim da AsNew OleDbDataAdapter(cmd)da.Fill(ds) 

'Create fonts for our legend and title
Dim fontLegend AsNew Font("Verdana", 10)Dim fontTitle AsNew Font("Verdana", 14, FontStyle.Bold) 

'We need to create a legend and title,for both Sales and Year axis. Also, we need 'to resize the height for the bar chart, respective to the height of the legend and 'title. Following two variable will be used for this calculation. 
Const bufferSpace AsInteger = 20
Dim titleHeight AsInteger = fontTitle.Height + bufferSpace 

'Create an ArrayList of colors used for different bars in the Bar Chart
Dim colors As ArrayList = New ArrayList
Dim rnd As Random = New Random
For i = 0 To ds.Tables(0).Rows.Count - 1
    colors.Add(New SolidBrush(Color.FromArgb(rnd.Next(255), rnd.Next(255),rnd.Next(255))))
Next 

'Create instances of Bitmap and Graphics
Dim objBitmap As Bitmap = New Bitmap(width, height)
Dim objGraphics As Graphics = Graphics.FromImage(objBitmap)
Dim blackBrush As SolidBrush = New SolidBrush(Color.Black) 

'Specify the size of Bar Chart
Dim width AsInteger = 500
Dim height AsInteger = 600 

'Put a white backround in
objGraphics.FillRectangle(New SolidBrush(Color.White), 0, 0, width, height) 

'Draw Y-Axis which represents sales data
objGraphics.DrawLine(New Pen(Color.Black), Convert.ToSingle(2 * bufferSpace - 2), Convert.ToSingle(2 * bufferSpace), Convert.ToSingle(2 * bufferSpace - 2), Convert.ToSingle(height / 2)) 

'Draw X-Axis which represents year
objGraphics.DrawLine(New Pen(Color.Black), Convert.ToSingle(2 * bufferSpace - 2), Convert.ToSingle(height / 2), Convert.ToSingle(width - 2 * bufferSpace - 2), Convert.ToSingle(height / 2)) 

'Draw the different bars for sales data for different years
For i = 0 To ds.Tables(0).Rows.Count - 1
    objGraphics.FillRectangle(colors(i), New Rectangle((2 * bufferSpace) + i * 60, (height / 2) - (ds.Tables(0).Rows(i).Item("Sales") / 20), 40, ds.Tables(0).Rows(i).Item("Sales") / 20))
Next 

'Create the title, centered
Dim stringFormat As StringFormat = New StringFormat
stringFormat.Alignment = StringAlignment.Center
stringFormat.LineAlignment = StringAlignment.Center 
objGraphics.DrawString("Year Wise Sales Report", fontTitle, blackBrush, New RectangleF(0, 0, width, titleHeight), stringFormat) 

'Draw the different years in the X-Axis and Sales data points in the Y-Axis
For i = 0 To ds.Tables(0).Rows.Count - 1
    objGraphics.DrawString(ds.Tables(0).Rows(i).Item("Year"), fontLegend, blackBrush, New RectangleF((2 * bufferSpace) + i * 60, (height / 2) + 10, 50, 20), stringFormat)
    objGraphics.DrawString(ds.Tables(0).Rows(i).Item("Sales"), fontLegend, blackBrush, New RectangleF((2 * bufferSpace) + i * 60, (height / 2) - (ds.Tables(0).Rows(i).Item("Sales") / 20) - 20, 50, 20), stringFormat)
Next 

'Draw the title for X-Axis that is “Year”
objGraphics.DrawString("Year", New Font("Verdana", 10, FontStyle.Bold), blackBrush, New RectangleF(width / 2, height / 2 + 30, 150, 30), stringFormat) 

'Draw the title for Y-Axis that is “Sales”
For i = 1 To Len(yField)
    objGraphics.DrawString(Mid("Sales", i, 1), New Font("Verdana", 10, FontStyle.Bold), blackBrush, New RectangleF(0, height / 5 + (i * 20), 20, 20), stringFormat)
Next 

'Attach the create chart image with the response object
Response.ContentType = "image/jpeg"objBitmap.Save(Response.OutputStream, Imaging.ImageFormat.Jpeg) 

'Don’t forget to clean up
objGraphics.Dispose()
objBitmap.Dispose()

The generated Bar Chart from the above code will look as follows:

In a similar way, you can also create Pie Charts, Line Charts, Area Charts, etc programmatically using Graphics classes and functions of .Net.