Displaying Data in a Chart / Graph - Visual Basic .NET

Tags: VB.NET, VB 2008, VB 2010, VB 2012, VB 2013

This is a tutorial on how to add a chart to your visual basic .net application and display data as graph.

I have a Microsoft Access database that holds information about Sales and Expenses.

Table 1: Expenses: There are two fields in this table: Month, and Amount
Database Table 1

Table 2: Sales: There are two fields in this table: Month, and Amount
Disaply data as graph in visual basic .net

 I will display both data as a graph.

First add a chart control to your project. Chart control is located in the Data section of your ToolBox

add chart control to visual basic .net application

The default chart comes with a default Series collection called Series1

Default Chart in visual basic .net

The Series is the title of data that we are displaying. In this tutorial we will display sales and expenses data from a database. Therefore our series collection will be Sales, Expenses.

We will delete Series1 becuase we will replace it with Expenses and Sales.

Right click the chart and click on properties. In the properties window, scroll down to Series and click on the small button next to Collection:

Chart properties in visual basic .net

In the window that appears, click on Series1 in the left list, click on Remove then Ok

Remove default series from chart in visual basic .net

Now I will add a button to the form, and start adding the code to the button click event.

Private Sub Button1_Click_1(sender As System.Object, e As System.EventArgs) Handles Button1.Click
        Chart1.Series.Add("Expenses")
        Chart1.Series.Add("Sales")
End Sub

Now I will add the code that will handle the connection to the database:

Add the following code before your Public Class Form1:

Imports System.Data.OleDb

Then add the following code inside the button click event to connect to your Access database:

Dim Conn As OleDbConnection = New OleDbConnection
Dim provider = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source ="
Dim dataFile = "C:\Users\Jimmy\Desktop\Sales.accdb" ' Change it to your Access Database location
Conn.ConnectionString = provider & dataFile
Conn.Open()

Then add the following code to the button click event to get the data from the database and display it into the chart:

		Dim cmd As OleDbCommand = New OleDbCommand("SELECT [Month], [Amount] FROM [Expenses]", Conn)
        Dim dr As OleDbDataReader = cmd.ExecuteReader
        While dr.Read
            Chart1.Series("Expenses").Points.AddXY(dr("Month").ToString, dr("Amount").ToString)
        End While
        dr.Close()
        cmd.Dispose()

        cmd = New OleDbCommand("SELECT [Month], [Amount] FROM [Sales]", Conn)
        dr = cmd.ExecuteReader
        While dr.Read
            Chart1.Series("Sales").Points.AddXY(dr("Month").ToString, dr("Amount").ToString)
        End While

This is all the code for the button click event:

Private Sub Button1_Click_1(sender As System.Object, e As System.EventArgs) Handles Button1.Click
        Chart1.Series.Add("Expenses")
        Chart1.Series.Add("Sales")
        Dim Conn As OleDbConnection = New OleDbConnection
        Dim provider = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source ="
        Dim dataFile = "C:\Users\Jimmy\Desktop\test.accdb" ' Change it to your Access Database location
        Conn.ConnectionString = provider & dataFile
        Conn.Open()
        Dim cmd As OleDbCommand = New OleDbCommand("SELECT [Month], [Amount] FROM [Expenses]", Conn)
        Dim dr As OleDbDataReader = cmd.ExecuteReader
        While dr.Read
            Chart1.Series("Expenses").Points.AddXY(dr("Month").ToString, dr("Amount").ToString)
        End While
        dr.Close()
        cmd.Dispose()
        cmd = New OleDbCommand("SELECT [Month], [Amount] FROM [Sales]", Conn)
        dr = cmd.ExecuteReader
        While dr.Read
            Chart1.Series("Sales").Points.AddXY(dr("Month").ToString, dr("Amount").ToString)
        End While
    End Sub

This is the first look of the Chart after clicking the button and displaying the data as graphs:

visual basic .net charts

You can change many of the chart properties as background color, font, size etc.


Share This

Home | About | Contact | Privacy Policy

Copyright visual-basic-tutorials.com 2017 - All Rights Reserved.