GDI+ Pie Chart in VB.NET

In this article I will explain about Drawing a Pie Chart in GDI+.
  • 4100

Let's look at one more real-world application. In this example we will develop an application that draws pie charts based on a data feed. Pie charts are useful when you need to represent statistical data in a graphical way, for example, the percentage of users visiting a Web site from different countries, or the percentage grades in different subjects. In our example we will use the DrawPie and FillPie methods.

Figure-3_43.jpg

FIGURE 3.43: A pie chart-drawing application

First we create a Windows application and add four buttons, a text box, and a list box control. We change the text and name of the text box, and our final form looks like figure 3.43. In the Enter Share text box we will enter a number to represent the share of total items. For example, ass five values in the share box: 10, 20, 30, 40, and 50. The total is 150. The percentage of the share with value 10 is 10/150.

Listing 3.38 adds variable. You may notice the structure sliceData, which has two public variables: share and clr. The share variable represents the share of a slice, and clr is its color.

LISTING 3.38: The sliceData structure

    'User-defined variables
    Private rect As New Rectangle(250, 150, 200, 200)
    Public sliceList As New ArrayList()
    Structure sliceData
    
Public share As Integer
    Public clr As Color
    
End Structure
    Private curClr As Color = Color.Black
    
Private shareTotal As Integer = 0


The Select Color button allows us to select the color for a share. As Listing 3.39 shows, we use ColorDialog to select a color.

Listing 3.39: Selecting a color

    Private Sub ColorBtn_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Dim clrDlg As New ColorDialog()
    If clrDlg.ShowDialog() = DialogResult.OK Then
    curClr = clrDlg.Color
    
End If
    End Sub


The Add Slice button adds the data to an array to be added to the list for calculation. As Listing 3.40 shows, all data is added to an array. This code also adds the entered data to the ListBox control.

LISTING 3.40: Adding pie chart data

    Private Sub button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim slice As Integer = Convert.ToInt32(textBox1.Text)
        shareTotal += slice
        Dim dt As sliceData
        dt.clr = curClr
        dt.share = slice
        sliceList.Add(dt)
        listBox1.Items.Add(("Share:" & slice.ToString() & " , ") + curClr.ToString())
    End Sub

The Draw Chart and Fill Chart button clicks are used to draw the outer boundary and fill the chart, respectively. These buttons calls the DrawPieChart method with a Boolean variable, as shown in Listing 3.41.

LISTING 3.41: The Draw Pie and Fill Pie button click handlers

    Private Sub DrawPie_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    DrawPiechart(False)
    End Sub
    Private Sub FillChart_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    DrawPieChart(
True)
  
 End Sub


The DrawPieChart method actually draws the pie chart, as shown in Listing 3.42. Depending on which button-Fill Chart or Draw Chart was clicked, we call FillPie or DrawPie, respectively. We also read each sliceData variable of the array and calculate the percentage of a share in the entire chart, represented by an angle.

Figure-3_44.jpg

FIGURE 3.44: The Draw Chart button click in action

LISTING 3.42: The DrawPieChart method

    Private Sub DrawPieChart(ByVal flMode As Boolean)
        Dim g As Graphics = Me.CreateGraphics()
        g.Clear(Me.BackColor)
        Dim rect As New Rectangle(250, 150, 200, 200)
        Dim angle As Single = 0
        Dim sweep As Single = 0 
        For Each dt As sliceData In sliceList 
        sweep = 360.0F * dt.share / shareTotal
        
If flMode Then
        g.FillPie(
New SolidBrush(dt.clr), rect, angle, sweep)
        Else
        g.DrawPie(
New Pen(dt.clr), rect, angle, sweep)
        
End If
        angle += sweep 
        Next
        g.Dispose()
    
   End Sub

Figure-3_45.jpg

FIGURE 3.45: The Fill Chart button click in action

Let's see this application in action. We add shares 10,20,30,40 and 50 with different colors. The Draw Chart button click draws a pie chart, with the output shown in figure 3.44.

The Fill Chart button fills the chart, with the output shown in Figure 3.45.


Conclusion

Hope the article would have helped you in understanding t
he GDI+Painter Application. Read other articles on GDI+ on the website.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.