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.
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
3) Click ‘OK’ and then place the controls as shown in the image below.
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.
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”
When you click on “Create Chart” you see a chart generated as shown below.
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.
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
Pie Chart
Chart1.Series(Series1.Name).ChartType = SeriesChartType.Pie
Funnel Chart
Chart1.Series(Series1.Name).ChartType = SeriesChartType.Funnel
Radar Chart
Chart1.Series(Series1.Name).ChartType = SeriesChartType.Radar
Hope this helps 