In this article, weâre going to learn how to create the chart shown above on-the-fly using ASP .NET and Microsoft Office Web Components.###Step 1: Add a Reference to Microsoft Office Web Components to the Project
The very first thing to do to use MS Office to create eye-catching charts is to add a reference to the Microsoft Office Web Components dll. So go ahead and create a brand new web project imaginatively called âOfficeWebComponents.â MS Office means COM, so when you go to add a reference, you need to go over to the COM tab. Scroll down until you find the right dll, select it, and click OK.
If you have Office running on the machine, then you probably have this .dll already installed. If you donât, you will have to get it from Microsoft.
Step 2: Write the Code
Donât forget to add using OWC11; to your code-behind.
Before I explain it, hereâs the code:
public partial class _Default :
System.Web.UI.Page
{
protected void Page_Load(object sender,
EventArgs e)
{
string[] chartCategories = new string[]
{
âLuke Skywalkerâ,
âMara Jadeâ,
âLeia Organa Soloâ,
âMace Winduâ,
âHan Soloâ,
âAnakin Skywalkerâ,
âDepa Billabaâ,
âYodaâ
};
string[] chartValues = new string[]
{
â5â³,
â-50â³,
â3.5â³,
â30â³,
â5â³,
â-20â³,
â20â³,
â0â³
};
//The charting component wants its categories and
// deliminated values tab.
string chartCatsAsString = String.Join(âtâ, chartCategories);
string chartValuesAsString = String.Join(âtâ, chartValues);
//Create the charting workspace
OWC11.ChartSpaceClass chartSpace = new OWC11.ChartSpaceClass();
//Create the chart itself
OWC11.ChChart theChart = chartSpace.Charts.Add(0);
//Set the type of the chart
theChart.Type = OWC11.ChartChartTypeEnum.chChartTypeColumnClustered;
//Add the chartâs title
theChart.HasTitle = true;
theChart.Title.Caption = "Indecipherable Star Wars Graph";
//Populate the indecipherable data
theChart.SeriesCollection.Add(0);
//Add the categories
theChart.SeriesCollection[0].SetData(
OWC11.ChartDimensionsEnum.chDimCategories,
(int)OWC11.ChartSpecial.DataSourcesEnum.chDataLiteral,
chartCatsAsString);
//Add the values
theChart.SeriesCollection[0].SetData(
OWC11.ChartDimensionsEnum.chDimValues,
(int)OWC11.ChartSpecial.DataSourcesEnum..chDataLiteral,
chartValuesAsString);
//Show the chart to the client as a GIF image (400Ã400)
Response.ContentType = âimage/gifâ;
Response.BinaryWrite((byte[])chartSpace.GetPicture(âgifâ, 400, 400));
Response.End();
}
}
The code is actually pretty-self explanatory (with my comments at least ;-) ). Rather than bore you by going through the same code again, hereâs some information thatâs not in the code:
You add the chartâs legend the same way you add the title: you set the HasLegend property to true and then set the legend.
There are a number of ways to display your chart â everything from pie-graphs to scatter-plots.
Your category names and values canât have any commas in them â the charting component seems to deliminate the string at commas as well as tabs.
You can save the chart as an image, too; you arenât limited to sending the image back to the browser.
If you have fewer or more categories than values, you donât get an error â the chart gets rendered with the extra category/value.
Real Life Uses
In real life, weâre obviously not going to have hard-coded categories and values in your code-behind. Weâre probably going to get them from the database. This works just fine. For example, suppose you want to figure out how much time you spent each day working on a certain project. These numbers might be stored in a database or an XML file. All you do is simply read the numbers into a values array, and the days into a categories array; join them into a string just like we did in the example, and then go on from there.