ASP.NET Cookbook

12.2. Creating Bar Charts on the Fly

Problem

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

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 that is called for each item in the Repeater, set the width of the bar in the passed Repeater row.

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

Figure 12-2. Create bar chart output dynamically

Discussion

This recipe provides a rather simple approach that combines data binding and HTML tricks to create a bar graph with very 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.

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. Rather, it’s the technique for generating ...