Article Options
Recently Viewed
Premium Sponsor
Premium Sponsor

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

Graphics Object and Bitmap
Next, we set up Graphics and Bitmap objects.   Put this initialising code in a separate procedure named GetGraphics:


Private Function GetGraphics() As Graphics
        '  Make bmap the same size and resolution as the PictureBox
        bmap = New Bitmap(PBBarChart.Width, PBBarChart.Height, PBBarChart.CreateGraphics)
        '   Assign the Bitmap object to the Graphics object
        '   and return it
        Return Graphics.FromImage(bmap)
    End Function


Vertical Axis
  If you have read the previous articles, you may notice that the various stages are now being broken up into smaller code chunks and put into separate procedures.

   The code for the vertical axis is now placed in its own procedure and remains largely unchanged from previous versions.  The first part looks like this:


Private Sub DrawVerticalAxis(ByVal g As Graphics)
'   Draw a line for the Vertical Axis.
        Dim StartPoint As New Point(LeftMargin, PBBarChart.Height - BaseMargin)
        Dim EndPoint As New Point(LeftMargin, TopMargin)
        '  Basic Pen
        Dim LinePen As New Pen(Color.Black, 2)
        '  Draw the vertical line (without tick marks)
        g.DrawLine(LinePen, StartPoint, EndPoint)

        '  Draw the Tickmarks and Display Numbers
        '   Calculate length of the vertical axis
        VertLineLength = PBBarChart.Height - (BaseMargin + TopMargin)

'  Identify the highest sales figure
        For Each gd As GraphData In SalesData
            If gd.Sales > HighSale Then HighSale = gd.Sales
        Next
' :  Scaled Tick Marks code follows


Scaled Tick Marks
   Here’s a change from the earlier article.    In Part 2,  we fixed the maximum number of sales at a figure of 1000.  Not very realistic, but helped to keep the code less complicated.    This time round we will adjust the maximum sales figure (and therefore the number and the spacing of tick marks) in accordance with whatever value is held in the HighSale variable above.

  This means that you can change the sales data to  allow a total sales value of more than 1000 at any time in the future and your graph won’t become distorted.

   To do this, we identify the highest sales figure, then round up until we get to the next round value of 100.  For example,  if the HighSale figure is 1675 then the maximum value on the scale will be set to 1700.

  Here is the code that does this:

' DrawVerticalAxis procedure continued:
     ' Round up to next hundred above highest sales figure
        Dim NextCent As Integer = CInt(HighSale)
        Do While NextCent Mod 100 <> 0
            NextCent += 1
        Loop

   '  Identify how many TickMarks required (one per hundred):
        Dim TotalTicks As Integer = CInt(NextCent / 100)

  Now we know how many hundreds we have to allow for, we can divide the vertical axis proportionately into 100s, draw the tick marks and the values as text, just as we did in Part 2:

' Calc gaps between vertical tick marks
        Dim YPos As Integer = CInt(VertLineLength / TotalTicks)
        '  Variables for Start and End Points of Tick Marks
        Dim TickSP As New Point(LeftMargin - 5, StartPoint.Y - YPos)
        Dim TickEP As New Point(LeftMargin, StartPoint.Y - YPos)
        '  Font for values  - declared here for readability
        Dim ValueFont As New Font("Arial", 8, FontStyle.Regular)

        For i As Integer = 1 To TotalTicks
            g.DrawLine(New Pen(Color.Black), TickSP, TickEP)   '  Tick mark
            '  Tick Values as text :
            g.DrawString(CStr(i * 100), ValueFont, Brushes.Black, 2, TickSP.Y - 5)
            '  Resetx, y positions, proportionately up vertical line
            TickSP.Y = CInt(TickSP.Y - (VertLineLength / TotalTicks))
            TickEP.Y -= CInt(VertLineLength / TotalTicks)
        Next
End Sub

 

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!
 
Comment #18  (Posted by Moon on 10/12/2008)
Rating
incentive for a company to grab control ,
 
Comment #19  (Posted by Zena Madara on 10/12/2008)
Rating
youtube is improving well, but i have little request: ,
 
Comment #20  (Posted by Andrew on 12/11/2008)
Rating
These articles are the best I have seen/read on this subject and I have been developing applications using VB for over 20 years. It takes me back to what my lecturer at University told us once - 'Keep it Simple and anything is possible!'
 
Comment #21  (Posted by Verynandus on 03/13/2009)
Rating
Thanks for your Tutorial
 
Comment #22  (Posted by on 10/11/2009)
Rating

 
Comment #23  (Posted by Some controversy exists regarding the dependence on 11/07/2009)
Rating
can take plavix woman can take plavix woman can take plavix woman . can take plavix woman can take plavix woman . can take plavix woman can take plavix woman . can take plavix woman buy online securely carisoprodol buy online securely carisoprodol . buy online securely carisoprodol buy online securely carisoprodol . buy online securely carisoprodol buy online securely carisoprodol . buy online securely carisoprodol buy online securely carisoprodol buy online securely carisoprodol . equivalent herbal ambien equivalent herbal ambien equivalent herbal ambien equivalent herbal ambien equivalent herbal ambien . equivalent herbal ambien equivalent herbal ambien equivalent herbal ambien equivalent herbal ambien equivalent herbal ambien .
 
Comment #24  (Posted by Ilopsav on 11/24/2009)
Rating
Cool site!: URLsWithNothing
 
Comment #25  (Posted by Bedloikv on 11/25/2009)
Rating
hi.. just droppin’ by your site.. it’s really cute… nice work!: URLsWithURL
 
Sponsored Links