Line Graphs

The line graphics rely on the Graphics.DrawLine method. The logic for calculating coordinates and widths is almost identical to that of the bar graph.

The following code is the complete method from the demonstration program that draws the line graph.

// This method draws the line graph.
private void DrawLineGraph(Graphics g)
{
	// Get the count into a local variable
	//   so that it's a little easier and the
	//   code is more readable.
	int nCount = m_DataSetToRender.Length;

	// Calculate the distance between data points.
	int nDataSeparation = (pnlDisplay.Size.Width / nCount);

	// The panel height is used to calculate the
	//   y coordinate for drawing.
	int nPanelHeight = pnlDisplay.Size.Height;

	// We'll use this as an offset into the panel
	//   since we want some space from the left margin.
	int nXOffset = nDataSeparation / 2;

	// Create the two pens we'll use. We don't want
	//   to create each one for every loop iteration
	//   since that will be a performance slow down.
	Pen objVerticalPen = new Pen(Color.Silver);
	Pen objLinePen = new Pen(Color.Magenta, 3);

	// Loop through the data.
	for (int i = 0; i < nCount; i++)
	{
		// Draw a vertical line so the user
		//   gets a more understandable graph.
		g.DrawLine(objVerticalPen, 
			i * nDataSeparation + nXOffset,
			nPanelHeight - m_DataSetToRender[i],
			i * nDataSeparation + nXOffset, nPanelHeight);

		// If this isn't the last data item,
		//   draw the connecting line to the next point.
		if( i < nCount-1 )
		{
			g.DrawLine(objLinePen,
                          i * nDataSeparation + nXOffset,
				nPanelHeight - m_DataSetToRender[i],
				(i + 1) * nDataSeparation + nXOffset,
				nPanelHeight - m_DataSetToRender[i+1]);
		}
	}
}

The following figure shows the demonstration program rendering a line graph.

Generating and Normalizing The Data

The data that the program uses is obtained in three different ways. The first method is to randomize twelve data items. The second is to allow the user to enter data and populate the rendering array from the user data. The third option is to use a predefined data set that's built into the program.

The data is normalized so that it fits onto the screen perfectly. For the bar and line graphics, it's scaled so that the largest data item is at the top of the display window. For the pie chart, the data is adjusted so that there is exactly 360 degrees of data.

Conclusion

There you have it—G DI+ data rendering in one easy lesson. There's almost no limit to what you can do. And it's not that hard.