{"id":213,"date":"2013-05-20T01:58:20","date_gmt":"2013-05-20T06:58:20","guid":{"rendered":"http:\/\/homepages.uc.edu\/~yaozo\/wordpress\/?p=213"},"modified":"2013-05-20T01:58:20","modified_gmt":"2013-05-20T06:58:20","slug":"introduction-to-graphs-in-vb-net-using-microsoft-chart-control","status":"publish","type":"post","link":"https:\/\/zhuoyao.net\/index.php\/2013\/05\/20\/introduction-to-graphs-in-vb-net-using-microsoft-chart-control\/","title":{"rendered":"Introduction To Graphs In VB.NET Using Microsoft Chart Control"},"content":{"rendered":"

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<\/p>\n

First, we have to create a new WindowsApplication<\/p>\n

Resized to 74% (was 681 x 417) – Click image to enlarge\"Attached<\/div>\n

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).<\/p>\n

If you have it, skip the next two steps.<\/p>\n

For those, who do not have it, add it how it is showed on the pictures.<\/p>\n

Resized to 75% (was 668 x 576) – Click image to enlarge\"Attached<\/div>\n

On the the “Choose Toolbox items” dialog, click the second tab(“Com components”), find the one showed on the picture and click ok.<\/p>\n

Resized to 88% (was 571 x 403) – Click image to enlarge\"Attached<\/div>\n
Resized to 75% (was 670 x 574) – Click image to enlarge\"Attached<\/div>\n

Now, you must have it there. Grap one and stretch it on the form until you get the target size.<\/p>\n

It is important to know basic attributes:<\/p>\n

\n
\n
\n\n\n\n
01<\/code><\/td>\n.chartType\u00a0<\/code>'Sets the type of graph.<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
02<\/code><\/td>\n'I will use the default one<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
03<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
04<\/code><\/td>\n.Column\u00a0<\/code>'We choose which of<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
05<\/code><\/td>\n'the colums we will edit<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
06<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
07<\/code><\/td>\n.ColumnCount\u00a0<\/code>'Sets the number<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
08<\/code><\/td>\n'Columns(Graphs)<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
09<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\n.ColumnLabel\u00a0<\/code>'Sets the caption<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
11<\/code><\/td>\n'of the column<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
12<\/code><\/td>\n'Default: C & column number<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
13<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
14<\/code><\/td>\n.Data\u00a0<\/code>'The most important field<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
15<\/code><\/td>\n'it contains the value of<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
16<\/code><\/td>\n'the column<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
17<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
18<\/code><\/td>\n'Rows are used to specify<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
19<\/code><\/td>\n'in which field \"R2\" for<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
20<\/code><\/td>\n'example we will manage graphs<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
21<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
22<\/code><\/td>\n'The syntax is simillar<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
23<\/code><\/td>\n'We have: Row, RowCount, RowLabel,<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Now, let’s actually start coding:<\/p>\n

1. First I want to create 5 rows, with two columns(graphs).<\/p>\n

\n
\n
\n\n\n\n
01<\/code><\/td>\nPublic<\/code>\u00a0Class<\/code>\u00a0Form1<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
02<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
03<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>Private<\/code>\u00a0Sub<\/code>\u00a0Form1_Load(<\/code>ByVal<\/code>\u00a0sender\u00a0<\/code>As<\/code>\u00a0Object<\/code>,<\/code>ByVal<\/code>\u00a0e\u00a0<\/code>As<\/code>\u00a0System.EventArgs)\u00a0<\/code>Handles<\/code>\u00a0Me<\/code>.Load<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
04<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
05<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>'First Step<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
06<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>AxMSChart1.RowCount = 5<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
07<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>AxMSChart1.ColumnCount = 2<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
08<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
09<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>End<\/code>\u00a0Sub<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
11<\/code><\/td>\nEnd<\/code>\u00a0Class<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

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.<\/p>\n

\n
\n
\n\n\n\n
01<\/code><\/td>\nPublic<\/code>\u00a0Class<\/code>\u00a0Form1<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
02<\/code><\/td>\n\u00a0<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
03<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>Private<\/code>\u00a0Sub<\/code>\u00a0Form1_Load(<\/code>ByVal<\/code>\u00a0sender\u00a0<\/code>As<\/code>Object<\/code>,\u00a0<\/code>ByVal<\/code>\u00a0e\u00a0<\/code>As<\/code>\u00a0System.EventArgs)\u00a0<\/code>Handles<\/code>Me<\/code>.Load<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
04<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>Dim<\/code>\u00a0I\u00a0<\/code>As<\/code>\u00a0Integer<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
05<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
06<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>'First Step<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
07<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>AxMSChart1.RowCount = 5\u00a0<\/code>'Specify count of rows to be 5<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
08<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>AxMSChart1.ColumnCount = 2\u00a0<\/code>'Specify count of graphs to be 2<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
09<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>'the loop<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
11<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>For<\/code>\u00a0I = 1\u00a0<\/code>To<\/code>\u00a0AxMSChart1.RowCount\u00a0<\/code>'Here it is dynamically and will work in all cases of values for AxMSChart1.Row<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
12<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
13<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>'Set that we want to edit the row \"I\"<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
14<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>AxMSChart1.Row = I<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
15<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
16<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>'Setting it's label to I<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
17<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>AxMSChart1.RowLabel = I<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
18<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
19<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>'Editing the first graph<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
20<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>AxMSChart1.Column = 1\u00a0<\/code>'Set that I want to edit the second graph<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
21<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>AxMSChart1.Data = I * 20<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
22<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
23<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>'Editing the second Graph<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
24<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>AxMSChart1.Column = 2\u00a0<\/code>'Set that I want to edit the second graph<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
25<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>AxMSChart1.Data = I * 15<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
26<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>Next<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
27<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
28<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
29<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>End<\/code>\u00a0Sub<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
30<\/code><\/td>\nEnd<\/code>\u00a0Class<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

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.<\/p>\n

Here is the result:
\n\"Attached<\/p>\n

This is the way to work with Graphics. Feel free to change .chartType and the other attributes to understand better graphics.
\nYou can also set your ShowLegend property to True and a legend will appear next to the graph.<\/p>\n","protected":false},"excerpt":{"rendered":"

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… <\/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-213","post","type-post","status-publish","format-standard","hentry","category-vb-net"],"_links":{"self":[{"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/posts\/213","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=213"}],"version-history":[{"count":0,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/posts\/213\/revisions"}],"wp:attachment":[{"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/media?parent=213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/categories?post=213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/tags?post=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}