Creating Dynamic Charts in ASP. NET Web Applications Using OWC

Charts and graphs areconsidered to be very useful form of data representation. Graphs canadd significant impact and visualization to your applications,especially in Web applications. Creating dynamic graphs in your webapplications generally requires third party tools that have the abilityto create graphs dynamically. A simple and inexpensive way to do thisis using the Office Web Components (OWC). Apart from other third partytools, OWC charts are completely customizable, can have detailedcharting and also have a professional look. 

This article gives you the answers for the following questions.

1. How can you display your data as graphs in your web pages?

2. What is OWC?

3. How to implement OWC Charts in ASP .Net using C#?

Introduction

The Office Web Component (OWC)is a set of controls included in the Microsoft Office 2000. Using thesecomponents, we can build many useful data analysis and reportingsolutions in web browsers or in traditional programming environments.The office Web Components are a set of COM controls designed to bringinteractive spreadsheet modeling, database reporting, and datavisualization. OWC library contains four principalcomponents:

1. Spreadsheet

2. Chart

3. PivotTable

4. Data Source

The controls are standard COMcontrols and can be used in many control containers such as MicrosoftInternet Explorer, Microsoft Visual Basic, Microsoft Visual C++,Microsoft Visual FoxPro, or Microsoft Office UserForms. However, thecontrols have a few behaviors that make them especially suited to theunique environment of Internet Explorer.

OWC Charts

To display a chart in your web page you have to do the following steps.

1. Read the data to plot the chart from a database

2. Create an OWC Chart

3. Add required number of chart series in it.

4. Give the values for each chart series.

5. Customize your chart to display it in the format you wish

6. Create a GIF image from the chart

7. Display the image in your web page using the <IMG> tag.

The data required for plottingthe chart is bound to the chart component as its datasource. The ChartComponent supports different types of datasource. They are 

• A data source that implements the IDataSource interface

• An ADO Recordset object.

• XML stream (if the data is persisted to the stream in the XML persistence format.)

• Literal data in the form of a delimited string or array (a chart that uses literal data is not considered to be bound.)

Data Source In ASP 
ASP can use the ADO Recordset object as the datasource for the chartand so the implementation is much more easy and straightforward. 

Data Source In ASP .Net
The DataSet class in ADO.NET does not implement IDataSource, andthe .NET Framework does not support a direct means to convert anADO.NET DataSet object to an ADO Recordset object. If you have aDataSet from which you want to create a chart, you can either transformthe DataSet into a stream that uses the XML persistence format for ADO,or you can generate literal data from the DataSet. 

Terms and Definitions

1. ChartSpace:Represents the chart workspace. The chart workspace is the top-levelchart container; it can contain more than one chart, with each chartrepresented by a WCChart object. When a chart workspace is firstcreated, it is empty (it does not contain any charts). Use the Addmethod of the WCCharts object to create a new chart.

2. WCCharts: Represents a single chart in the chart workspace. The chart workspace can contain up to 16 charts.

3. WCSeriesCollection: Represents a collection of all the WCSeries objects on a chart. A chart can contain up to 255 series.

4. WCSeries: Represents a series on a chart. (Example: A line in a line graph, a bar in a bar graph etc.)

Implementing Charts in ASP .Net using C#

To Start with, the OWCcomponent has to be included in our project. For this, in the VisualStudio .Net, right click �References� in the Solution Explorer. SelectThe Add references option. In the Add references Dialog, Select The COMtab. Select The Microsoft Office Component from the list and click OK.Add the using directive to add the control in your C# page.

A placeholder must be added inthe ASPX page to hold the graph image. For this, simply add thefollowing code in the web page where you want to show the graph.

In the C# code behind we can write the codeto create the chart image and add the image into the placeholder. Hereis the code for creating a column wise bar graph. 

Simply load the page in your browser to see the chart displayed.

Note: As the graph would bedynamically updated, the image name should not be a constant name asgiven here. The image will be cached in the client side when its loadedfor the first time. Then although we export the GIF with some differentvalues, the previously cached image is shown again. So the filename canbe dynamically created using the date and time of the file creation.And also, don�t forget to implement a cleanup functionality so that theserver is not crowded with the created GIF files.

You can add required number of ChartSeries with this chart. Each series will have different color.

To read the data from a database :

If you have to create the chart using the values from a database, youcan specify it by simply giving the ADO Recordset as the Chart�sDataSource. If you are using the ADO .Net�s DataSet, the followingmethod can be used to convert the data in the DataSet to the literaldata array as we did here.

Hope you have the data in the DataSet DS. Simply iterate through thedataset and create the string with values separated by tabs. 

You can give this data to the chart.

Conclusion
OWC charts are completely customizable to show them as of ourrequirements. As the graph is treated as simple image, there are noclient side dependencies in displaying the graph.

Most Commented Articles :

• C# Tutorial For Beginners
• C# Operator Overloading
• Objects & Classes in C#
• C# Editable ListView
• C# – Static Members
• Drag and Drop Files with C#
• Using the Parallel Class in C# – Processing Data in Parallel across Multiple Processors or Cores
• Talk to SharePoint Through its Web Services
• ComboBox With Images
• GDI+ A Higher Level API