Article Options
Premium Sponsor
Premium Sponsor

 »  Home  »  .NET Newbie  »  Chart Success Part 5 - Line Graph  »  Month Names
 »  Home  »  Windows Development  »  Graphics  »  Chart Success Part 5 - Line Graph  »  Month Names
Chart Success Part 5 - Line Graph
by Ged Mead | Published  06/06/2006 | .NET Newbie Graphics | Rating:
Month Names

Display The Months

    To be useful and usable we need to show the names of the months that the sales figures represent.   To do this we employ the DrawString method in the same way that we have done in previous articles.   That is, we "write" the text by drawing it with a brush.  It's an odd way of going about the task of writing to the human mind, but perfectly logical to a computer;  letters of the alphabet are after all just shapes - drawings that we happen to be able to translate in our heads into something meaningful.  

   First, we fix the start point for the first letter of the first word.   This is 18 pixels in from the left margin.   Then we create a Brush to draw with and also set out the details of the Font that we want to be used.

   '  Set the start point of the first string
        Dim TextStartX As Integer = CInt(LeftMargin + 18)

        '  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("Arial", 10, FontStyle.Regular)

   We're all set now and can go ahead and draw the month names.  Those names were stored in the Months array right at the start of this project, you may remember:

        For i As Integer = 0 To Months.Length - 1
            '  Draw the name of the month
            g.DrawString(Months(i), TextFont, TextBrsh, TextStartX, _
                CInt(PBLineChart.Height - (BaseMargin - 4)))
            '  Move start point for next name along to the right
            TextStartX += CInt(LineWidth)
        Next

   Now that we have finished with the Brush and the Font objects we should dispose of them as this is good housekeeping practice.   It's not critical in a tiny project like this one, but is a good habit to get into.

        TextBrsh.Dispose()
        TextFont.Dispose()

Display The Result

    As we did at the end of the previous pages, we can now display the results of our efforts.   However, as we are no longer working with a temporary display, we will create a small procedure that

  •  Displays the finished chart
  •  Disposes of the Graphics Object

   Here is the procedure:

       Private Sub FinalDisplay()
           PBLineChart.Image = bmap
           g.Dispose()
       End Sub

   And finally we can list the procedures we need to call in turn from the button click event:

    Private Sub btnDraw_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDraw.Click
        DrawOutline()
        DrawTheLine()
        ShowMonths()
        FinalDisplay()
    End Sub

 

 

   All done .... or are we?  

   The chart above is OK, but not much more than that.   How much better it would be if the joins at the line segments were more clearly marked.   And if there were grid lines in the body of the chart to make it easier to see the values on the vertical axis.   Shall we add these improvements to the chart?

   You bet!

 

 

 

Comments    Submit Comment

Comment #1  (Posted by an unknown user on 06/19/2006)
Rating
Thank you for this aricle, it was of great help to me. One question:
I am able to draw lines with the mouse on the graph and these must stay there, even after the graph is updated. How to go about?
Thanks!
 
Comment #2  (Posted by an unknown user on 06/19/2006)
Rating
Thank you for this aricle, it was of great help to me. One question:
I am able to draw lines with the mouse on the graph and these must stay there, even after the graph is updated. How to go about?
Thanks!
 
Comment #3  (Posted by Ged Mead on 06/19/2006)
Rating
Hi, You can continue in the same way by drawing your lines using DrawLine methods on the bitmap that is used and assigned to the PictureBox. If it is a single simple line you can update the bitmap on the mouse up event. If it is more complex you may need to use the DrawPath method again, saving the various mouse clicks along the way (it's fiddly but can be done).
There is a recent FAQ by Sp!ke on Persistence which you might also find of interest. You can read it here: http://www.vbcity.com/forums/faq.asp?fid=41&cat=Graphics&#TID128254
 
Comment #4  (Posted by Mike Brewster on 06/21/2006)
Rating
Thank Mr. Mead for a great tutorial. As a newbie to .NET, I am enjoying the difficulties from unlearning old school to learn new school stuff, such as this. ;-)

With that said, I may not fully understand some of your build notes. Are you in indicating that a class object be created called GraphicsPath with only the for interation in it?

Do you happen to have a ZIP build of this? I ask as the chart shows only a horizontal line at 1000 with the respective "points" as specified. I'm sure I'm missing something writing the code for DrawTheLine.

Any insight or comments is greatly appreciated. Thank you!
 
Comment #5  (Posted by an unknown user on 06/21/2006)
Rating
Hi Mike, Thanks for the feedback. I will upload a zipped sample solution by the end of the week, so you can see how the whole thing comes together.
 
Comment #6  (Posted by Ged Mead on 06/22/2006)
Rating
I have now uploaded a demo solution using VB.NET 2003. I hope this will help you to analyze the code in the article.
 
Comment #7  (Posted by Mike Brewster on 06/22/2006)
Rating
Thank Mr Mead! It is what I expected, I had the DrawTheLine coded incorrectly. I also notice your use of "try", though i didn't see it commented in the writing, is this strictly to catch the exception?. Also, if I wanted to have an additional line plotted, I assume referencing additional Sales arrays will do the trick. Again, thank you for a great tutorial!
 
Comment #8  (Posted by an unknown user on 06/27/2006)
Rating
high quality work, no shortcuts
 
Comment #9  (Posted by an unknown user on 06/30/2006)
Rating
Thanks Ged Meat for a wonderful Tutorial. I have one problem. When i am saving the chart. it not getting displayed. Can u suggest any solution for this

 
Comment #10  (Posted by Vimal Raj on 07/03/2006)
Rating
Wonderful Tutorial.When I am saving the graph in Jpeg,or any format the graph is not showing properly. In background fully its black. Can u help me out.
 
Comment #11  (Posted by Jimmie Missfeldt on 07/12/2006)
Rating
Great post. I had alot of help with it to draw my graph.

I translated all of it into C# though and came across a few problems with the VertScale on drawing the line.

I am still not quite sure from where in the translation the problem came but I got a flat line in the bottom of my graph. am using a hard size on the graph so I took the Scaling to Sales[1] * scaling (where scaling = 0.2) and it all came out good.

just a tip for you C# nerds out there who couldn't find any other graph tutorial ;)
 
Comment #12  (Posted by Bob Goh on 07/24/2006)
Rating
Excellent and well wriiten. Although my current job require me to build a complex time-distance diagram, after going through your article (1-5), it really equip me with some essential knowledges to kick start the develpoment. Thanks
 
Comment #13  (Posted by an unknown user on 08/01/2006)
Rating
Thank you!
 
Comment #14  (Posted by an unknown user on 09/29/2006)
Rating
excellent !!
 
Comment #15  (Posted by Cesar Parrales on 05/22/2007)
Rating
Mr. Mead. I having the problem that Mike say in his comment #5. You said in your comment #6 you uploaded a demo solution using VB.NET 2003.

My point is, haw can I get this solution?

I appreciate you help,

Thanks in advance.
 
Comment #16  (Posted by az on 05/31/2007)
Rating
Ok, however the chart lines fail to draw express edtion.
 
Comment #17  (Posted by an unknown user on 06/16/2007)
Rating
i am new in vb.net and this is very nicely created method for line grid

thanks
 
Comment #18  (Posted by an unknown user on 07/04/2007)
Rating
Very nice ! Thank You
 
Comment #19  (Posted by Julia Andrea Rodriguez Amaro on 07/28/2007)
Rating
Hello, I need to know where do you uploaded the sample for VB 2003. Thanks a lot!
 
Comment #20  (Posted by an unknown user on 10/05/2007)
Rating
Best C# tutorial, hands down! Please make more :)
 
Comment #21  (Posted by Nerea007 on 10/16/2007)
Rating
Thanks so much for the articles - I was struggling so much to find a good, comprehensive source for charts and graphics.

I'm having a little trouble with this section. My X-axis was not showing up and I was getting an error, so I changed 'PBBarChart' to 'PBLineChart' in these lines:

Dim StartPoint As New Point(LeftMargin, PBBarChart.Height - BaseMargin)

Dim VertLineLength As Integer = PBBarChart.Height - (BaseMargin + TopMargin)

g.DrawLine(LinePen, LeftMargin, PBBarChart.Height - BaseMargin, _
PBBarChart.Width - RightMargin, PBBarChart.Height - BaseMargin)

And the X-axis appeared just like in your screen shot, but then I went to make the procedure DrawTheLine() and it just didn't work - I got a blue horizontal line at the 1000 mark.

Could you give me any pointers as to where I'm going wrong? There was some mention in the comments about a zip file of the code - maybe you can refer me to the link and I can compare what I have written to see where my mistake is.

Thanks!
 
Comment #22  (Posted by Ged Mead on 10/16/2007)
Rating
Hi, If you navigate to the final page of the article and then page down to the bottom you will see there a link to a zip file named Chart5.zip. This is the downloadable sample. (It is placed between the "Related Articles" section and the start of the Comments.)

 
Comment #23  (Posted by an unknown user on 02/11/2008)
Rating
Very, very helpful article. I'm trying to create graphical statistics for a call management package, the next step is to connect to a SQL server table for input. Thanks for the tutorial!
 
Comment #24  (Posted by an unknown user on 03/25/2008)
Rating
Great tutorial ... thousands of thanks cast to u ... =)
 
Comment #25  (Posted by kishore on 04/10/2008)
Rating
Excellent work. How can i show value of the sales near the elliptical region. Any solution is apreciable

thnx
 
Sponsored Links