Article Options
Premium Sponsor
Premium Sponsor

 »  Home  »  .NET Newbie  »  Chart Success Part 5 - Line Graph  »  The Chart Outline
 »  Home  »  Windows Development  »  Graphics  »  Chart Success Part 5 - Line Graph  »  The Chart Outline
Chart Success Part 5 - Line Graph
by Ged Mead | Published  06/06/2006 | .NET Newbie Graphics | Rating:
The Chart Outline

The Chart Outline

   We begin by drawing the X and Y Axis of the chart, including tick marks and numerals on the vertical axis.  This code is all contained in a procedure named DrawOutline.

Graphics Object

  If you have read the previous articles you will recall that we can think of a Graphics Object as a kind of transparent canvas on which we are able to draw directly.     The code below allows us to draw on the Graphics object of the Bitmap.   Later, we will take the completed Bitmap and assign it to the PictureBox control; the end result being that the user will see the drawn chart inside the PictureBox. 

 Private Sub DrawOutline()

   ' Instantiate bmap and set its width and height to that of the PictureBox.
   ' Also set the bitmap's resolution to that of the PictureBox

   bmap = New Bitmap(PBLineChart.Width, _ PBLineChart.Height, PBLineChart.CreateGraphics)
    '    Assign the Bitmap to the Graphics object.  

    g = Graphics.FromImage(bmap)

Vertical Axis

   The code for the vertical axis is the same as that we have used in some of the previous articles.  We draw a simple vertical line and then insert 10 small horizontal tick marks  evenly spaced up its length.  For simplicity, we again use an arbitrary minimum-maximum range of 0 to 1000.   If you need to incorporate a different specific range of values (and in many cases you will) then you can see a description of how to do this in the Part 4 article here.

   First thing is to calculate the start and end points for the vertical line.   You will see that we do this by making use of those variables we  set up earlier for the margins. 

  '   Draw a line for the Vertical Axis.
        Dim StartPoint As New Point(LeftMargin, PBLineChart.Height - BaseMargin)
        Dim EndPoint As New Point(LeftMargin, TopMargin)

        '  Basic Pen to draw outline lines
        Dim LinePen As New Pen(Color.Black, 2)
        '  Draw the vertical line
        g.DrawLine(LinePen, StartPoint, EndPoint)

    To add the tickmarks and the values (100, 200, etc to 1000), use the following code. 

     Dim StartPoint As New Point(LeftMargin, PBBarChart.Height - BaseMargin)
   Dim EndPoint As New Point(LeftMargin, TopMargin)

   The names of the variables StartPoint and EndPoint need no explanation but the concept of a Point might be worth a mention.  We are all familiar with the idea of a point – that is, a specific location which can be identified in some way.  In .NET graphics, a Point is identified by its X value (how far it is from the left hand side) and its Y value (how far down it is from the top).  

  In the current project we measure these two values in pixels, because that is the unit used to track positions on the screen.   It is important to understand that the Point isn’t just a position in space, it is in fact an Object, complete with its own properties and methods.

   You see that the StartPoint Point has its x position set in line with the left margin we set earlier;  its y position is calculated by moving up from the bottom of the picture box by the distance equal to the BaseMargin.

   The EndPoint of the axis has an x value the same as the StartPoint, as you would expect (it is a vertical line, after all).  Its y value is set to a point which is shy of the top of the PictureBox by the value of the TopMargin.

   Armed with our start and end points, we take a pen and draw the line: 

    Dim LinePen As New Pen(Color.Black, 2)
    g.DrawLine(LinePen, StartPoint, EndPoint)

   If you are entering the code as you read the article, (and you haven't read the previous articles) you may be wondering why you haven't seen anything appear in the PictureBox.   The reason is that we have drawn the line on an object that isn’t visible yet to the user.   You will recall that we have created a bitmap object the same size as the picturebox and behind the scenes we are drawing on this bitmap.  (Actually,  to be technically correct - as explained earlier - we are drawing on the GraphicsObject of the Bitmap, but the net effect is the same).   At this stage though we haven't assigned this bitmap back into the PictureBox as its image, so the PictureBox remains empty for the time being.

Tick Marks

  To space out the 10 Tick marks correctly we need to know the length of the vertical axis:

    Dim VertLineLength As Integer = PBBarChart.Height - (BaseMargin + TopMargin)

 This will enable us to calculate the correct gap between each of the Ticks.  The layout is from  0 to 1000 in intervals of 100, remember:

   Dim VertGap As Integer = CInt(VertLineLength / 10)
    I have set the horizontal length of each Tick mark as 5 pixels.   It follows then that the start point of each Tick must be 5 pixels to the left of the vertical axis.   The end point of each Tick will be on the vertical axis itself.  Those are the X positions needed and are the same for each Tick.

   The Y positions (which you will recall are the number of pixels counting down from the top) must change for each Tick mark, because we are drawing ten of them equally spaced all the way up the vertical axis.   The spacing between them therefore must be the value we have just calculated, i.e. the value of VertGap.

  Dim TickSP As New Point(LeftMargin - 5, StartPoint.Y - VertGap)
  Dim TickEP As New Point(LeftMargin, StartPoint.Y - VertGap)

 We have all the information needed to create the Tick marks and the 100, 200, 300, etc text.   Pick a Font for the text:

  Dim ValueFont As New Font("Arial", 8, FontStyle.Regular)
 And now we can loop 10 times through a code block which will draw out Tick marks from bottom to top and add the 100s as text at the same time:

  For i As Integer = 1 To 10
   '  Tick mark
   g.DrawLine(New Pen(Color.Black), TickSP, TickEP)
   '  Tick Values as text
   g.DrawString(CStr(i * 100), ValueFont, Brushes.Black, 2, TickSP.Y - 5)
   '  Reset y positions, moving 10% up vertical line
   TickSP.Y -= VertGap
   TickEP.Y -= VertGap

  The only code which might need additional explanation is the one which uses DrawString to draw the text next to the Tick marks.   You may have noticed that the y-position of the start of the text has been shifted 5 pixels higher than the start of the Tick mark itself (TickSP.Y – 5).   This is simply because the X,Y position (the point of origin) of the drawn string is the very top left point of the imaginary rectangle in which the text is drawn.  So, to bring the middle of the text approximately in line with the tick mark, that point of origin has been nudged five pixels further up the page.

Horizontal Axis (a.k.a. The Base Line)

     The code for the Horizontal (X) Axis looks awkward but is actually quite straightforward.  Using the Pen we created earlier (LinePen) we draw a straight line, offsetting the start and end points of the line by values calculated from the the margins we set earlier. 

  g.DrawLine(LinePen, LeftMargin, PBBarChart.Height - BaseMargin, _
     PBBarChart.Width - RightMargin, PBBarChart.Height - BaseMargin)

What Do You Think Of The Show So Far?

   If you are new to all this, you may want some reassurance that all this code is actually going to work.   As a temporary test, try the following.

  •  Ensure that the above line of code is followed by the "End Sub" line of the DrawOutline procedure.
  •  Create a new procedure as shown below:

    Private Sub TempDisplay()
        PBLineChart.Image = bmap
    End Sub

   The above code takes our chart drawing (or what there is of it so far) and assigns it as the image of the PictureBox.   This means that the chart outline will then be visible to you when you run this small procedure.    To run it, put the following code in the Click event of the button you placed on the form earlier:

    Private Sub btnDraw_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDraw.Click
End Sub 

  Save the project and then run it.   If you have entered the code correctly, you will be rewarded with something like this:

   While running the project, try resizing the form and then immediately click the button again.   You will see that the chart outline resizes correctly to fill the available space in the resized PictureBox.  


Sponsored Links