Article Options
Premium Sponsor
Premium Sponsor

 »  Home  »  .NET Newbie  »  Chart Success: GDI+ Graphics At Work. Part 2  »  Let's Get Started
Chart Success: GDI+ Graphics At Work. Part 2
by Ged Mead | Published  03/16/2005 | .NET Newbie | Rating:
Let's Get Started

A Step at a Time

  So, if we are not going to put the code in the OnPaint event this time, where will it go?   One obvious option would be to place it in the button’s click event.    However, in order to keep the code in easier to follow chunks I have elected to create two separate procedures which are called one after the other in the button’s click event.  The tasks undertaken by the two procedures are:

  • Generate the Data
  • Draw the Chart

Let’s look at each of those procedures in turn now.

Step 1: Generate the Data
Data Content   
    For continuity’s sake we will use a Structure and an ArrayList for the data because this is the approach we used in Part 1. 

  Put these Statements at the very top of the form:

    Option Strict On
    Imports System.Drawing.Drawing2D
    Imports System.Collections

   Create a Structure similar to that used in Part 1 (placed in the Form’s code area, but outside any procedures):

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

 Instantiate an ArrayList to hold the data.  Again, place this in the form’s code area, outside any procedures:

   Dim SalesData As New ArrayList

    The GetData procedure generates some sample data: six countries and six sales figures.   (Looking ahead, in Part 3 we will see how to replace this with code which reads data from file  or takes input from the user.)

   Private Sub GetData()

   '  Ensure that only one set of generated data is held
'  Generate some data and store it in the arraylist
        SalesData.Add(New GraphData("Belgium", 834))
        SalesData.Add(New GraphData("Greece", 385))
        SalesData.Add(New GraphData("Portugal", 672))
        SalesData.Add(New GraphData("Spain", 429))
        SalesData.Add(New GraphData("Turkey", 715))
        SalesData.Add(New GraphData("UK", 942))   
 End Sub

   We now have some data to use to create our chart.

Step 2: Get Control

The chart will be displayed in a PictureBox and the drawing will be fired by the click of a button.  Time then to add these controls to the form. 

   Add a PictureBox control on to the form and name it PBBarChart.  Cover approx 80% of the form with the PictureBox.    Then add a Button control somewhere in the remaining surface of the form and name this btnDraw
Set the backcolor of the Form to a light color of your choice. 

    We are ready to begin creating the chart.

Reusable Values

  As we discovered in Part 1, much of the process of drawing in Windows Forms requires fiddling around with setting the start and end points of lines, shapes, text and so on.   This is obviously going to be the case because we are hand building most of the things that the user sees; we therefore have to code the exact positions and sizes of those entities we create.

   With reusability in mind, I have included some variables in the articles and examples and we will use these to store the above kinds of values.   Hopefully this will have two advantages. 

   First, it will enable you to change the settings quite easily so that the finished product looks just as you want.  Secondly, it should make much of the drawing code easier to follow; if we use understandable names for our variables then it may help make clearer what each part of each code line actually does.

Step 3: Set the Margins, Gaps and Scaling

  The chart will be drawn inside a PictureBox, so we should create a margin between the chart itself and the outer edges of the PictureBox.    We will use four variables to hold these values.  The names are self-explanatory:

 '  # of pixels Y-Axis is inset from PicBox Left
    Dim LeftMargin As Integer = 35
    '  # of Pixels left unused at right side of PicBox
    Dim RightMargin As Integer = 15
    '  # of pixels above base of picturebox the X-Axis is placed
    Dim BaseMargin As Integer = 35
    '  Margin at Top
    Dim TopMargin As Integer = 10

 When we come to draw the bars of the chart, they will look better with a small gap between them.  The next variable contains that setting:

    Dim BarGap As Integer = 12

Sponsored Links