This tutorial will show you how to display graphics charts using ASP.NET 2.0, ComponentArt’s Web.UI control, and VB.NET

.NET has quickly become an enterprise-level framework used by many businesses. Because of this, business users need to have a way to report their business numbers, percentages, and trends. With the advent of .NET 2.0, .NET developers have a powerful set of classes used to draw and manipulate graphics with the System.Drawing, System.Imaging, and System.Drawing2D namespaces, to name a few. Built on top of these robust classes, many third-party companies have designed reusable code and tools to assist developers on creating graphs and charts very easily and quickly. One such third-party tool is provided by ComponentArt. You can download a trial version of their software from their downloads section and install example code written in both C# and VB .NET. To begin this tutorial first ensure that you have completely downloaded and installed the third-party components from ComponentArt. After you have successfully installed the software, you have to include one namespace.

Additionally, you must ensure that you have the proper .DLLs located in the Bin folder of your project containing the files App_Licenses.dll, ComponentArt.Charting.WebChart.dll, ComponentArt.Web.UI.dll, and have copied the licenses.licx and Web.Config file from the example code found in the installation directory of ComponentArt Web.UI. Once all of these files are copied you must register the tag prefixes in your .aspx page to reference the third-party components.

After you’ve registered the TagPrefix you can use it in your code like this:

Now we are ready to write code for our code-behind. The ComponentArt Web.UI classes have a very specific and concise interface that makes it very easy to define simple graphs and charts.

First, we grab data from the Pubs database, specifically the Sales table and load the quantities and date columns each into their own array. After that we simply define a Series (a set of values) using the ComponentArt.Charting.Series class and add it to our existing chart (targetChart) using the Add() method of the targetChart.Series object.

Now that our chart has a series it needs x and y values to produce a graphical chart. We’ll use the DefineValue() method of the chart object to create the x and y dimensions and point them to the appropriate array we created earlier.

To finish up, we simply call the DataBind() and Draw() methods of our chart object to draw our graph, and that’s it!


The front end .aspx page looks something like this:

The entire flow for the code behind page is as follows:

Download Source Files