Monday, March 15, 2010

Create Charts in c# using OWC

Charts and graphs are considered to be very useful form of data representation. Graphs can add significant impact and visualization to your applications, especially in Web applications. Creating dynamic graphs in your web applications generally requires third party tools that have the ability to create graphs dynamically. A simple and inexpensive way to do this is using the Office Web Components (OWC). Apart from other third party tools, OWC charts are completely customizable, can have detailed charting and also have a professional look.

This article gives you the answers for the following questions.
How can you display your data as graphs in your web pages?
What is OWC?
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 these components, we can build many useful data analysis and reporting solutions in web browsers or in traditional programming environments. The office Web Components are a set of COM controls designed to bring interactive spreadsheet modeling, database reporting, and data visualization. OWC library contains four principal components:
  • Spreadsheet
  • Chart
  • PivotTable
  • Data Source
The controls are standard COM controls and can be used in many control containers such as Microsoft Internet Explorer, Microsoft Visual Basic, Microsoft Visual C++, Microsoft Visual FoxPro, or Microsoft Office UserForms. However, the controls have a few behaviors that make them especially suited to the unique environment of Internet Explorer.
OWC Charts
To display a chart in your web page you have to do the following steps.
Read the data to plot the chart from a database
Create an OWC Chart
Add required number of chart series in it.
Give the values for each chart series.
Customize your chart to display it in the format you wish
Create a GIF image from the chart
Display the image in your web page using the tag.
The data required for plotting the chart is bound to the chart component as its datasource. The Chart Component 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 chart and so the implementation is much more easy and straightforward.
Data Source In ASP .Net

The DataSet class in ADO.NET does not implement IDataSource, and the .NET Framework does not support a direct means to convert an ADO.NET DataSet object to an ADO Recordset object. If you have a DataSet from which you want to create a chart, you can either transform the DataSet into a stream that uses the XML persistence format for ADO, or you can generate literal data from the DataSet.
Terms and Definitions

ChartSpace: Represents the chart workspace. The chart workspace is the top-level chart container; it can contain more than one chart, with each chart represented by a WCChart object. When a chart workspace is first created, it is empty (it does not contain any charts). Use the Add method of the WCCharts object to create a new chart.
WCCharts: Represents a single chart in the chart workspace. The chart workspace can contain up to 16 charts.
WCSeriesCollection: Represents a collection of all the WCSeries objects on a chart. A chart can contain up to 255 series.
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 OWC component has to be included in our project. For this, in the Visual Studio .Net, right click �References� in the Solution Explorer. Select The Add references option. In the Add references Dialog, Select The COM tab. Select The Microsoft Office Component from the list and click OK. Add the using directive to add the control in your C# page.

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

In the C# code behind we can write the code to create the chart image and add the image into the placeholder. Here is the code for creating a column wise bar graph.
//First create a ChartSpace object to hold the chart

OWC.ChartSpace objCSpace = new OWC.ChartSpaceClass ();
//Add a chart in the ChartSpace. The Add method returns a chart object.
OWC.WCChart objChart = objCSpace.Charts.Add (0);
/*Specify the type of the graph to be displayed. The type of the graph is specified by the enumerated values in OWC.ChartChartTypeEnum. */
objChart.Type = OWC.ChartChartTypeEnum.chChartTypeColumnClustered;
//Specify if the chart needs to have legend.
objChart.HasLegend = true;
//Give title to graph.
objChart.HasTitle = true;
objChart.Title.Caption= "Title Of The Chart";
//Give the caption for the X axis and Y axis of the graph
objChart.Axes[0].HasTitle = true;
objChart.Axes[0].Title.Caption = "Y Axis Caption";
objChart.Axes[1].HasTitle = true;
objChart.Axes[1].Title.Caption = "X Axis Caption";
//Populate the Literal Strings For the data
/*The categories and values can be given as literal string with values separated by tabs. With these three values we can draw a single line.*/
string strSeriesName = "Line 1";
string strCategory = "1" + '\t' + "2" + '\t' + "3" + '\t';
string strValue = "9" + '\t' + "8" + '\t' + "4" + '\t';
//Add a series to the chart�s series collection
objChart.SeriesCollection.Add(0);
//Give the name of the series
objChart.SeriesCollection[0].SetData (OWC.ChartDimensionsEnum.chDimSeriesNames, (int)OWC.ChartSpecialDataSourcesEnum.chDataLiteral, strSeriesName);
//Give the Categories
objChart.SeriesCollection[0].SetData (OWC.ChartDimensionsEnum.chDimCategories, (int)OWC.ChartSpecialDataSourcesEnum.chDataLiteral, strCategory);
//Give The values
objChart.SeriesCollection[0].SetData
(OWC.ChartDimensionsEnum.chDimValues,
(int)OWC.ChartSpecialDataSourcesEnum.chDataLiteral, strValue);

//Now a chart is ready to export to a GIF.
string strAbsolutePath = (Server.MapPath(".")) + "\TempFiles\somefilename.gif";
objCSpace.ExportPicture(strAbsolutePath, "GIF", 600, 350);
//Create a relative path to the GIF file.

/*If an absolute path is used instead of a relative path, the file will not be displayed in the client machines as the file is created in the server, not in the client. */

string strRelativePath = "./TempFiles/somefilename.gif";
//Add the image into the placeholder.
string strImageTag = "";
ChartHolder.Controls.Add(new LiteralControl(strImageTag));

No comments:

Post a Comment