Generating Charts Using Microsoft Office XP Web Components Samples and exampl...

Page 1 of 3

Target readers: Developers working on any Web Application project to generate Charts.

Purpose of the Document:

The main purpose of this document is to make the developer to generate charts using Microsoft office XP web Components in Web Applications.

About Microsoft Office Web Components

Office Web Components (OWC) are a group of OLE components implemented as ActiveX controls in Microsoft Office 2000, Office XP and Office 2003. These ActiveX Controls can be plugged into web
programmed in-memory. The OWC can be used by any COM-compliant Component Object Model programming language. OWC Components are written in Unmanaged Code. Applications like Excel,
creating interactive web pages using Office Web Components.
The following components are included:
i)Spreadsheet
ii)Chart space
iii)Pivot table
iv)Data source component
Advantages of Microsoft Office XP Web Components
i)Less Development Time
ii)Less Time Testing
iii)Robust and Scalable
iv)Free for Most of Usage

Steps To Generate Charts in Web Applications

1.Create New Web Application in C# Language
2.Add Microsoft Office Web Components as Reference to the project as shown in the below Fig.
Select either Microsoft.Interop.OWC10.dll or Microsoft.Interop.OWC11.dll
3.In Your Code behind file Include OWC10 namespace.
4.Now Create a method to Generate a Chart
5.Method Name BuildChart Which returns OWC10.ChartSpaceClass, be can be used to Render as an image on Web Page

DateTime dtStart = Convert.ToDateTime("3/21/2009");

DateTime dtend = Convert.ToDateTime("3/26/2009");

//X-axis Values
string strDates = @"3/21/2009\t3/22/2009\t3/23/2009\t3/24/2009\t3/25/2009\t3/26/2009\t";

//Y-axis Values
string strValues1 = @"4\t0\t7\t0\t0\t5\t";
string strValues2 = @"3\t0\t8\t0\t0\t5\t";

string strChartTitle = "Reports";

ChartSpace space = new ChartSpaceClass();

//Generate Chart
space = Graphics.BuildChart(strDates, strValues1, strValues2, strChartTitle);

//show the chart on the client

Response.ContentType = "image/gif";
Response.BinaryWrite((byte[])space.GetPicture("gif", 800, 800));
Response.End();
3

Method to Generate Chart

Public static OWC10.ChartSpaceClass BuildChart BuildChart(string strCategories, string strValues1, string strValues2, s
{
OWC10.ChartSpaceClass space = new OWC10.ChartSpaceClass();
3

Now add a chart to the above Chart Space

space.Charts.Add(0);
3

After adding the Chart, specify the Chart Type.

There are around 66 charts are availble in the OWC10.ChartChartTypeEnum enum class.
Now Specify the Chart type:

http://www.dotnetspider.com/resources/35679-Generating-Charts-Using-Microsoft-O... 01-03-2011
Generating Charts Using Microsoft Office XP Web Components Samples and exampl... Page 2 of 3

space.Charts[0].Type = OWC10.ChartChartTypeEnum.chChartTypeColumnStacked;
3

Now Cusomize the Chart

//Set the Chart dept.

space.Charts[0].ChartDepth = 300;

//Set the Aspect ratio of the Chart

space.Charts[0].AspectRatio = 150;

//To Show the Legend

space.Charts[0].HasLegend = true;

//Set the title of the graph.

space.Charts[0].HasTitle = true;
space.Chart.[0].Title.Caption=strChartTitle; space.Charts[0].Title.Font.Bold
3

Now add the SeriesColletions to the Chart.

//For this graph we have X and Y axis, to Show 2 series on Y axisadd 2 series to series Collection one for ‘
space.Charts[0].SeriesCollection.Add(0);
space.Charts[0].SeriesCollection[0].DataLabelsCollection.Add();
space.Charts[0].SeriesCollection.Add(1);
3

If you're charting a pie or a variation thereof percentages make a lot more sense than values.

//In this case we are using Column stacked so set Has Value to true
space.Charts[0].SeriesCollection[0].DataLabelsCollection[0].HasPercentage = false;
space.Charts[0].SeriesCollection[0].DataLabelsCollection[0].HasValue = true;
3

Specify the Names to X and Y axis

//Specify the X-axis Name

space.Charts[0].Axes[0].HasTitle = true;
space.Charts[0].Axes[0].Title.Font.Bold = true;
space.Charts[0].Axes[0].Title.Caption = "Dates";

//Specify the Y-axis Name

space.Charts[0].Axes[1].HasTitle = true;
space.Charts[0].Axes[1].Title.Font.Bold = true;
space.Charts[0].Axes[1].Title.Caption = "Test Cases";
3

To set the font and colors to the graph

//Set Font color for the Sent Series on Y Axis

space.Charts[0].SeriesCollection[0].Interior.Color = "Green";
space.Charts[0].SeriesCollection[0].Caption = String.Empty;
space.Charts[0].SeriesCollection[0].DataLabelsCollection[0].Font.Name = "verdana";
space.Charts[0].SeriesCollection[0].DataLabelsCollection[0].Font.Size = 10;
space.Charts[0].SeriesCollection[0].DataLabelsCollection[0].Font.Bold = true;
space.Charts[0].SeriesCollection[0].DataLabelsCollection[0].Font.Color = "white";

http://www.dotnetspider.com/resources/35679-Generating-Charts-Using-Microsoft-O... 01-03-2011
Generating Charts Using Microsoft Office XP Web Components Samples and exampl... Page 3 of 3

Now set the data for Sent series on Y-axis and data on X-axis

//Set Data the Sent Series on Y Axis and Data for Dates on X-axis
space.Charts[0].SeriesCollection[0].SetData(OWC10.ChartDimensionsEnum.chDimCategories,
Convert.ToInt32(OWC10.ChartSpecialDataSourcesEnum.chDataLiteral), chartCategoriesStr);

space.Charts[0].SeriesCollection[0].SetData(OWC10.ChartDimensionsEnum.chDimValues,
Convert.ToInt32(OWC10.ChartSpecialDataSourcesEnum.chDataLiteral), chartValuesStr1);
3

Set the data for Failed Series on Y-Axis and data on X-axis

//Set Data the Failed Series on Y Axis and Data for Dates on X-axis
space.Charts[0].SeriesCollection[1].SetData(OWC10.ChartDimensionsEnum.chDimCategories,
Convert.ToInt32(OWC10.ChartSpecialDataSourcesEnum.chDataLiteral), chartCategoriesStr);

space.Charts[0].SeriesCollection[1].SetData(OWC10.ChartDimensionsEnum.chDimValues,
Convert.ToInt32(OWC10.ChartSpecialDataSourcesEnum.chDataLiteral), chartValuesStr2);

//Now return the object and generate gif or jpg image to display on client side

return space;
}
3

Conclusion
Microsoft office XP Web Components saves the developer’s time and effort by providing simple approach to generate Charts. With this example shown in the above sections, the reader would be com
Web Components DLL. By using this document, a developer can be able to generate complex charts depending up on their requirement.

http://www.dotnetspider.com/resources/35679-Generating-Charts-Using-Microsoft-O... 01-03-2011