Drawing a Line Chart

Charts are useful for representing numeric data in a graphical way. There are several different types of charts, including pie, line, and bar charts. In this section we will learn how to use GDI+ and ASP.NET to draw a line chart from data entered by a user.

A line chart is a set of continuous lines. In the example presented in this section, we will read the size of the chart and data points and draw a chart based on the points. Our discussion will focus first on the ChartComp component, and then on the client application.

12.5.1 The ChartComp Component

ChartComp is a class that defines the functionality to add points to the chart and draw the chart. The client application (discussed in Section 12.5.2) is a Web application that calls the chart's members to add points to the chart and draw it.

The code for the ChartComp class is given in Listing 12.8. The constructor of the class takes the type, color, size, and a page to which this chart belongs. The overloaded InsertPoint method adds a point to the array of points, and the DrawChart method draws the points stored in the array. DrawChart first draws a rectangle, and then it draws points toward the x- and y-axes.

Listing 12.8 The ChartComp class

// Chart component
class ChartComp
 public Bitmap curBitmap;
 public ArrayList ptsArrayList =
 new ArrayList();
 public float X0 = 0, Y0 = 0;
 public float chartX, chartY;
 public Color chartColor = Color.Gray;
 // chartType: 1=Line, 2=Pie, 3=Bar.
 // For future use only.
 public int chartType = 1;
 private int Width, Height;
 private Graphics g;
 private Page curPage;
 struct ptStructure
 public float x;
 public float y;
 public Color clr;
 // ChartComp constructor
 public ChartComp(int cType, Color cColor,
 int cWidth, int cHeight, Page cPage)
 Width = cWidth;
 Height = cHeight;
 chartX = cWidth;
 chartY = cHeight;
 curPage = cPage;
 chartType = cType;
 chartColor = cColor;
 curBitmap = new Bitmap(Width, Height);
 g = Graphics.FromImage(curBitmap);
 // Destructor. Disposes of objects.
 // InsertPoint method. Adds a point
 // to the array.
 public void InsertPoint(int xPos,
 int yPos, Color clr)
 ptStructure pt;
 pt.x = xPos;
 pt.y = yPos;
 pt.clr = clr;
 // Add the point to the array
 public void InsertPoint(int position,
 int xPos, int yPos, Color clr)
 ptStructure pt;
 pt.x = xPos;
 pt.y = yPos;
 pt.clr = clr;
 // Add the point to the array
 ptsArrayList.Insert(position, pt);
 // Draw methods
 public void DrawChart()
 int i;
 float x, y, x0, y0;
 g.SmoothingMode = SmoothingMode.HighQuality;
 g.FillRectangle(new SolidBrush(chartColor),
 0, 0, Width, Height);
 int chWidth = Width-80;
 int chHeight = Height-80;
 40, 40, chWidth, chHeight);
 g.DrawString("GDI+ Chart", new Font("arial",14),
 Brushes.Black, Width/3, 10);
 // Draw x- and y-axis line, points, positions
 for(i=0; i<=5; i++)
 x = 40+(i*chWidth)/5;
 y = chHeight+40;
 string str = (X0 + (chartX*i/5)).ToString();
 g.DrawString(str, new Font("Verdana",10),
 Brushes.Blue, x-4, y+10);
 g.DrawLine(Pens.Black, x, y+2, x, y-2);
 for(i=0; i<=5; i++)
 x = 40;
 y = chHeight+40-(i*chHeight/5);
 string str = (Y0 + (chartY*i/5)).ToString();
 g.DrawString(str, new Font("Verdana",10),
 Brushes.Blue, 5, y-6);
 g.DrawLine(Pens.Black, x+2, y, x-2, y);
 // Transform coordinates so that point (0,0)
 // is in the lower left corner
 g.TranslateTransform(-40, 40);
 g.ScaleTransform(-1, 1);
 g.TranslateTransform(0, -(Height));
 // Draw all points from the array
 ptStructure prevPoint = new ptStructure();
 foreach(ptStructure pt in ptsArrayList)
 x0 = chWidth*(prevPoint.x-X0)/chartX;
 y0 = chHeight*(prevPoint.y-Y0)/chartY;
 x = chWidth*(pt.x-X0)/chartX;
 y = chHeight*(pt.y-Y0)/chartY;
 g.DrawLine(Pens.Black, x0, y0, x, y);
 g.FillEllipse(new SolidBrush(pt.clr),
 x0-5, y0-5, 10, 10);
 g.FillEllipse(new SolidBrush(pt.clr),
 x-5, y-5, 10, 10);
 prevPoint = pt;

12.5.2 The Client Application

The client application is a Web page that is used to get input from the user. The main form of the application is shown in Figure 12.14. The user can enter his/her chart size, and values for five points, including the color of each one.

Figure 12.14. Entering points on a chart


The Draw Chart button draws a line chart. Code for the Draw Chart button click is given in Listing 12.9, where we create an object of type ChartComp and call its InsertPoint and DrawChart methods. InsertPoint adds a point to the chart. DrawChart draws a line chart from the first point to the last point entered by the user.

Listing 12.9 The Draw Chart button click event handler

private void Button1_Click(object sender,
 System.EventArgs e)
 // Get the chart background color
 Color clr = Color.FromName(TextBox3.Text);
 // Create a ChartComp object
 ChartComp chart =
 new ChartComp(1, clr, 400, 300, this.Page);
 chart.X0 = 0;
 chart.Y0= 0;
 chart.chartX = Convert.ToInt16(TextBox1.Text);
 chart.chartY = Convert.ToInt16(TextBox2.Text);
 // Add points to the chart
 Color.FromName(TextBox6.Text) );
 Color.FromName(TextBox9.Text) );
 Color.FromName(TextBox12.Text) );
 Color.FromName(TextBox15.Text) );
 Color.FromName(TextBox18.Text) );
 // Draw chart

Now if you use the data entered in Figure 12.14 and click the Draw Chart button, the output will look like Figure 12.15.

Figure 12.15. A line chart in ASP.NET


GDI+: The Next-Generation Graphics Interface

Your First GDI+ Application

The Graphics Class

Working with Brushes and Pens

Colors, Fonts, and Text

Rectangles and Regions

Working with Images

Advanced Imaging

Advanced 2D Graphics



Developing GDI+ Web Applications

GDI+ Best Practices and Performance Techniques

GDI Interoperability

Miscellaneous GDI+ Examples

Appendix A. Exception Handling in .NET

GDI+ Programming with C#
GDI+ Programming with C#
ISBN: 073561265X
Year: 2003
Pages: 145

Flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net