How to Use VB Graph Control to Graph Data from Grid Control

ID Number: Q84063

1.00

WINDOWS

Summary:

This article contains an example of how to use a Graph custom control

to graph the data contained in a Grid custom control.

In order to use either the Grid or the Graph control, you must add

them to the Toolbox in the Visual Basic environment (in VB.EXE). You

do this by selecting Add File from the File menu. From here select the

Graph.VBX file, and then repeat the process for Grid.VBX. Graph.VBX

and Grid.VBX should be found in your Windows\System directory.

This information applies to the Grid and Graph custom controls

supplied with Microsoft Professional Toolkit for Microsoft Visual

Basic programming system version 1.0 for Windows.

More Information:

To create the example, do the following:

1. Run Visual Basic, or from the File menu, choose New Project (ALT,

F, N) if Visual Basic is already running. Form1 is created by

default.

2. From the File menu, choose Add File. In the Files box, select the

GRAPH.VBX custom control file. The Graph tool appears in the

Toolbox.

3. Repeat step 2 for the GRID.VBX custom control file.

4. Add a Grid control (Grid1), a Graph control (Graph1), and a command

button (Command1) to Form1.

5. In the Load event for Form1, add the following code:

Sub Form_Load ()

'This Sub will do all the configuration for the Grid.

ConfigureGrid

'This Sub will do all the configuration for the Graph.

ConfigureGraph

End Sub

6. Create the following subroutine in the general Declarations section

of Form1 to make it callable from anywhere in the form:

Sub ConfigureGrid ()

'Set the number of cols and rows for the grid

Grid1.Rows = 11

Grid1.Cols = 4

'Set the alignment for the fixed col to centered

Grid1.FixedAlignment(0) = 2

'Set the alignment for the variable cols to centered

Grid1.ColAlignment(1) = 2

Grid1.ColAlignment(2) = 2

Grid1.ColAlignment(3) = 2

Grid1.ScrollBars = 0

' Add the row labels

Grid1.Col = 0

For i = 1 To 10

Grid1.Row = i

Grid1.Text = Str$(i)

Next i

' Add the Col labels

Grid1.Row = 0

Grid1.Col = 1

Grid1.Text = "May"

Grid1.Col = 2

Grid1.Text = "June"

Grid1.Col = 3

Grid1.Text = "July"

' Set the starting cell on the Grid

Grid1.Row = 1

Grid1.Col = 1

End Sub

7. Create the following subroutine in the general Declarations section

of Form1 to make it callable from anywhere on the form:

Sub ConfigureGraph ()

' Set the Graph to auto increment

Graph1.AutoInc = 1

Graph1.BottomTitle = "Months"

Graph1.GraphCaption = "Graph Caption"

'Set the number of data groupings

Graph1.NumPoints = 10

' Set the number of data points per group

Graph1.NumSets = 3

End Sub

8. Place the following line of code into the KeyPress event for Grid1:

Sub Grid1_KeyPress (KeyAscii As Integer)

'This adds each keystroke to the data in the current cell

Grid1.Text = Grid1.Text + Chr$(KeyAscii)

End Sub

9. For the Click event of Command1, enter the following code:

Sub Command1_Click ()

' This Sub graphs the data in the Grid using the Graph control

' Set the graph to the first point

Graph1.ThisSet = 1

Graph1.ThisPoint = 1

' Load the GraphData array with all the values from the Grid,

' in order.

For i = 1 To 3

For j = 1 To 10

Grid1.Row = j

Grid1.Col = i

Graph1.GraphData = Val(Grid1.Text)

Next j

Next i

' This actually graphs the array to the Graph control.

Graph1.DrawMode = 2

End Sub

This example will give you a grid with three columns (Months) and 10

rows. After you enter the data into the columns, choose the command

button (with the mouse or keys). The data will be taken from the grid

and graphed as a line graph.

Additional reference words: 1.00