Article Options
Premium Sponsor
Premium Sponsor

 »  Home  »  .NET Framework  »  Chart Success : GDI+ Graphics At Work Part 4  »  Draw The Horizontals
 »  Home  »  Windows Development  »  Graphics  »  Chart Success : GDI+ Graphics At Work Part 4  »  Draw The Horizontals
Chart Success : GDI+ Graphics At Work Part 4
by Ged Mead | Published  05/10/2005 | .NET Framework Graphics | Rating:
Draw The Horizontals

  Baseline (The X Axis)
   You can include a horizontal axis if you like the look of it.    Create a new procedure named Draw3DBars.


Private Sub Draw3DBars()
        g.DrawLine(New Pen(Color.Black), LeftMargin, PBBarChart.Height - BaseMargin, _
             PBBarChart.Width - RightMargin, PBBarChart.Height - BaseMargin)
        '  Calculate length of baseline drawn by the code above
BaseLineLength = pbBarChart.Width - (LeftMargin + RightMargin)

'  More code to follow

3D Bars
  
    I came across a C# method for building up bars with a 3D effect on codeproject.com.  The author,  Michael Damron, had used the simple but effective idea of building a series of  polygons one above the other. 

 Topping the bar off with a lighter coloured polygon completes the effect.     So I’ve re-jigged his original basic idea for this project.

 Here’s the way I’ve gone about it:   The first few code items deal with some of the core calculations required.   For example, we can calculate the optimum width of each bar by using the total width available and dividing it by the number of bars; not forgetting to take into account the required gaps between each bar.

   Most of these are the same as were used in Part 2:

' Calculate width of each bar making full use of space available
BarWidth = CInt((BaseLineLength / SalesData.Count) - BarGap)            '  Set the start point for the first bar
  Dim BarStartX As Integer = LeftMargin + BarGap
            '  Set the baseline of the graph
            Dim BaseLine As Integer = PBBarChart.Height - BaseMargin
 '  Calc scaling  (new in this project)
            VertScale = VertLineLength / HighSale

   '  : More code to follow

 - the only new item being the VertScale variable, which is used to ensure that the bars are drawn to the correct height, allowing for the scaling we applied in the DrawVerticalAxis procedure earlier.
  This procedure continues with the following block of code which draws each of the bars in turn.   I have added quite a lot of commenting and (especially if you have read any of the previous articles) it should all make sense to you.


  For Each gd As GraphData In SalesData
 '  Set the positions of the four points of the bottom-most
 '  parallelogram and store in an array
    Dim Corners(3) As Point
     Corners(0) = New Point(BarStartX, BaseLine - 10)
     Corners(1) = New Point(BarStartX + BarWidth - 5, BaseLine - 10)
     Corners(2) = New Point(BarStartX + BarWidth, BaseLine)
     Corners(3) = New Point(BarStartX + 5, BaseLine)

'  Calculate the height of this bar, taking scale into account:
      Dim BarHeight As Integer = CInt(gd.Sales * VertScale)

'  Create brushes to draw the bars
'  Colors will change according to settings in GraphData
    Dim barmainBrush As New HatchBrush(HatchStyle.Percent50, gd.BarColor)
    Dim bartopBrush As New SolidBrush(gd.BarColor)

 '  Draw one complete bar
     For i As Integer = 0 To BarHeight - 11
‘  (“BarHeight - 11” might be confusing.   This makes allowance for
‘  a.   the 10 pixels which are added to create the 3D depth effect
‘  plus
‘  b.  the final rhombus is to be drawn in a lighter color, so we
‘  need to stop drawing these hatched ones 1 pixel below the
‘  total bar height.

 '  Fill next polygon using the hatchbrush
      g.FillPolygon(barmainBrush, Corners)
 '  Move  all the Y positions up the picture box by 1 pixel
      Corners(0).Y -= 1
      Corners(1).Y -= 1
      Corners(2).Y -= 1
      Corners(3).Y -= 1
     Next
  '  Finally, top it off with a lighter rhombus
      g.FillPolygon(bartopBrush, Corners)

  '  Move the startpoint for the next bar
       BarStartX += CInt(BarWidth + BarGap)

‘   Dispose of brushes
       barmainBrush.Dispose()
       bartopBrush.Dispose()
  Next
End Sub


  (If you want to test the above procedure, don't forget to add a call to it in the btnDraw_Click event. )

Comments    Submit Comment

Comment #1  (Posted by an unknown user on 05/13/2005)
Rating
Great article, Ged. Thanks for your efforts.
 
Comment #2  (Posted by betrl8thanever on 05/24/2005)
Rating
Excellent work Ged. Very impressive.
 
Comment #3  (Posted by Chris on 07/11/2005)
Rating
This article was great. However in the procedure DrawVerticalAxis, you are declaring VertLineLength as local. VertLineLength was previously declared global in the form. Because of the local declaration the Vertical Line Length is reset back to zero after the procedure call and all the 3d bars display a vertical reading of zero. I removed Dim VertLineLength As Integer = PBBarChart.Height - (BaseMargin + TopMarg and set VertLineLength = PBBarChart.Height - (BaseMargin + TopMargin). The 3d bars now display correctly.

 
Comment #4  (Posted by XTab on 07/11/2005)
Rating
Chris, Many thanks for spotting that error in the article. I have now corrected it. Ged Mead.
 
Comment #5  (Posted by an unknown user on 08/15/2005)
Rating
Looking forward to line charts!
 
Comment #6  (Posted by an unknown user on 12/29/2005)
Rating
Ged, great work done.
I have a problem related to pie chart. I am implementing image mapping on pie chart to do this I need to find out points arrary of a pie piece, after calling FillPie i am unable to get the coordinates of that pie piece. Plese post the way of getting it's coordinates. You can contect me on gupta.mk@rediffmail.com.I will be greatful to you for any help.
 
Comment #7  (Posted by an unknown user on 01/16/2006)
Rating
Best I have seen! Because I understand all, also with my bad English knowledge.
I tried it -> AND IT WORKS!!
 
Comment #8  (Posted by an unknown user on 03/06/2006)
Rating
Someone finally led us through a complete, basic app. Thanks
 
Comment #9  (Posted by an unknown user on 03/10/2006)
Rating
It's Great article
 
Comment #10  (Posted by an unknown user on 05/09/2006)
Rating
This helps a lot. Thanks
 
Comment #11  (Posted by an unknown user on 06/17/2007)
Rating
Thanks. this is the best i have learned.
 
Comment #12  (Posted by an unknown user on 06/17/2007)
Rating
hello sir
great work I am new in vb.net and for me it's take bit time to understand but your method is easy to understand but i have only one problem with draw horizontal lines it's draws one line but i cna't see other nine lines, I know it's my mistake but i could't find it, i have debuge the program but
this two are remains same all the time LineStart.Y -= VertGap LineEnd.Y -= VertGap , so i dont't know that it's wright and second thing about months, it's displays the months but all the name's of months displays on top of eachother so again there is my mistake but i could't find it so sir can you please help me with this
my e-mail is (bigbapu@hotmail.co.uk)
waiting for your kind rep.

have a nice time
 
Comment #13  (Posted by an unknown user on 12/28/2007)
Rating
Dear Sir Your lessons are more helpful. I'm a newbie VB users and I have a question: your Sub works properly whith positive values but if I put negative data in the Sales Data array they are set to zero.
How can I modifie your graphics for visualize negative values?
 
Comment #14  (Posted by Ged Mead on 12/28/2007)
Rating
Hi, Although I haven't tried this with negative values, the approach you will need to use is to readjust the axis so that instead of the base line being fixed at zero, which it is now, you physically move it up the vertical axis. This will allow negative values to "begin" (i.e. to start to be drawn) from the relevant point below the horizontal axis. Hope this helps. If I have time over the holiday I will try and create an additional demo to show this being done.
 
Comment #15  (Posted by an unknown user on 06/06/2008)
Rating
The best and most useful article I have ever read..A true blessing. THANK YOU VERY MUCH!!!
 
Comment #16  (Posted by an unknown user on 06/06/2008)
Rating
The best and most useful article I have ever read..A true blessing. THANK YOU VERY MUCH!!!
 
Comment #17  (Posted by an unknown user on 06/14/2008)
Rating
very useful article!
 
Sponsored Links