Home

GDI+ Examples: Column Chart
 

Introduction
 

A chart is a technique of representing numeric values using colored shapes. The shape(s) can be geometric or not. To draw such a chart, you can use your knowledge of GDI+ techniques. In this exercise, we use the Graphics::DrawRectangle() method to draw a series of rectangles that represent a column chart.

Practical LearningPractical Learning: Drawing a Rectangle
  1. Start a new Windows Forms Application named WeeklySales1
  2. Set the form's Icon to Drive:\Program Files\Microsoft Visual Studio .NET 2003\Common7\Graphics\icons\Office\GRAPH07.ICO
  3. Design the form as follows:
     
    Control Name Text Other Properties
    Label Label   Monday  
    Label Label   Tuesday  
    Label Label   Wednesday  
    Label Label   Thursday  
    Label Label   Friday  
    TextBox TextBox txtMonday 12000 TextAlign: Right
    TextBox TextBox txtTuesday 11000 TextAlign: Right
    TextBox TextBox txtWednesday 8500 TextAlign: Right
    TextBox TextBox txtThursday 16800 TextAlign: Right
    TextBox TextBox txtFriday 17500 TextAlign: Right
    Button Button Generate btnGenerate  
  4. Double-click an unoccupied area on the form and implement its Load event as follows:
      
    Public Class Form1
    Inherits System.Windows.Forms.Form    
    

    Dim graphDrawingArea As Graphics
    Dim bmpDrawingArea As Bitmap

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        bmpDrawingArea = New Bitmap(Width, Height)
        graphDrawingArea = Graphics.FromImage(bmpDrawingArea)
    End Sub
End Class
  5. In the Class Name combo box, make sure (Form1 Events) is selected
    In the Method Name combo box, select Paint
  6. Implement the event as follows:
      
    Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
        e.Graphics.DrawImage(bmpDrawingArea, 0, 0)
End Sub
  7. In the Class Name combo box, select btnGenerate
  8. In the Method Name combo box, select Click
  9. Implement the Click event as follows:
      
    Private Sub btnGenerate_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnGenerate.Click
        Dim monday As Integer = CInt(Me.txtMonday.Text) / 100
        Dim tuesday As Integer = CInt(Me.txtTuesday.Text) / 100
        Dim wednesday As Integer = CInt(Me.txtWednesday.Text) / 100
        Dim thursday As Integer = CInt(Me.txtThursday.Text) / 100
        Dim friday As Integer = CInt(Me.txtFriday.Text) / 100

        graphDrawingArea.Clear(Me.BackColor)

        graphDrawingArea.DrawRectangle(New Pen(Color.Red), Me.txtMonday.Left + 5, 280 - monday, 40, monday)
        graphDrawingArea.DrawRectangle(New Pen(Color.Blue), Me.txtTuesday.Left + 5, 280 - tuesday, 40, tuesday)
        graphDrawingArea.DrawRectangle(New Pen(Color.Fuchsia), Me.txtWednesday.Left + 5, 280 - wednesday, 40, wednesday)
        graphDrawingArea.DrawRectangle(New Pen(Color.Brown), Me.txtThursday.Left + 5, 280 - thursday, 40, thursday)
        graphDrawingArea.DrawRectangle(New Pen(Color.Turquoise), Me.txtFriday.Left + 5, 280 - friday, 40, friday)

        graphDrawingArea.DrawRectangle(New Pen(Color.Black), 10, 280, Width - 30, 1)
        Invalidate()
End Sub
  10. Execute the application and test the form
     
     
  11. After using it, close the form
  12. In the Class Name combo box, select btnGenerate
  13. In the Method Name combo box, select Click
  14. Change the Click event as follows:
       
    Private Sub btnGenerate_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnGenerate.Click
        Dim monday As Integer = CInt(Me.txtMonday.Text) / 100
        Dim tuesday As Integer = CInt(Me.txtTuesday.Text) / 100
        Dim wednesday As Integer = CInt(Me.txtWednesday.Text) / 100
        Dim thursday As Integer = CInt(Me.txtThursday.Text) / 100
        Dim friday As Integer = CInt(Me.txtFriday.Text) / 100

        graphDrawingArea.Clear(Me.BackColor)

        graphDrawingArea.FillRectangle(New SolidBrush(Color.Red), Me.txtMonday.Left + 5, 280 - monday, 40, monday)
        graphDrawingArea.DrawRectangle(New Pen(Color.Black), Me.txtMonday.Left + 5, 280 - monday, 40, monday)
        graphDrawingArea.FillRectangle(New SolidBrush(Color.Blue), Me.txtTuesday.Left + 5, 280 - tuesday, 40, tuesday)
        graphDrawingArea.DrawRectangle(New Pen(Color.Black), Me.txtTuesday.Left + 5, 280 - tuesday, 40, tuesday)
        graphDrawingArea.FillRectangle(New SolidBrush(Color.Fuchsia), Me.txtWednesday.Left + 5, 280 - wednesday, 40, wednesday)
        graphDrawingArea.DrawRectangle(New Pen(Color.Black), Me.txtWednesday.Left + 5, 280 - wednesday, 40, wednesday)
        graphDrawingArea.FillRectangle(New SolidBrush(Color.Brown), Me.txtThursday.Left + 5, 280 - thursday, 40, thursday)
        graphDrawingArea.DrawRectangle(New Pen(Color.Black), Me.txtThursday.Left + 5, 280 - thursday, 40, thursday)
        graphDrawingArea.FillRectangle(New SolidBrush(Color.Turquoise), Me.txtFriday.Left + 5, 280 - friday, 40, friday)
        graphDrawingArea.DrawRectangle(New Pen(Color.Black), Me.txtFriday.Left + 5, 280 - friday, 40, friday)

        graphDrawingArea.DrawRectangle(New Pen(Color.Black), 10, 280, Width - 30, 1)
        Invalidate()
End Sub
  15. Execute the application and test the form
     
     
  16. After using it, close the form
 
Home Copyright © 2004-2010 FunctionX, Inc.