Dream.In.Code > Introduction to Graphs in VB.NET

pe_mitev

29 Dec, 2007 - 02:11 AM

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
Click to view attachment

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.
Click to view attachment
On the the "Choose Toolbox items" dialog, click the second tab("Com components"), find the one showed on the picture and click ok.
Click to view attachment

Click to view attachment
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:

CODE

            .chartType 'Sets the type of graph.
            'I will use the default one

            .Column 'We choose which of
            'the colums we will edit

            .ColumnCount 'Sets the number
            'Columns(Graphs)

            .ColumnLabel 'Sets the caption
            'of the column
            'Default: C & column number

            .Data 'The most important field
            'it contains the value of
            'the column

            'Rows are used to specify
            'in which field "R2" for
            'example we will manage graphs

            'The syntax is simillar
            'We have: Row, RowCount, RowLabel,

Now, let's actually start coding:

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

CODE

Public Class Form1

    Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        'First Step
        AxMSChart1.RowCount = 5
        AxMSChart1.ColumnCount = 2

    End Sub
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.

CODE

Public Class Form1

    Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim I As Integer

        'First Step
        AxMSChart1.RowCount = 5 'Specify count of rows to be 5
        AxMSChart1.ColumnCount = 2 'Specify count of graphs to be 2

        'the loop
        For I = 1 To AxMSChart1.RowCount 'Here it is dynamically and will work in all cases of values for AxMSChart1.Row

            'Set that we want to edit the row "I"
            AxMSChart1.Row = I

            'Setting it's label to I
            AxMSChart1.RowLabel = I

            'Editing the first graph
            AxMSChart1.Column = 1 'Set that I want to edit the second graph
            AxMSChart1.Data = I * 20

            'Editing the second Graph
            AxMSChart1.Column = 2 'Set that I want to edit the second graph
            AxMSChart1.Data = I * 15
        Next

    End Sub
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:
Click to view attachment

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.

If you have any questions, do not hesitate to ask here or via PM.

realwish

23 Jun, 2008 - 01:16 AM

but i want to implement a dynamic graph . i mean the real time application based graph which show the current activity

QUOTE(pe_mitev @ 29 Dec, 2007 - 03:11 AM)

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
Click to view attachment

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.
Click to view attachment
On the the "Choose Toolbox items" dialog, click the second tab("Com components"), find the one showed on the picture and click ok.
Click to view attachment

Click to view attachment
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:

CODE

            .chartType 'Sets the type of graph.
            'I will use the default one

            .Column 'We choose which of
            'the colums we will edit

            .ColumnCount 'Sets the number
            'Columns(Graphs)

            .ColumnLabel 'Sets the caption
            'of the column
            'Default: C & column number

            .Data 'The most important field
            'it contains the value of
            'the column

            'Rows are used to specify
            'in which field "R2" for
            'example we will manage graphs

            'The syntax is simillar
            'We have: Row, RowCount, RowLabel,

Now, let's actually start coding:

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

CODE

Public Class Form1

    Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        'First Step
        AxMSChart1.RowCount = 5
        AxMSChart1.ColumnCount = 2

    End Sub
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.

CODE

Public Class Form1

    Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim I As Integer

        'First Step
        AxMSChart1.RowCount = 5 'Specify count of rows to be 5
        AxMSChart1.ColumnCount = 2 'Specify count of graphs to be 2

        'the loop
        For I = 1 To AxMSChart1.RowCount 'Here it is dynamically and will work in all cases of values for AxMSChart1.Row

            'Set that we want to edit the row "I"
            AxMSChart1.Row = I

            'Setting it's label to I
            AxMSChart1.RowLabel = I

            'Editing the first graph
            AxMSChart1.Column = 1 'Set that I want to edit the second graph
            AxMSChart1.Data = I * 20

            'Editing the second Graph
            AxMSChart1.Column = 2 'Set that I want to edit the second graph
            AxMSChart1.Data = I * 15
        Next

    End Sub
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:
Click to view attachment

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.

If you have any questions, do not hesitate to ask here or via PM.

pe_mitev

2 Jul, 2008 - 09:06 AM

Sorry, I did not really get your question about the real based chart. I have not visited this forum for a while and I have not checked for new answers.