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()