Outline

   As in the previous articles, the chart will be displayed in a PictureBox control.   Although it would be easy - easier in some ways - to simply plaster the chart onto the surface of the form itself, I think it is more realistic to house it inside some kind of container control because a chart is most often just one part of a range of information displayed to the user.   It also lends itself more easily to the situation where you want to take user input on screen and to use that data directly to draw or redraw the chart.

    For convenience, we will create some sample data at the start of the project.  In a real world scenario, you will probably gather this data from a data source of some kind, either one that has been previously saved to file or directly from the user on screen.    If you want to adjust the code in this article to take in data at runtime, you will find an example of how this can be done in Part 3 of this series.

Getting Started

   Add a form to a project and name it LineChartDemo.  Make the form size something in the region of 640 by 480.   Drag  a PictureBox on to the form from the ToolBox and drag its left, top and right borders so that they are very close to the edge of the form.   Drag the bottom of the PictureBox so that the PictureBox height is approx 80% of the form's height.   Set the PictureBox's Anchor property to include all four sides, Top, Bottom, Left and Right.  Set its BorderStyle property to the selection your prefer; I have used Fixed3D in the screenshot examples.  Name it "PBLineChart".

  Now, add a button to the form and place it down at the bottom right hand corner.   Change its Anchor property from the default setting to Bottom and Right.   These changes to the Anchor properties of the two controls mean that the PictureBox will resize usefully if the size of the form is changed and the button will remain anchored down in the left hand corner where you want it to be. 

   At the very top of the form, insert the following:

    Option Strict On
   Imports System.Drawing.Drawing2D

  The first line, as you probably know, is good practice (although it makes some of the code more unwieldy) and helps to avoid tricky conversion errors between the various Types .  The second line allows us access to all the methods in the Drawing2D class, some of which we will use to create the various lines and shapes in the chart.

 The Sample Data  

    Our sample data is very basic - 12 months of the year to be displayed on the horizontal axis and some figures to represent sales per month to be set against the vertical axis.   The two sets of data can conveniently be stored in two separate arrays;  Array "Months" to store the names, Array "Sales" to hold the figures.   As mentioned above, this is simply a convenience to enable us to get on with the business of drawing without getting too bogged down with data handling.

     Inside the "Public Class LineChartDemo" class code, enter the following code which creates the two arrays and populates them with the demo data in one step:

    Dim Months() As String = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", _
    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"}
    Dim Sales() As Integer = {835, 314, 672, 429, 715, 642, _
    153, 699, 622, 901, 345, 655}

Variables

    Much of the fiddly setting up of a chart involves deciding or calculating margins and lengths of lines, etc.   Some of these can be hard coded at design time - items such as the number of pixels to inset the start of the graph lines.   Others are better calculated dynamically -  things like the length of the baseline which can grow or shrink as the containing form's size is changed.

   The following code either sets up the hard coded values of variables or creates variables ready to be assigned appropriate values later when the application is run.   Place it below the code that instantiated the arrays.  

    '  ~~  Variables for margins and outlines, etc ~~
    '  # 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
      
    '  Variable to hold length of vertical axis
    Dim VertLineLength As Integer
    '  Variable to hold length of horizontal axis
    Dim BaseLineLength As Integer
    '  Variable to store length of each line segment
    Dim LineWidth As Double

    As in earlier examples, we are going to use the double buffering technique to create the chart in the background and "paste" it into the PictureBox once it is all ready and good to go.    Of course, we don't actually paste it in the traditional sense; what we do is to assign the completed chart drawing as the image for the PictureBox.  If you want to review how this works, you can find further explanation on Page 3 of Part 2 of this series. 

   We will create the Graphics object and Bitmap object in the next lines of code:

    '  ~~  Bitmap and Graphics Objects  ~~
    '  A variable to hold a Graphics object
    Dim g As Graphics
    '    Next, create a Bitmap object which is
    '    the same size and resolution as the PictureBox
    Dim bmap As Bitmap

    With that code all in place, we are ready to move on to the business of actually drawing the chart.   We will break the tasks into a series of procedures.   If you decide to recycle the sample code for your own purposes later, you will find it quite easy to make the necessary changes and can improve the procedures by passing parameters in place of some of the hard coded values I have used for demonstration purposes.