- Creating Line Charts, Page 6

       by kirupa  |  23 September 2006In the previous page, you learned how the code normalizes and draws things on the screen. In this, the last page, I'll wrap up the tutorial by covering how the border lines are drawn and the final image is output. If you look at the chart, you will see that it contains border lines that clearly separate the chart from the rest of the drawing area. Notice that the code for drawing the border lines is not contained inside the for loop. It only needs to be drawn once, it is outside of the loop. //Draw Border Lines Pen borderLine = new Pen(Color.DarkGray, 2);   //Left Border gfx.DrawLine(borderLine, new Point(leftOffset, chartHeight), new Point(leftOffset, topOffset));   //Bottom Border gfx.DrawLine(borderLine, new Point(leftOffset, chartHeight), new Point(chartWidth, chartHeight));   //Right Border gfx.DrawLine(borderLine, new Point(chartWidth, chartHeight), new Point(chartWidth, topOffset));   //Top Border gfx.DrawLine(borderLine, new Point(leftOffset, topOffset), new Point(chartWidth, topOffset)); The DrawLine method takes three arguments in this case. The first argument is a Pen object that defines both the color and thickness of the line. The second and third arguments are our familiar Point values that each take an x and y integer value. Notice that the arguments passed into Point correspond to the edges as defined earlier in the following image: I started off the code explanation by describing how you would setup your image's bitmap and graphics variables. We go full circle now and have reached the point where we close the image and set its output properties. The code for outputting the final result as an image is as follows: //Finalizing and Cleaning Up Response.ContentType = "image/jpeg"; bmp.Save(Response.OutputStream, ImageFormat.Jpeg); bmp.Dispose(); gfx.Dispose(); Response.End(); Notice I set the content type as "image/jpeg" to ensure the output is set to the JPEG format. An image is created on the fly each time your aspx page is accessed, so if you were to place your aspx page between img tags in HTML, you will see the image produced by your code. I hope this article gave you a brief understanding of not only how to approach designing a chart, but also how to draw in Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out! When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles. Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.  

This is a companion discussion topic for the original entry at