Article Options
Premium Sponsor
Premium Sponsor

 »  Home  »  .NET Framework  »  Chart Success : GDI+ Graphics At Work Part 4
 »  Home  »  Windows Development  »  Graphics  »  Chart Success : GDI+ Graphics At Work Part 4
Chart Success : GDI+ Graphics At Work Part 4
by Ged Mead | Published  05/10/2005 | .NET Framework Graphics | Rating:
Ged Mead

Ged Mead (XTab) is a Microsoft Visual Basic MVP who has been working on computer software and design for more than 25 years. His journey has taken him through many different facets of IT. These include training as a Systems Analyst, working in a mainframe software development environment, creating financial management systems and a short time spent on military laptop systems in the days when it took two strong men to carry a 'mobile' system.

Based in an idyllic lochside location in the West of Scotland, he is currently involved in an ever-widening range of VB.NET, WPF and Silverlight development projects. Now working in a consultancy environment, his passion however still remains helping students and professional developers to take advantage of the ever increasing range of sophisticated tools available to them.

Ged is a regular contributor to forums on vbCity and authors articles for DevCity. He is a moderator on VBCity and the MSDN Tech Forums and spends a lot of time answering technical questions there and in several other VB forum sites. Senior Editor for DevCity.NET, vbCity Developer Community Leader and Admin, and DevCity.NET Newsletter Editor. He has written and continues to tutor a number of free online courses for VB.NET developers.


View all articles by Ged Mead...
Setting Up

Data Source 

 First, let’s generate some data to display via the chart.   We will create it at design time  to allow us to get on with the core Graphics Class parts of the project.  If you prefer to have the data input by the user at run time then you can adapt the techniques covered in Part 3.


Create Data

  Shown below is what has become  our standard code  to create initial variables and to generate  and store some data.   I won’t trundle through the details as they are fully covered in earlier articles:


Option Strict On

Imports System.Drawing.Drawing2D
Imports System.Collections


Structure GraphData
        Dim Country As String
        Dim Sales As Integer
        Dim BarColor As Color
        Sub New(ByVal country As String, ByVal sales As Short, ByVal barcol As Color)
            Me.Country = country
            Me.Sales = sales
            Me.BarColor = barcol
        End Sub
    End Structure


'  Create Variables

‘ # of pixels vertical Axis is inset from PictureBox Left
    Dim LeftMargin As Integer = 35
    '  # of Pixels left unused at right side of PictureBox
    Dim RightMargin As Integer = 15
    '  The number of pixels above bottom of baseline
    Dim BaseMargin As Integer = 35
    '  Margin at Top
    Dim TopMargin As Integer = 10
    '   Set size of gap between each bar
    Dim BarGap As Integer = 12

    Dim SalesData As New ArrayList 
    Dim HighSale As Double  ' Maximum sales figure
    Dim VertScale As Double  ' Scaling used for bar heights

  '   Minor changes for this version:
  '   Declare a variable to hold a Graphics object
        Dim g As Graphics
  '  Variable for Bitmap to be displayed in (PictureBox) control
    Dim bmap As Bitmap
  '  Length of vertical axis
    Dim VertLineLength As Integer
Dim BarWidth As Integer  ' width of bars
Dim BaseLineLength As Integer  ' X Axis length

Private Sub GetData()
        SalesData.Clear() ' Avoid data duplication
        '  Generate some data and store it in the arraylist
        SalesData.Add(New GraphData("Belgium", 934, Color.Blue))
        SalesData.Add(New GraphData("Greece", 385, Color.DarkOrange))
        SalesData.Add(New GraphData("Portugal", 1029, Color.Green))
        SalesData.Add(New GraphData("Spain", 729, Color.IndianRed))
        SalesData.Add(New GraphData("Turkey", 1472, Color.Tomato))
        SalesData.Add(New GraphData("UK", 1142, Color.Aquamarine))
End Sub



   Add a PictureBox named PBBarChart and a Button named btnDraw to the Form. 


  Place the button somewhere down in the bottom corner of the Form.


   Stretch the PictureBox so that it is close to the top, right and left edges of the form.   Set its Anchor property so that it is anchored to all four sides.  Doing this will allow the user to click the button for a resized version of the chart to be displayed whenever the form size is altered .   (As we will see in later articles, there are more dynamic ways of achieving this, but we’ll stick with this method for now.)

Sponsored Links