Kamis, 16 Desember 2010

Creating Graph with VB.NET

On this post, you will learn how to create a basic chart on Windows Form Application with VB.NET. I use Microsoft Visual Studio 2005 as IDE.



  1. Install the requirement software as stated on the Requirement section.
  2. Open Microsoft Visual Studio 2005. Create a new VB.NET’s Windows Application. Type the name of the project as “SampleBasicChart“.
    Create Windows Application's Project
  3. On Toolbox window, drag a Chart control from the Data category to the Windows Form.
    A Chart Control
    Note: If you does not see the Chart control in the Toolbox, you need to perform these steps below:
    • Right-click on the Toolbox window and select Choose Items.
      Add New Item to Toolbox
    • On Choose Toolbox Items, click Browse.
      Browse the Component
    • Browse to the location where you have installed Microsoft Chart Controls. The default location is
      C:\Program Files\Microsoft Chart Controls\Assemblies and select System.Windows.Forms.DataVisualization.dll. Then, click Open.
    • You see Chart control has been added to .NET Framework Components. Verify that its check box is checked and click OK.
      Chat Control Component
  4. On Chart Properties, you see an empty chart with a default series, “Series1“. Next, I’m going to add another Series. On Chart Properties, click the Series collection. Then, click the ellipsis button.
    Chart Properties
  5. On Series Collection Editor, click Add. You will see “Series2” has been added to the collection.
    Series Collection Editor
  6. Now you have two series on a chart. But there is not any data on the chart so I will add some example data point on each series. Select Series1 and click the ellipsis button on Points collection.
  7. On Series Collection Editor, select “Series1” in the Members area and click the Points collection property. Then, click the ellipsis button.
    Add Data Points
  8. On DataPoint Collection Editor, click Add and assign a value “10” to the YValues property in the newly created DataPoint object.
    Set YValues on DataPoint
  9. Repeat step 8 to add two more DataPoint object with values “20” and “30” repectively. Then, click OK to close the DataPoint Collection Editor window.
    Note: These values are example values, you may use any value as you want.
  10. Repeat step 7-9 again on “Series2” with YValues as you want. Then, click OK to close the Series Collection Editor windows.
  11. Run the project. You see the chart with two series as you created.

  12. A Basic Chart

    Sample chart

    The sample chart that I use on this post has a series “Series1” which has 3 data points “10,20,30“.
    Sample chart
    Back to top

    Change chart type

    There are many chart types that you can select for Chart control. On this example, I show some of those chart types which are Point, Line, Bar, Pie.
  13. On Chart Properties, click the Series collection. Then, click the ellipsis button.
    Chart Properties
  14. On Series Collection Editor, select “Series1” in the Members area and change the Chart type property to Point.
    Change Chart Type
  15. The Point chart type.
    Point Chart
  16. The Line chart type.
    Line Chart
  17. The Bar chart type.
    Bar Chart
  18. The Pie chart type.
    Pie Chart
Back to top

Change Color style of chart

There are many color palettes that you can choose for Chart control. This section shows how to change color of Chart control.
  1. On Chart Properties, click on Palette property. You see a drop down button. Click on it and you can choose a color palette for your chart.
    Change Color Palette
  2. The example below is Bright color palette.
    Sample Chart
Back to top

Insert title to chart

This section shows how to insert title to Chart control.
  1. On Chart Properties, click the Title collection. Then, click the ellipsis button.
    Chart Properties
  2. On Title Collection Editor, click Add and set (Text) to “My Sample Chart” in the newly created Title object.
    Add Title
  3. Run the project. You will see a title on top of the chart.
    Sample Chart with title
  4. You can customize title’s text style, title position, title color on title properties.
    Title Properties
Back to top

3D chart

This section shows how to use three-dimensional (3D) chart areas in Chart control.
  1. On Chart Properties, click the ChartAreas collection. Then, click the ellipsis button.
    Open ChartArea Collection Editor
  2. On ChartArea Collection Editor, select “ChartArea1“. Expand Area3DStyle and change (Enable3D) to True.
    Note: You can customize your 3D Style on this Area3DStyle properties .
    Enable 3D Chart
  3. You see the chart is now 3D.
    Sample 3D Chart
  1. Step-by-step

  2. Create a new Windows Application project on VB.NET and type name as “SampleDataBindChart“.
    Create New VB.NET's Windows Application
  3. On Form1, open code window and import these libraries. The first two libraries are used for SQL. The last one is used for Chart.
    Imports System.Data
    Imports System.Data.SqlClient
    Imports System.Windows.Forms.DataVisualization.Charting
    Import Required Libraries
  4. Type code below on Form1_Load().
    Dim strConn As String = "Data Source=BKKSQL001\INSTANCE01;" & _
                "Initial Catalog=Northwind;Integrated Security=True"
            Dim conn As New SqlConnection(strConn)
            Dim sqlProducts As String = "SELECT Top 8 ProductName, UnitsInStock FROM Products"
            Dim da As New SqlDataAdapter(sqlProducts, conn)
            Dim ds As New DataSet()
            da.Fill(ds, "Products")
            Dim ChartArea1 As ChartArea = New ChartArea()
            Dim Legend1 As Legend = New Legend()
            Dim Series1 As Series = New Series()
            Dim Chart1 = New Chart()
            ChartArea1.Name = "ChartArea1"
            Legend1.Name = "Legend1"
            Chart1.Location = New System.Drawing.Point(13, 13)
            Chart1.Name = "Chart1"
            Series1.ChartArea = "ChartArea1"
            Series1.Legend = "Legend1"
            Series1.Name = "Series1"
            Chart1.Size = New System.Drawing.Size(800, 400)
            Chart1.TabIndex = 0
            Chart1.Text = "Chart1"
            Chart1.Series("Series1").XValueMember = "ProductName"
            Chart1.Series("Series1").YValueMembers = "UnitsInStock"
            Chart1.DataSource = ds.Tables("Products")
    Code Explanation:
    • Line 1-2: Define a connection string to connect to a database on SQL Server.
      • Data Source is a SQL Server name.
      • Initial Catalog is a database name.
      • Set Integrated Security=True to use the current user as identity to access the SQL Server database.
    • Line 4: Create a SqlConnection’s object.
    • Line 6: Define SQL query string.
    • Line 7-9: Execute the query and populate result to DataSet’s object.
    • Line 11-14: Create Chart’s objects.
    • Line 15: Add Chart’s object to the form.
    • Line 17-29: Set Chart’s properties (ChartArea, Legend and Series).
    • Line 31-32: Bind column “ProductName” to X-axis and column “UnitsInStock” to Y-axis on the “Series1” Chart.
    • Line 34: Set Chart’s data source to the DataTable in the DataSet’s object.
    Form1_Load's code
  5. Run the project. You see a chart displaying “Product Name” on X-axis and “Unit in Stock” on Y-axis which data is gathered from Northwind database on SQL Server.
    A chart binding to Database on SQL Server

Tidak ada komentar:

Posting Komentar