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.