If you?re new to ASP development or if you?re like myself and have developed applications for many years, and do not routinely revisit all of the controls for every .NET release, if you haven't already, I would strongly suggest reviewing Microsoft?s ASP.NET 4.0 charting controls before purchasing a third party charting control package.

If you?re familiar with the charting components of Excel you will find the ASP Charting controls to provide a similar set of chart templates and functionality.  The ASP.NET 4.0 Chart control provides such a rich set of functionality that I would argue that using this control should satisfy the majority of your charting needs.

In this example I will introduce ASP Charting control by showing how quickly you can build a pie chart, associate it to a Sql data source set up the series and display tool-tips.
The basic steps in the is example is:

1. Create the data model
2. Create web application
3. Add a data source
4. Add chart control
5. Add chart tooltips

Data Model

As with all charting needs we need to have some data to that will be represented by our chart.  The following diagram shows the data model that I used for this example:

The data model consists of a products table where a given product is grouped by a product category.  As each product has been sold there is a corresponding record of that sale in the Sale table.

Web Application

1. Open Visual Studio
2. Create a New ASP.NET Empty Web Application
3. Add a new Web Form (.aspx) page to the project
4. Open the design view for the web form added in the previous step.

Data Source

1. With the web form design view visible expand the "Data" section in the tool box
2. Drag & drop a new Sql Data Source object onto the body of the web form.
3. In the design view select the Sql Data Source object that was just added and click the carrot that appears then select "Configure Data Source".
4. Select or create a New Connection string
5. After defining your connection string click "Next>" 
6. On the "Configure the Select Statement" screen select the radio button for "Specify a custom SQL statement or stored procedure
7. On the screen "Define Custom Statements or Stored Procedures" make sure the "Select" tab is selected
8. Select the radio button for "SQL statement" 
9. For the data model above use the following SQL statement in the text field:

      1: SELECT PC.ProductCategoryName, PC.ProductCategoryID, SUM(S.Price) TotalSales 

      2: FROM ProductCategory PC 

      3: INNER JOIN Product P on PC.ProductCategoryID = P.ProductCategoryID 

      4: INNER JOIN Sale S ON P.ProductID = S.ProductID 

      5: Group By PC.ProductCategoryID, PC.ProductCategoryName

      
10. Click the "Next>" button
11. You can test the query to verify expected results 
12. Finally click the "Finish button"

Chart Control

1. Expand the "Data" section in the toolbox
2. Drag/drop a "Chart" control onto the design service in the body of the web form
3. Select the Chart control just added to the design surface and select the carrot.
4. In the "Choose Data Source" select the Sql Data Source object that was defined in earlier steps
5. Set the "Chart Type" drop down to "Pie"
6. Set the "X Value Member" to ProductCategoryName
7. Set the "Y Value Member" to TotalSales

At this point running the application provides a nice pie chart with the corresponding category labels.

Chart Tooltips
*Adding tooltips is an easy task and one that is commonly requested, and expected by end users.

1. Select the Chart control on the design surface
2. Open the properties window
3. Locate the "Series" property and click the ellipsis to open the "Series Collection Editor"
4. In the left pane make sure "Series1" is highlighted
5. On the right pane scroll down until you locate "ToolTip"
6. Click the ellipsis to open the "String Keywords Editor" dialog
7. In the String Keywords Editor dialog click the button "Insert New Keyword"
8. Select the option "Y Value as Percentage of Total"
   1. You can customize the formatting of the tooltips by changing values in the "Format" drop down.
   2. To create your own custom formatting select the "Custom" option in the "Format" drop down list.
9. Click the "Ok" button on Keyword Editor dialog
10. Click the "Ok" button on the String Keywords Editor dialog.
11. Click the "Ok" button on the Series Collection Editor dialog.
12. Run the application you should see tooltips specific to each section of the pie graph. 

Hopefully at this point you will feel comfortable exploring the various chart types their associated properties.  Microsoft chart control is a fairly simple control with numerous features.  In future blogs I will provide additional charting examples.

~Happy Charting~

Visual Studio 2010 C# Project Source

SQL Database and Sample Data