Vertical Axis Values
So far, the user has been able to see the current value displayed in a label, which is useful but not always realistic. However, on the chart itself the visual clue to the current value has been limited to the grey horizontal lines. In most cases we will want something more definite than this. Specifically, it would be better to have a value displayed at the end of each of the guidelines that our users can refer to.
Although as always there are several ways of achieving this, one of the easiest is simply to create a second PictureBox which contains these values and place it to the side of the picGraph PictureBox.
Add a second PictureBox to the form. Place it to the left hand side of the original picGraph PictureBox. Set its Size to 30, 400. This will make it the same height as the picGraph PictureBox. Name it picValues.
The easy way to line up the two PictureBoxes is to use the Format menu in the Visual Studio IDE. You probably already know all about this, but just in case:
Click the left mouse button on one of the PictureBoxes.
Hold down the Control key .
Click on the second PictureBox, still holding the Control key down.
Select Format - Align - Tops from the IDE Menu:
Next, Select Format - Horizontal Spacing - Remove:
If necessary, you can manually drag both PictureBoxes together to any suitable position on the form.
Finally click anywhere on the form's main area (i.e. not in either of the PictureBoxes) to unlock the selection.
Code for the Vertical Values
The procedure used to put guidelines and values in the new PictureBox is called DrawVerticalValues. This is it:
Private Sub DrawVerticalValues(ByVal PB As PictureBox)
' Draw vertical values (again using double buffering, ' although it's not really necessary)
' Step 1
Dim bmp As New Bitmap(PB.Width, PB.Height)
Dim gv As Graphics = Graphics.FromImage(bmp)
' Step 2
' Draw guidelines on values strip
For i As Integer = 40 To 400 Step 40
gv.DrawLine(Pens.WhiteSmoke, 0, i, PB.Width, i)
Next i
' Step 3
Dim NextMarker As Integer = 100
For i As Integer = 0 To 360 Step 40
gv.DrawString(CStr(NextMarker), New Font("Verdana", 8, FontStyle.Regular), Brushes.Black, 1, i)
NextMarker -= 10
Next
' Step 4
PB.Image = bmp
' Step 5
gv.Dispose()
End Sub
Step 1 and Step 2 are the same as we have previously discussed, so I won't go through those again.
Step 3 has the task of populating values into the PictureBox.
- First, it creates a variable named NextMarker and assigns it an initial value of 100. This value reflects the Maximum value of the ScrollBar.
- The second line in Step 3 sets up a loop. Because of the values of the Step used in the loop, this effectively means that the loop will run ten times.
- Within the loop, DrawString is used to write the next marker value onto the Graphics object of the PictureBox. The first value to be written is 100, the next will be 90, then 80, etc. The reason for writing the values in descending order is of course that this procedure is working its way from the top to the bottom of the PictureBox and therefore we need the values to decrease with each step.
- The next line of code simply reduces the value that we are going to display next. In this example we are reducing the value by 10 each time.
- The loop ends with the Next keyword.
Steps 4 and 5 are again simply repeats of the logic we used in previous drawing procedures.
So there you have a fairly simple way of inserting a vertical list showing values. Next, we need to consider a more realistic situation where the range of values that may need to be charted don't slot neatly into a preset and pre-scaled PictureBox.