When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
•Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article
Jobs




ASP ASP.NET ASP FAQs Message Board Feedback ASP Jobs
 
Print this Page!
Published: Wednesday, December 8, 2004

A Look at WebCharts, a Free .NET Charting Control

By Scott Mitchell

Introduction


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.

- continued -

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 .dll file) 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 Height and Width properties. The Background and PlotBackground 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:

  1. 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.
  2. 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 PieChart object displays its data as a pie chart; the ColumnChart as a bar graph.
  3. 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:
    1. First, assign the data from step (1) to the chart object's DataSource property. This property only accepts objects that implement IEnumerable, so if you are binding a DataTable to the chart object, bind it's DefaultView (i.e., chartObject.DataSource = myDataTable.DefaultView); if you are binding a DataSet, bind its appropriate DataTable's DefaultView (i.e., chartObject.DataSource = myDataSet.Tables(0).DefaultView)
    2. Next, specify the field in the data that represents the X-axis by setting the chart object's DataXValueField property to the name of the field.
    3. Repeat the above step, specify the field in the data that represents the Y-axis (using the DataYValueField property).
    4. Finally, bind the data to the chart object by calling the chart object's DataBind() method.
    In addition to adding code to bind the data to the chart object, you can also programmatically set properties of the chart data, such as colors, fonts, and other aesthetic information.
  4. 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 Charts collection. Lastly, call the chart container's RedrawChart() method, which will generate the chart for display.
The following code snippet and live demo illustrate how to display a pie chart based on database data. In this specific example, the pie chart displays six random categories from the ASPFAQs.com database and displays the number of page views for each category. 

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ register tagprefix="web" namespace="WebChart" assembly="WebChart"%>
<script runat="server" language="VB">

  Sub Page_Load(sender as Object, e as EventArgs)
    If Not Page.IsPostBack then
      'STEP 1: Get the data from the database
      Dim myConnection as New SqlConnection(Connection String)
    
      Const strSQL as String = "SELECT TOP 6 Name, ViewCount " & _
                               "FROM tblFAQCategory ORDER BY NEWID()"
      Dim myCommand as New SqlCommand(strSQL, myConnection)

      Dim reader as SqlDataReader = myCommand.ExecuteReader()      
      
      'STEP 2: Create the chart object
      Dim chart as New PieChart

      'STEP 3: Bind the DataTable to the WebChart
      chart.DataSource = reader
      chart.DataXValueField = "Name"
      chart.DataYValueField = "ViewCount"
      chart.DataBind()
      
      chart.DataLabels.Visible = True
     
      'STEP 4: Attach the chart object to the chart container
      ChartControl1.Charts.Add(chart)
      ChartControl1.RedrawChart()
      
      reader.Close()
      myConnection.Close()
    End If      
  End Sub

</script>


<web:chartcontrol runat="server" id="ChartControl1"
     height="400" width="350" gridlines="none" legend-position="Bottom" />
[View a Live Demo!]

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 DataSource, DataXValueField, and DataYValueField properties, and call its DataBind() method. The final step is to attach the chart to the Charts 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 Charts collection is enumerated, allowing each chart to plot its data. Each chart object in the Charts collection knows how to render charts of its particular type: PieChart instances know how to draw pie charts; ColumnChart instances 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 src attribute points to the saved image file. The screenshot to the left shows a directory listing of the /WebCharts 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?
WebCharts avoids possibly duplicate file names by using GUIDs for the filename, which are guaranteed to be globally unique. Each time a WebCharts chart is created, a new file will be added to this /WebCharts folder, 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 /WebCharts directory. (The account is ASPNET for Windows 2000 and Windows XP; it's Network Service for 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 /WebCharts directory. 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.

Conclusion


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.

Happy Programming!

  • By Scott Mitchell


    • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article