Creating Simple Charts and Graphs

Welcome to the next installment of the .NET Nuts & Bolts. In this column, we'll focus on creating simple charts and graphs using the Microsoft .NET Framework. This will involve using classes in the System.Drawing namespace.

Why Create Dynamic Charts and Graphs?

Charts and/or graphs can be very useful in both Windows-based and Web-based applications for pictorially displaying information and statistics. There are tools such as Crystal Reports that can be used to generate reports. There also area number of charting tools such as Chart FX, Dundas Chart, and TeeChart that will allow you to create robust charts and graphs for display within your applications. However, it isn't always feasible to purchase licenses for these tools, especially if the application is relatively simple or is constrained by a low budget. Lucky for those with a shoe string budget, the Microsoft .NET Framework includes the classes in the System.Drawing namespace.

How Do I Dynamically Create a Chart or Graph?

Creating a chart or graph using the Microsoft .NET Framework is easier than one might expect. The degree of difficulty of the chart is based on the complexity of the information you are trying to display and the shape you are trying to use to display it. The basic steps of creating a chart or graph are as follows:

Create a new image in the desired format.

Draw the desired shape using the drawing classes in the System.Drawing namespace.

Save the image to a stream (memory, file, and so forth) so that it can be used.

Creating a Pie Chart Sample Code

The following sample class demonstrates how to create a dynamic image that contains a pie chart. It takes the background color, width, height, and an array of decimal values as the input. The PieChart object sums up the values and draws the pie chart for each value as a percent of the total. Each section of the chart will be drawn in one of the ten colors that have been set up.

Using Charts in a Web Application

In the example above, we saw how to dynamically create an image that contains a pie chart based on our data. It is nice to have a chart as long as you can actually use it in an application.

Chart Generator Sample Web Page

The following sample code contains a Web page that can be used to generate dynamic charts or graphs. The page uses query string values to indicate what type of chart is to be constructed and contain data points for rendering the chart. The page sets the content type to image to ensure the result is treated as an image.

Chart Generator Sample Web Page

Using the Web page in the above example, we now have a Web page that will return an image when accessed. We will use this within a Web application to display the chart. The following code contains the code behind of a sample page that has an image control. We set the ImageUrl of the image to the URL of our Web page, including the appropriate query string values. This will cause the chart image to display in our application.

Possible Enhancements

Now we have built a chart generation tool that will allow us to return images that contain various custom charts. There are all sorts of enhancements that could make this even more valuable. Here are some ideas for you to consider.

The pie chart we built supports 10 different data points until the colors start repeating themselves. The chart could be changed to not be limited to just 10 colors, but rather select from any of the available colors.

The pie chart we built does not contain any text labels indicating the values on which the chart is based. A text legend can be drawn using the DrawString method of the graphics class. The values could be drawn within their respective portions of the pie chart, or within a separate legend.

Our test page has several values hard coded for the data points to display. You would want to change this to retrieve the desired data and pass them as parameters to the charting page.

The DrawChart web page currently only supports drawing the pie chart. More charts can be added by including them in the switch statement that determines the chart to be rendered. Other types of charts that could be built with relative ease include a bar graph and a line point graph.

Future Columns

The next column has yet to be determined. If you have something in particular that you would like to see explained, please e-mail me at mstrawmyer@crowechizek.com.

About the Author

Mark Strawmyer, MCSD, MCSE, MCDBA is a Senior Architect of .NET applications for large and mid-size organizations. Mark is a technology leader with Crowe Chizek in Indianapolis, Indiana. He specializes in the architecture, design, and development of Microsoft-based solutions. You can reach Mark at mstrawmyer@crowechizek.com.

# # #

About the Author

Mark Strawmyer

Mark Strawmyer is a Senior Architect of .NET applications for large and mid-size organizations. He specializes in architecture, design and development of Microsoft-based solutions. Mark was honored to be named a Microsoft MVP for application development with C# for the fifth year in a row. You can reach Mark at mark.strawmyer@crowehorwath.com.

Comments

How to make Line Graphs in VC#.NET?

Posted by blue_diamond11ph
on 11/24/2005 06:14am

Anybody who can give me a sample code in creating a line graph where the X and Y data are determined by user input will be greatly appreciated.