VB.Net

Introduction To Graphs In VB.NET Using Microsoft Chart Control

calsalmon May 20, 2013

Good moorning! I searched the VB.NET tutorials section and I didn’t manage to find a tutorial showing the process of creating graphics in VB.NET and that’s why I decided to write one. Let’s begin

First, we have to create a new WindowsApplication

Resized to 74% (was 681 x 417) – Click image to enlargeAttached Image

Now, we can see the form of the new project. Look at your Menus and Toobars section at the toolbar for this one: “Microsoft Chart Control, version 6.0 (OLEBG).

If you have it, skip the next two steps.

For those, who do not have it, add it how it is showed on the pictures.

Resized to 75% (was 668 x 576) – Click image to enlargeAttached Image

On the the “Choose Toolbox items” dialog, click the second tab(“Com components”), find the one showed on the picture and click ok.

Resized to 88% (was 571 x 403) – Click image to enlargeAttached Image
Resized to 75% (was 670 x 574) – Click image to enlargeAttached Image

Now, you must have it there. Grap one and stretch it on the form until you get the target size.

It is important to know basic attributes:

01 .chartType 'Sets the type of graph.
02 'I will use the default one
03
04 .Column 'We choose which of
05 'the colums we will edit
06
07 .ColumnCount 'Sets the number
08 'Columns(Graphs)
09
10 .ColumnLabel 'Sets the caption
11 'of the column
12 'Default: C & column number
13
14 .Data 'The most important field
15 'it contains the value of
16 'the column
17
18 'Rows are used to specify
19 'in which field "R2" for
20 'example we will manage graphs
21
22 'The syntax is simillar
23 'We have: Row, RowCount, RowLabel,

Now, let’s actually start coding:

1. First I want to create 5 rows, with two columns(graphs).

01 Public Class Form1
02
03     Private Sub Form1_Load(ByVal sender As Object,ByVal e As System.EventArgs) Handles Me.Load
04
05         'First Step
06         AxMSChart1.RowCount = 5
07         AxMSChart1.ColumnCount = 2
08
09
10     End Sub
11 End Class

2. Let’s improve point one and create a loop to understand how basic attributes work. The first graph’s data I will multiply by 20 and the second, by 15.

01 Public Class Form1
02  
03     Private Sub Form1_Load(ByVal sender AsObject, ByVal e As System.EventArgs) HandlesMe.Load
04         Dim I As Integer
05
06         'First Step
07         AxMSChart1.RowCount = 5 'Specify count of rows to be 5
08         AxMSChart1.ColumnCount = 2 'Specify count of graphs to be 2
09
10         'the loop
11         For I = 1 To AxMSChart1.RowCount 'Here it is dynamically and will work in all cases of values for AxMSChart1.Row
12
13             'Set that we want to edit the row "I"
14             AxMSChart1.Row = I
15
16             'Setting it's label to I
17             AxMSChart1.RowLabel = I
18
19             'Editing the first graph
20             AxMSChart1.Column = 1 'Set that I want to edit the second graph
21             AxMSChart1.Data = I * 20
22
23             'Editing the second Graph
24             AxMSChart1.Column = 2 'Set that I want to edit the second graph
25             AxMSChart1.Data = I * 15
26         Next
27
28
29     End Sub
30 End Class

It is important to know that you must have specified that ColumnCount is 2. If you have not done this, Visual Studio would return an error message.

Here is the result:
Attached Image

This is the way to work with Graphics. Feel free to change .chartType and the other attributes to understand better graphics.
You can also set your ShowLegend property to True and a legend will appear next to the graph.