A Look at WebCharts, a Free .NET Charting ControlBy Scott Mitchell
Any piece of data or information is limited its usefulness by how it is presented. For example, the sales figures for your company for the past year may seem like very important and useful information, but if this data is presented as, say, a raw data dump, spanning hundreds of pages, the utility of this information is greatly limited. One of the best ways to present information in a quick and useful manner is through charts. Charts provide a nice summary of the data that can typically fit on one page and be dissected rather quickly.
When building a large data-driven Web application, it's almost always the case that you'll need some set of reporting pages that provide a summary of the site's underlying data, and charts are a commonly requested user interface for grokking such large data sets. Not surprisingly, there are a number of commercial tools avaiable for creating polished reports and/or charts in ASP.NET Web applicatios. Reporting tools like Cyrstal Reports for .NET and Active Reports for .NET provide charting capabilities along with their reporting tools. There are also products designed specifically for generating charts, such as Dundas Charts for .NET and .net Charting.
While these commercial options are definitely worth their money for large Web applications, such commercial components might be too costly for a small project. There are a variety of ad hoc solutions, as discussed here on 4Guys and elsewhere, that involve using HTML, the Office Web Components, Flash, or dynamically generating a chart using the System.Drawing classes avaiable in the .NET Framework. Recently I discovered a free .NET charting tool from Microsoft employee Carlos Aguilar Mares called WebChart. This article provides a quick overview of WebChart, demonstrating how to use it in an ASP.NET Web application.
Getting Started with WebChart and Displaying Your First Chart
The first step to getting started with WebChart is to download the control from Carlos's Web site, http://www.carlosag.net/Tools/WebChart/. The download includes the WebChart assembly (the
.dllfile) along with a README file - no source code or sample pages are provided. From Carlos's site, though, there is a link to download a help file, as well as numerous live examples, complete with source code.
Once you have downloaded the WebChart assembly, you can add it to Visual Studio .NET's Toolbox by right-clicking on the Toolbox and choosing the Add/Remove Items from the Toolbox. Click the Browse button and point to the downloaded assembly file. Once the item has been added to the Toolbox, you can add a chart to an ASP.NET Web page by simply dragging and dropping the chart onto a page. The screenshot to the right shows an ASP.NET page that has had a WebChart added to it.
The chart has a number of properties that you can set to configure the appearance. For example, you can specify the size of
the chart through the
Width properties. The
properties enable you to specify the formatting of the chart's background and plotting area background, respectively. For example,
in the screenshot to the right you can see that the plot area's background is white, whereas the chart's general backround is light
yellow. All of these properties and more can be specified through the Properties pane in the Design tab.
Binding data to a WebChart is very easy to accomplish, requiring only a few lines of code. To bind data to a WebChart you need to perform the following steps:
- Retrieve the data - typically this data will come from a database. In such a case, you can read the data directly into a DataReader, DataTable, or DataSet.
- Programmatically create an appropriate chart object - The control you dragged and dropped onto the ASP.NET page
servers as a container for charts. In order to display a chart on this page, you need to programmatically create a chart
object, bind it to the data, and then attach it to the chart container. There are different types of chart objects that
will render different styles of charts. For example, the
PieChartobject displays its data as a pie chart; the
ColumnChartas a bar graph.
- Bind the data to the chart object - binding the data from step (1) to the chart object created in step (2) requires
four lines of code:
- First, assign the data from step (1) to the chart object's
DataSourceproperty. This property only accepts objects that implement
IEnumerable, so if you are binding a DataTable to the chart object, bind it's
chartObject.DataSource = myDataTable.DefaultView); if you are binding a DataSet, bind its appropriate DataTable's
chartObject.DataSource = myDataSet.Tables(0).DefaultView)
- Next, specify the field in the data that represents the X-axis by setting the chart object's
DataXValueFieldproperty to the name of the field.
- Repeat the above step, specify the field in the data that represents the Y-axis (using the
- Finally, bind the data to the chart object by calling the chart object's
- First, assign the data from step (1) to the chart object's
- Attach the chart object to the chart container and call
RedrawChart()- once you have created the chart object and bound data to it, the final step is attaching the programmatically created chart object to the chart control dragged and dropped onto the ASP.NET page. To accomplish this, simply add the chart object to the chart container's
Chartscollection. Lastly, call the chart container's
RedrawChart()method, which will generate the chart for display.
In this example,
ChartControl1 is the name of the chart container added in the Design tab of the ASP.NET page.
The code starts out by retrieving the data to be charted from the database. As you can see, I use a
SqlDataReader in this example. Next, I programmatically create the
PieChart object (since I
want to create a pie chart), set its
properties, and call its
DataBind() method. The final step is to attach the chart to the
collection of the charting container (
ChartControl1). That's it!
Examining How WebChart Creates the Chart
If you check out the live demo you might notice that the chart is a graphics image, specifically a PNG image. The WebControl's chart container contains a
RedrawChart()method that, when called, begins the process of creating the chart image file using the System.Drawing classes in the .NET Framework. First, an image of the specified type (PNG by default) with the specified height and width is created. Next, set of charts in the container's
Chartscollection is enumerated, allowing each chart to plot its data. Each chart object in the
Chartscollection knows how to render charts of its particular type:
PieChartinstances know how to draw pie charts;
ColumnChartinstances know how to draw bar charts.
After each chart object has made its contribution to the overall chart, the chart container saves the generated file. The image
file is given a GUID as a filename and, by default, is stored in the
/WebCharts folder directly off of the application
directory. The WebChart control, when rendered, returns an
<img> tag back to the browser whose
attribute points to the saved image file. The screenshot to the left shows a directory listing of the
directory, with a number of PNG chart images present.
Anytime in a Web application that you generate temporary files on the file system, a couple of issues are raised, including:
- How can I avoid duplicate names for different temporary file?
- By what means are the temporary files removed?
- What permissions are needed on the directory where the temporary files are created/stored?
/WebChartsfolder, which over time will clog your Web server's file system. WebCharts circumvents this concern by automatically cleaning out files that are older than a specified number of minutes (the default is 30). Whenever a request comes in to create a WebCharts image, a quick scan of the directory is made and all out of date image files are deleted. In order to have WebCharts be able to create and delete image files from this directory, you will need to give Read and Write permissions to the account that ASP.NET operates under to the
/WebChartsdirectory. (The account is
ASPNETfor Windows 2000 and Windows XP; it's
Network Servicefor Windows 2003.)
WebCharts does provide properties to fine tune the process of creating and deleting WebCharts files. For example, you can increase
or decrease the timespan by which old image files are considered to be out of date. There are also properties for changing the
directory to which the image files are saved. Refer to the WebCharts
FAQ for more information on these topics, along with a discussion on permissions for the
You can even bypass the image creation and saving altogether with a bit more code. This
example illustrates how to save the chart's image to a stream, and dump the stream's contents directly back to the browser, skipping
the need for saving the file on the Web server's filesystem.
Carlos's WebChart control is an easy-to-use, free component for creating a variety of common graphs. Adding WebCharts to a project takes just a few minutes of time and a hanful of lines of code. While WebCharts is easy to get using, it is limited to fairly simple graphing scenarios and creating aesthetically pleasing charts can take a bit of trial and error in adjusting assorted WebCharts properties. If you need to create highly customizable charts, or non-standard charts, consider using one of the many commercial components avaiable. But if all you need are a few simple charts for your Web application, WebCharts will likely fit the bill.