{"id":211,"date":"2013-05-20T01:57:12","date_gmt":"2013-05-20T06:57:12","guid":{"rendered":"http:\/\/homepages.uc.edu\/~yaozo\/wordpress\/?p=211"},"modified":"2013-05-20T01:57:12","modified_gmt":"2013-05-20T06:57:12","slug":"charting-with-vb-net-2010","status":"publish","type":"post","link":"https:\/\/zhuoyao.net\/index.php\/2013\/05\/20\/charting-with-vb-net-2010\/","title":{"rendered":"Charting with VB.Net 2010"},"content":{"rendered":"

I have stopped updating this blog. This link can also be found in my Website.<\/strong><\/p>\n

http:\/\/www.siddharthrout.com\/2011\/10\/18\/charting-with-vb-net-2010\/<\/a><\/strong><\/p>\n

\n

T<\/strong>here are many tutorials on the web regarding VB.Net Charting but I couldn\u2019t find one which actually goes into details.\u00a0 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.<\/p>\n

\n

VB.Net Version<\/strong>: 2010 Ultimate<\/p>\n<\/blockquote>\n

\n

MS Access<\/strong>\u00a0: 2010<\/p>\n<\/blockquote>\n

1)<\/strong>\u00a0To start off, let\u2019s create a small database in Access. Your Access Database looks like this once it is ready.<\/p>\n

\"image\"<\/a>\"image\"<\/a><\/p>\n

Name the Table as \u201cTable1<\/strong>\u201d and the Database as \u201cSample.accdb<\/strong>\u201d. Save it to a location of your choice. Remember the location as we will have to use this database later from vb.net.<\/p>\n

2)<\/strong>\u00a0Start Visual Studio and create a new Windows Application Project on VB.NET. Let\u2019s Call it \u201cCharting<\/strong>\u201d. See snapshot below<\/p>\n

\"image\"<\/a><\/p>\n

3)<\/strong>\u00a0Click \u2018OK\u2019 and then place the controls as shown in the image below.<\/p>\n

\"image\"<\/a><\/p>\n

In earlier versions of vb.net, you had to actually activate the chart control by right clicking on the \u201cContextMenuStrip<\/strong>\u201d and then selecting MS Chart Control from the COM Tab. But now you can find that control right under the \u201cData<\/strong>\u201d Tab.<\/p>\n

\"image\"<\/a><\/p>\n

4)<\/strong>\u00a0Creating Basic Chart<\/strong>: Once your controls are ready, open the code editor and simply paste this code. This code will create a very basic chart.<\/p>\n

\n
Imports System.Data.OleDb\nImports System.Windows.Forms.DataVisualization.Charting\n\nPublic Class Form1\n\n    '~~> Code required to browse for the Access Database File\n    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click\n        With OpenFileDialog1\n            .DefaultExt = \"accdb\"\n            .DereferenceLinks = True\n            .Filter = _\n             \"Access files (*.accdb)|*.accdb\"\n            .Multiselect = False\n            .Title = \"Select an Access Database file to open\"\n            .ValidateNames = True\n\n            If .ShowDialog = Windows.Forms.DialogResult.OK Then\n                Try\n                    TextBox1.Text = .FileName\n                Catch fileException As Exception\n                    Throw fileException\n                End Try\n            End If\n        End With\n    End Sub\n\n    '~~> Code to generate the chart\n    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click\n        Dim strConn As String = \"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=\" & TextBox1.Text & _\n        \";Persist Security Info=False;\"\n        Dim tblFields As String = \"SELECT * from Table1\"\n\n        Dim conn As New OleDbConnection(strConn)\n        Dim oCmd As New OleDbCommand(tblFields, conn)\n        Dim oData As New OleDbDataAdapter(tblFields, conn)\n        Dim ds As New DataSet\n\n        conn.Open()\n        oData.Fill(ds, \"Table1\")\n        conn.Close()\n\n        Chart1.DataSource = ds.Tables(\"Table1\")\n        Dim Series1 As Series = Chart1.Series(\"Series1\")\n        Series1.Name = \"Sales\"\n        Chart1.Series(Series1.Name).XValueMember = \"nFruits\"\n        Chart1.Series(Series1.Name).YValueMembers = \"nSales\"\n\n        Chart1.Size = New System.Drawing.Size(780, 350)\n    End Sub\n\nEnd Class<\/pre>\n<\/div>\n
When you run the code your form will popup and looks as shown in the image below. Select your file by clicking on the \u201cLoad File\u201d button. Once you have selected the file, click on \u201cCreate Chart<\/strong>\u201d<\/p>\n
\"image\"<\/a><\/p>\n
When you click on \u201cCreate Chart<\/strong>\u201d you see a chart generated as shown below.<\/p>\n
\"image\"<\/a><\/p>\n
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?<\/p>\n
5)<\/strong>\u00a0Advanced Charting<\/strong>: Now replace the old code with this new code. I have commented the code so you know what the code is doing.<\/p>\n
Imports System.Data.OleDb\nImports System.Windows.Forms.DataVisualization.Charting\n\nPublic Class Form1\n\n    '~~> Code required to browse for the Access Database File\n    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click\n        With OpenFileDialog1\n            .DefaultExt = \"accdb\"\n            .DereferenceLinks = True\n            .Filter = _\n             \"Access files (*.accdb)|*.accdb\"\n            .Multiselect = False\n            .Title = \"Select an Access Database file to open\"\n            .ValidateNames = True\n\n            If .ShowDialog = Windows.Forms.DialogResult.OK Then\n                Try\n                    TextBox1.Text = .FileName\n                Catch fileException As Exception\n                    Throw fileException\n                End Try\n            End If\n        End With\n    End Sub\n\n    '~~> Code to generate the chart\n    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click\n        '~~> Connection String to connect to the access Database\n        '~~> If you are planning to use SQL Database then please visit www.connectionstrings.com for an\n        '~~> appropriate connection string\n        Dim strConn As String = \"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=\" & TextBox1.Text & _\n        \";Persist Security Info=False;\"\n\n        '~~> Query string\n        Dim tblFields As String = \"SELECT * from Table1\"\n\n        '~~> Connecting to Data base and storing the data in a dataset\n        Dim conn As New OleDbConnection(strConn)\n        Dim oCmd As New OleDbCommand(tblFields, conn)\n        Dim oData As New OleDbDataAdapter(tblFields, conn)\n        Dim ds As New DataSet\n\n        conn.Open()\n        oData.Fill(ds, \"Table1\")\n        conn.Close()\n\n        '''''''''''''''''''''''''''''\n        '~~> SET DATA SOURCE <~~'\n        '''''''''''''''''''''''''''''\n        Chart1.DataSource = ds.Tables(\"Table1\")\n\n        ''''''''''''''''''''''''''''''''\n        '~~> WORKING WITH CHARTAREA <~~'\n        ''''''''''''''''''''''''''''''''\n        Dim CArea As ChartArea = Chart1.ChartAreas(0)\n        CArea.BackColor = Color.Azure           '~~> Changing the Back Color of the Chart Area \n        CArea.ShadowColor = Color.Red           '~~> Changing the Shadow Color of the Chart Area \n        CArea.Area3DStyle.Enable3D = True       '~~> Changing the Chart Style to 3D \n\n        '~~> Formatting X Axis\n        CArea.AxisX.MajorGrid.Enabled = False   '~~> Removed the X axis major grids\n        CArea.AxisX.LabelStyle.Font = New System.Drawing.Font(\"Times New Roman\", _\n        11.0F, System.Drawing.FontStyle.Italic) '~~> Setting Font, Font Size and Italicizing\n\n        '~~> Formatting Y Axis\n        CArea.AxisY.MajorGrid.Enabled = False   '~~> Removed the Y axis major grids\n        CArea.AxisY.LabelStyle.Format = \"0.00%\" '~~> Formatting Y axis to display values in %age\n        CArea.AxisY.Interval = 0.2              '~~> Formatting Y axis Interval to 20%\n\n        ''''''''''''''''''''''''''''\n        '~~> WORKING WITH TITLE <~~'\n        ''''''''''''''''''''''''''''\n        '~~> Adding a Title\n        Dim T As Title = Chart1.Titles.Add(\"Sales Report Fruits - Year 2010\")\n        '~~> Formatting the Title\n        With T\n            .ForeColor = Color.Black            '~~> Changing the Fore Color of the Title \n            .BackColor = Color.Coral            '~~> Changing the Back Color of the Title \n\n            '~~> Setting Font, Font Size and Bold\/Italicizing\n            .Font = New System.Drawing.Font(\"Times New Roman\", 11.0F, System.Drawing.FontStyle.Bold)\n            .Font = New System.Drawing.Font(\"Times New Roman\", 11.0F, System.Drawing.FontStyle.Underline)\n            .BorderColor = Color.Black          '~~> Changing the Border Color of the Title \n            .BorderDashStyle = ChartDashStyle.DashDotDot '~~> Changing the Border Dash Style of the Title \n        End With\n\n        '''''''''''''''''''''''''''''\n        '~~> WORKING WITH SERIES <~~'\n        '''''''''''''''''''''''''''''\n        Dim Series1 As Series = Chart1.Series(\"Series1\")\n        '~~> Setting the series Name\n        Series1.Name = \"Sales\"\n        '~~> Assigning values to X and Y Axis\n        Chart1.Series(Series1.Name).XValueMember = \"nFruits\"\n        Chart1.Series(Series1.Name).YValueMembers = \"nSales\"\n        '~~> Setting Font, Font Size and Bold\n        Chart1.Series(Series1.Name).Font = New System.Drawing.Font(\"Times New Roman\", 11.0F, System.Drawing.FontStyle.Bold)\n        '~~> Setting Value Type\n        Chart1.Series(Series1.Name).YValueType = ChartValueType.Double\n        '~~> Setting the Chart Type for Display \n        Chart1.Series(Series1.Name).ChartType = SeriesChartType.Radar\n        '~~> Display Data Labels\n        Chart1.Series(Series1.Name).IsValueShownAsLabel = True\n        '~~> Setting label's Fore Color\n        Chart1.Series(Series1.Name).LabelForeColor = Color.DarkGreen\n        '~~> Setting label's Format to %age\n        Chart1.Series(Series1.Name).LabelFormat = \"0.00%\"\n\n        '''''''''''''''''''''''''''''\n        '~~> WORKING WITH LEGEND <~~'\n        '''''''''''''''''''''''''''''\n        Dim LG As Legend = Chart1.Legends(0)\n        '~~> Changing the Back Color of the Legend \n        LG.BackColor = Color.Wheat\n        '~~> Changing the Fore Color of the Legend\n        LG.ForeColor = Color.DarkSlateBlue\n        '~~> Setting Font, Font Size and Bold\n        LG.Font = New System.Drawing.Font(\"Times New Roman\", 11.0F, System.Drawing.FontStyle.Bold)\n        '~~> Assigning a title for the legend\n        LG.Title = \"Legend\"\n\n        '~~> Setting the location for the chart\n        Chart1.Size = New System.Drawing.Size(780, 350)\n    End Sub\nEnd Class<\/pre>\n
When you run the above code you will see the old chart now transforms into a much more meaningful chart.<\/p>\n
\"image\"<\/a><\/p>\n
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<\/p>\n
\n
Chart1.Series(Series1.Name).ChartType = SeriesChartType.Column<\/pre>\n<\/div>\n
Few Examples<\/strong><\/p>\n
Line Chart<\/strong><\/p>\n
\n
Chart1.Series(Series1.Name).ChartType = SeriesChartType.Line<\/pre>\n<\/div>\n
\"image\"<\/a><\/p>\n
Pie Chart<\/strong><\/p>\n
\n
Chart1.Series(Series1.Name).ChartType = SeriesChartType.Pie<\/pre>\n<\/div>\n
\"image\"<\/a><\/p>\n
Funnel Chart<\/strong><\/p>\n
\n
Chart1.Series(Series1.Name).ChartType = SeriesChartType.Funnel<\/pre>\n<\/div>\n
\"image\"<\/a><\/p>\n
Radar Chart<\/strong><\/p>\n
\n
Chart1.Series(Series1.Name).ChartType = SeriesChartType.Radar<\/pre>\n<\/div>\n
\"image\"<\/a><\/p>\n
Hope this helps\u00a0\"Smile\"<\/p>\n","protected":false},"excerpt":{"rendered":"
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… <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-211","post","type-post","status-publish","format-standard","hentry","category-vb-net"],"_links":{"self":[{"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/posts\/211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/comments?post=211"}],"version-history":[{"count":0,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/posts\/211\/revisions"}],"wp:attachment":[{"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/media?parent=211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/categories?post=211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/tags?post=211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}