Charting with VB.Net 2010


EDIT

I have stopped updating this blog. This link can also be found in my Website.

http://www.siddharthrout.com/2011/10/18/charting-with-vb-net-2010/

There are many tutorials on the web regarding VB.Net Charting but I couldn’t find one which actually goes into details.  So I thought of creating one. The example that I will be using retrieves the data from an Access Database and populates the chart in VB.Net.

VB.Net Version: 2010 Ultimate

MS Access : 2010

1) To start off, let’s create a small database in Access. Your Access Database looks like this once it is ready.

imageimage

Name the Table as “Table1” and the Database as “Sample.accdb”. Save it to a location of your choice. Remember the location as we will have to use this database later from vb.net.

2) Start Visual Studio and create a new Windows Application Project on VB.NET. Let’s Call it “Charting”. See snapshot below

image

3) Click ‘OK’ and then place the controls as shown in the image below.

image

In earlier versions of vb.net, you had to actually activate the chart control by right clicking on the “ContextMenuStrip” and then selecting MS Chart Control from the COM Tab. But now you can find that control right under the “Data” Tab.

image

4) Creating Basic Chart: Once your controls are ready, open the code editor and simply paste this code. This code will create a very basic chart.

Imports System.Data.OleDb
Imports System.Windows.Forms.DataVisualization.Charting

Public Class Form1

    '~~> Code required to browse for the Access Database File
    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        With OpenFileDialog1
            .DefaultExt = "accdb"
            .DereferenceLinks = True
            .Filter = _
             "Access files (*.accdb)|*.accdb"
            .Multiselect = False
            .Title = "Select an Access Database file to open"
            .ValidateNames = True

            If .ShowDialog = Windows.Forms.DialogResult.OK Then
                Try
                    TextBox1.Text = .FileName
                Catch fileException As Exception
                    Throw fileException
                End Try
            End If
        End With
    End Sub

    '~~> Code to generate the chart
    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
        Dim strConn As String = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" & TextBox1.Text & _
        ";Persist Security Info=False;"
        Dim tblFields As String = "SELECT * from Table1"

        Dim conn As New OleDbConnection(strConn)
        Dim oCmd As New OleDbCommand(tblFields, conn)
        Dim oData As New OleDbDataAdapter(tblFields, conn)
        Dim ds As New DataSet

        conn.Open()
        oData.Fill(ds, "Table1")
        conn.Close()

        Chart1.DataSource = ds.Tables("Table1")
        Dim Series1 As Series = Chart1.Series("Series1")
        Series1.Name = "Sales"
        Chart1.Series(Series1.Name).XValueMember = "nFruits"
        Chart1.Series(Series1.Name).YValueMembers = "nSales"

        Chart1.Size = New System.Drawing.Size(780, 350)
    End Sub

End Class

When you run the code your form will popup and looks as shown in the image below. Select your file by clicking on the “Load File” button. Once you have selected the file, click on “Create Chart

image

When you click on “Create Chart” you see a chart generated as shown below.

image

Now this was making a very basic chart. What if we want it to give a more professional look? What if we wanted to format the title or make the chart look more appealing?

5) Advanced Charting: Now replace the old code with this new code. I have commented the code so you know what the code is doing.

Imports System.Data.OleDb
Imports System.Windows.Forms.DataVisualization.Charting

Public Class Form1

    '~~> Code required to browse for the Access Database File
    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        With OpenFileDialog1
            .DefaultExt = "accdb"
            .DereferenceLinks = True
            .Filter = _
             "Access files (*.accdb)|*.accdb"
            .Multiselect = False
            .Title = "Select an Access Database file to open"
            .ValidateNames = True

            If .ShowDialog = Windows.Forms.DialogResult.OK Then
                Try
                    TextBox1.Text = .FileName
                Catch fileException As Exception
                    Throw fileException
                End Try
            End If
        End With
    End Sub

    '~~> Code to generate the chart
    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
        '~~> Connection String to connect to the access Database
        '~~> If you are planning to use SQL Database then please visit www.connectionstrings.com for an
        '~~> appropriate connection string
        Dim strConn As String = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" & TextBox1.Text & _
        ";Persist Security Info=False;"

        '~~> Query string
        Dim tblFields As String = "SELECT * from Table1"

        '~~> Connecting to Data base and storing the data in a dataset
        Dim conn As New OleDbConnection(strConn)
        Dim oCmd As New OleDbCommand(tblFields, conn)
        Dim oData As New OleDbDataAdapter(tblFields, conn)
        Dim ds As New DataSet

        conn.Open()
        oData.Fill(ds, "Table1")
        conn.Close()

        '''''''''''''''''''''''''''''
        '~~> SET DATA SOURCE <~~'
        '''''''''''''''''''''''''''''
        Chart1.DataSource = ds.Tables("Table1")

        ''''''''''''''''''''''''''''''''
        '~~> WORKING WITH CHARTAREA <~~'
        ''''''''''''''''''''''''''''''''
        Dim CArea As ChartArea = Chart1.ChartAreas(0)
        CArea.BackColor = Color.Azure           '~~> Changing the Back Color of the Chart Area 
        CArea.ShadowColor = Color.Red           '~~> Changing the Shadow Color of the Chart Area 
        CArea.Area3DStyle.Enable3D = True       '~~> Changing the Chart Style to 3D 

        '~~> Formatting X Axis
        CArea.AxisX.MajorGrid.Enabled = False   '~~> Removed the X axis major grids
        CArea.AxisX.LabelStyle.Font = New System.Drawing.Font("Times New Roman", _
        11.0F, System.Drawing.FontStyle.Italic) '~~> Setting Font, Font Size and Italicizing

        '~~> Formatting Y Axis
        CArea.AxisY.MajorGrid.Enabled = False   '~~> Removed the Y axis major grids
        CArea.AxisY.LabelStyle.Format = "0.00%" '~~> Formatting Y axis to display values in %age
        CArea.AxisY.Interval = 0.2              '~~> Formatting Y axis Interval to 20%

        ''''''''''''''''''''''''''''
        '~~> WORKING WITH TITLE <~~'
        ''''''''''''''''''''''''''''
        '~~> Adding a Title
        Dim T As Title = Chart1.Titles.Add("Sales Report Fruits - Year 2010")
        '~~> Formatting the Title
        With T
            .ForeColor = Color.Black            '~~> Changing the Fore Color of the Title 
            .BackColor = Color.Coral            '~~> Changing the Back Color of the Title 

            '~~> Setting Font, Font Size and Bold/Italicizing
            .Font = New System.Drawing.Font("Times New Roman", 11.0F, System.Drawing.FontStyle.Bold)
            .Font = New System.Drawing.Font("Times New Roman", 11.0F, System.Drawing.FontStyle.Underline)
            .BorderColor = Color.Black          '~~> Changing the Border Color of the Title 
            .BorderDashStyle = ChartDashStyle.DashDotDot '~~> Changing the Border Dash Style of the Title 
        End With

        '''''''''''''''''''''''''''''
        '~~> WORKING WITH SERIES <~~'
        '''''''''''''''''''''''''''''
        Dim Series1 As Series = Chart1.Series("Series1")
        '~~> Setting the series Name
        Series1.Name = "Sales"
        '~~> Assigning values to X and Y Axis
        Chart1.Series(Series1.Name).XValueMember = "nFruits"
        Chart1.Series(Series1.Name).YValueMembers = "nSales"
        '~~> Setting Font, Font Size and Bold
        Chart1.Series(Series1.Name).Font = New System.Drawing.Font("Times New Roman", 11.0F, System.Drawing.FontStyle.Bold)
        '~~> Setting Value Type
        Chart1.Series(Series1.Name).YValueType = ChartValueType.Double
        '~~> Setting the Chart Type for Display 
        Chart1.Series(Series1.Name).ChartType = SeriesChartType.Radar
        '~~> Display Data Labels
        Chart1.Series(Series1.Name).IsValueShownAsLabel = True
        '~~> Setting label's Fore Color
        Chart1.Series(Series1.Name).LabelForeColor = Color.DarkGreen
        '~~> Setting label's Format to %age
        Chart1.Series(Series1.Name).LabelFormat = "0.00%"

        '''''''''''''''''''''''''''''
        '~~> WORKING WITH LEGEND <~~'
        '''''''''''''''''''''''''''''
        Dim LG As Legend = Chart1.Legends(0)
        '~~> Changing the Back Color of the Legend 
        LG.BackColor = Color.Wheat
        '~~> Changing the Fore Color of the Legend
        LG.ForeColor = Color.DarkSlateBlue
        '~~> Setting Font, Font Size and Bold
        LG.Font = New System.Drawing.Font("Times New Roman", 11.0F, System.Drawing.FontStyle.Bold)
        '~~> Assigning a title for the legend
        LG.Title = "Legend"

        '~~> Setting the location for the chart
        Chart1.Size = New System.Drawing.Size(780, 350)
    End Sub
End Class

When you run the above code you will see the old chart now transforms into a much more meaningful chart.

image

Similarly we can create other charts like Bar Charts, Pie Charts, Line Charts, Area Charts etc. All you need to do is change the line in the above code

Chart1.Series(Series1.Name).ChartType = SeriesChartType.Column

Few Examples

Line Chart

Chart1.Series(Series1.Name).ChartType = SeriesChartType.Line

image

Pie Chart

Chart1.Series(Series1.Name).ChartType = SeriesChartType.Pie

image

Funnel Chart

Chart1.Series(Series1.Name).ChartType = SeriesChartType.Funnel

image

Radar Chart

Chart1.Series(Series1.Name).ChartType = SeriesChartType.Radar

image

Hope this helps Smile

About these ads

12 responses to “Charting with VB.Net 2010

  1. Rafael Almeida April 6, 2012 at 4:54 am

    Thanks for this tutorial.
    It worked like a charm!!!

  2. señor fa April 15, 2012 at 3:06 am

    excelente busque muchas veces en internet pero un tuto como el tuyo es lo mejor para los que apenas comoenzamos con vb 2010 saludos u muchas gracias dios te bendiga

  3. legna May 21, 2012 at 6:09 pm

    Thanks!!! Great tutorial.

  4. Peter Williams June 15, 2012 at 9:09 pm

    This is an excellent piece of code! This give you a “template” for developing further.

  5. Arnaldo pinheiro July 2, 2012 at 12:28 am

    Thanks for this magnificent tutorial!
    For a newbie like me this kind of details helps a lot.

  6. Mukesh Chalodiya July 18, 2012 at 11:02 am

    this code is not display the chart . I used sql server database. there is no error but it wil not display chart.Please upload code with sql database.
    Thanks in advance.

    • Siddharth Rout July 18, 2012 at 8:47 pm

      Mukesh, I would suggest asking such questions in a forums like MSDN/VBForums.com/Stackoverflow. You can then post the link here. If I can help you then I definitely will. If you want specific code to be developed for you then consider sending me an email with the exact requirements + Budget that we are looking at :)

  7. Kristian Benning January 22, 2013 at 10:23 pm

    As always Sid, your code rocks.

    Many thanks

    Kristian

  8. Dieter Berrios March 12, 2013 at 8:08 pm

    This tutorial is great. Help me a lot with the series.

  9. leechxyz June 13, 2013 at 12:04 pm

    this code is very helpful!!! tnx

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 28 other followers

%d bloggers like this: