ASP.NET 2.0 Cookbook, 2nd Edition

15.2. Creating Bar Charts on the Fly

Problem

You want to create a bar chart on the fly without having to resort to a commercial package.

Solution

Use a combination of data binding with a Repeater control and the well-known HTML trick of stretching an image to create the bars.

In the .aspx file, add a Repeater control with an ItemTemplate.

In the code-behind class for the page, use the .NET language of your choice to:

1. Assign the data source to the Repeater control and bind it.

2. In the ItemDataBound event handler called for each item in the Repeater, set the width of the bar in the passed Repeater row.

Figure 15-2 shows some typical output. Examples 15-7, 15-8 through 15-9 show the .aspx file and VB and C# code-behind files for an application that implements this solution.

Discussion

This recipe provides a simple approach that combines data binding and HTML tricks to create a bar graph with little coding and without the need to purchase any additional components. By using more complex HTML, you can add more labels and other enhancements to this recipe, which may make it more useful for your situation.

Figure 15-2. Creating a bar chart output dynamically

The example we use to illustrate this solution generates a bar chart from chapter and problem data in a database. (The source of the data is not that important; the technique for generating the graph on the fly is the focus of this recipe.) The bar ...