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()
SalesData.Clear()
' Ensure that only one set of generated data is held
SalesData.Clear()
' 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