Article Options
Premium Sponsor
Premium Sponsor

 »  Home  »  .NET Newbie  »  Chart Success: Second Helpings of Pie. Part 3  »  Creating the Chart
 »  Home  »  Windows Development  »  Graphics  »  Chart Success: Second Helpings of Pie. Part 3  »  Creating the Chart
Chart Success: Second Helpings of Pie. Part 3
by Ged Mead | Published  03/23/2005 | .NET Newbie Graphics | Rating:
Creating the Chart

Create the Chart

Draw the Chart

The Button to draw or redraw the chart is of course this one:

I have named it btnDraw, but the name isn't critical.
If you are not using the Skeleton solution, then don't forget to add a Panel control to your own project and name it pnlChart. In the screenshot shown at the start of this article, the panel is the white area at the right hand side of the form.

Invalidate
In order for the chart to be drawn or redrawn in the panel when the user clicks that button we need to write code that will carry out that action. This is refreshingly easy and the Invalidate method may soon become your new best friend.

  • Invalidate forces a control to be redrawn;
  • The redrawing calls the control's Paint method.
  • Put appropriate code in the control's Paint method and,
  • Hey presto, we create the chart with the data available so far.

The Invalidate method in the button's click event won't detain us long:-

    Private Sub btnDisplay_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDraw.Click
    pnlChart.Invalidate()
    End Sub

Paint the Panel
So, that just leaves the " engine" in the Panel's paint event which does the final drawing: I will only go into detail where the code or the logic is different from our earlier projects.
We met the Graphics object, SmoothingMode Property and Brush previously:

Private Sub pnlChart_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles pnlChart.Paint
  Dim g As Graphics = e.Graphics
  g.SmoothingMode = SmoothingMode.HighQuality
  Dim PattBrush As Brush

We don't want to make the mistake of trying to draw a chart with no data. So the next line tests that there is at least one completed element in the arraylist before the action is allowed to continue. Where data does exist, we can go ahead and start to process it: (This is the same code we used in Part 1, so I won't go though it in detail again.)

  If UserData.Count > 0 Then
  ' Create Rectangle to contain the Pie Chart
  Dim rect As Rectangle = New Rectangle(20, 10, 200, 200)
  ' Calculate the grand total
  Dim TotalCount As Single
  For Each gd As GraphData In UserData
  TotalCount += gd.Amount
  Next
  ' Create variables to hold the changing values of Angles
  Dim StartAngle As Single = 0
  Dim SweepAngle As Single = 0

The next block of code is much the same as that used in Part 1. The key difference being the nature of the Brush object .

We create a new HatchBrush and assign it the selected pattern and forecolor. I've gone for White as the backcolor in all cases. However, feel free to change this to a color of your choice or - if you're feeling adventurous - adding a further choice for the user, the HatchStyle Backcolor.

  ' Draw the Chart
  For Each gd As GraphData In UserData
   SweepAngle = 360 * gd.amount / TotalCount
   PattBrush = New HatchBrush(gd.Pattern, gd.clr, Color.White)
   g.FillPie(PattBrush, rect, StartAngle, SweepAngle)
   ' Optional: Draw lines round the segments:-
   g.DrawPie(New Pen(Color.Black), rect, StartAngle, SweepAngle)
   StartAngle += SweepAngle
  Next

The Key
Creating the key is a repeat of Part 1's code, except that I replaced the circular bullets with square ones. No particular reason: Just because I could.

  ' Create a Brush to draw the text
  Dim TextBrsh As Brush = New SolidBrush(Color.Black)
  ' Create a Font object instance for text display
  Dim TextFont As New Font("Verdana", 9, FontStyle.Bold)
  ' Draw the Bullets and the Company info
  Dim pxFromTop As Integer = 235
  ' Draw the Header text
  g.DrawString("Chart Key", TextFont, TextBrsh, 35, pxFromTop)
  For Each gd As GraphData In UserData
   ' Increase gap from Top
   pxFromTop += 20
   ' Draw bullet
   PattBrush = New HatchBrush(gd.Pattern, gd.clr, Color.White)
   g.FillRectangle(PattBrush, 20, pxFromTop, 15, 15)
   ' Draw line round bullet.
   g.DrawRectangle(New Pen(Color.Black), 20, pxFromTop, 15, 15)
   ' Draw the text - color coded
   g.DrawString(gd.name & " (" & gd.Amount & ")", TextFont, TextBrsh, 60, pxFromTop)
  Next

Final housekeeping
Finally, dispose of disposable objects that are no longer in use:

  TextBrsh.Dispose()
  TextFont.Dispose()
  PattBrush.Dispose()

Sponsored Links