How To Create an Interactive Office XP Chart Server-Side Using ASP

Article translations Article translations
Article ID: 286278 - View products that this article applies to.
This article was previously published under Q286278
Expand all | Collapse all


The Chart component enables you to create static charts (pictures) by using the GetPicture and ExportPicture methods for the Chartspace object. However, the resulting chart is merely a picture and does not respond to any chart-specific events. If you require event handling for the chart but would also like to move the business logic for creating the chart to the server, you can use the technique illustrated in this article.


The following sample uses Active Server Pages (ASP) code to generate the Extensible Markup Language (XML) for a chart; After the chart is created, the XMLData property of the ChartSpace object is returned to the client by the Response.Write command. Client-side code can load this XML into the Chart component using the Load method for the ChartSpace object. After it has been loaded, the component displays a formatted chart that can respond to user events.


  1. Paste the following code into Notepad and save it as MakeChart.asp in the virtual root folder of your Web server. By default, the virtual root is C:\Inetpub\Wwwroot.
    <%@ Language="vbscript" CodePage="65001"%>
        Response.Buffer = TRUE
        Response.ContentType = "text/xml"
        Dim sCat
        sCat = Request.QueryString("Category")
        'Connect to the SQL Server Northwind database.
        Dim conn, rs
        Set conn = CreateObject("ADODB.Connection")
        conn.Open "Provider=SQLOLEDB;Data Source=SQLServer;Initial Catalog=Northwind;UID=sa"
        'Execute a query that returns records based on the Category ID.
        Set rs = CreateObject("ADODB.Recordset")
        rs.Open "SELECT ProductName, ProductSales From [Product Sales for 1997] " & _
                "Where CategoryName='" & sCat & "'", conn, 3
        'Build an array for the ProductName field and an array for the ProductSales field.
        ReDim aNames(rs.RecordCount - 1)
        ReDim aSales(rs.RecordCount - 1)
        Dim i
        Do While Not rs.EOF
            aNames(i) = rs.Fields("ProductName")
            aSales(i) = rs.Fields("ProductSales")
            i = i + 1
        'Close the connection to the database.
        Set rs= Nothing
        Set conn = Nothing
        'Create a new bar chart.
        Dim ChartSpace1, Cht, c
        Set ChartSpace1 = CreateObject("OWC10.Chartspace")
        Set c = Chartspace1.Constants
        Set cht = Chartspace1.Charts.Add
        cht.Type = c.chChartTypeBarClustered
        'Add the data to the chart.
        cht.SetData c.chDimSeriesNames, c.chDataLiteral, "Sales"
        cht.SetData c.chDimCategories, c.chDataLiteral, aNames
        cht.SeriesCollection(0).SetData c.chDimValues, c.chDataLiteral, aSales
        'Format chart elements.
        Chartspace1.Border.Color = "Rosybrown"
        ChartSpace1.Border.Weight = c.owcLineWeightMedium
        cht.SeriesCollection(0).Interior.Color = "Rosybrown"
        cht.PlotArea.Interior.Color = "Wheat"
        'Return the new chart's XML.
        Response.Write Chartspace1.XMLData
    NOTE: In MakeChart.asp, replace SQLServer with the name of your SQL Server. If you do not have access to a SQL Server that contains the Northwind sample database, you can modify the connection string to use the Access 2002 Sample Northwind database instead as follows:
    provider=microsoft.jet.oledb.4.0; data source=C:\Program Files\Microsoft Office\Office10\Samples\Northwind.mdb
  2. Paste the following code into Notepad and save it as Chart.htm in the virtual root folder of your Web server.

    NOTE: Replace WebServer in the code with the name of your Web server.
    <DIV ALIGN=CENTER STYLE="width:600pt;margin:0.5cm;border:thin solid rosybrown;padding:0.5cm;
    Select a Product Category: &#xa0;&#xa0;
    <SELECT ID="cboCategory">
         <OPTION value=0>--- None Selected --- </OPTION>
         <OPTION value=1>Beverages</OPTION>
         <OPTION value=2>Condiments</OPTION>
         <OPTION value=3>Confections</OPTION>
         <OPTION value=4>Dairy Products</OPTION>
         <OPTION value=5>Grains/Cereals</OPTION>
         <OPTION value=6>Meat/Poultry</OPTION>
         <OPTION value=7>Produce</OPTION>
         <OPTION value=8>Seafood</OPTION>
    <object id=CSpace classid=CLSID:0002E556-0000-0000-C000-000000000046
    Dim c
    Set c = CSpace.Constants
    Sub cboCategory_OnChange()
       n = CInt(cboCategory.Value)
       If n <>0 Then
          CSpace.EnableEvents = False
          CSpace.Load "http://WebServer/MakeChart.asp?Category=" & cboCategory.options(n).Text
          CSpace.EnableEvents = True
          CSpace.Width = 600
          CSpace.Height = 250
       End If
    End Sub
    Sub CSpace_SelectionChange()
        If CSpace.SelectionType = c.chSelectionPoint Then
            'Set the series color to the default color.
            CSpace.Charts(0).SeriesCollection(0).Interior.Color = "RosyBrown"
            'Change the color of the selected point.
            CSpace.Selection.Interior.Color = "CornSilk"
        End If
    End Sub
  3. Start Microsoft Internet Explorer and browse to http://WebServer/Chart.htm, where WebServer is the name of your Web server.
  4. In the Web page that is rendered, select any product category from the drop-down list. A chart is displayed on the Web page.
  5. Select a data point (or bar) on the chart. The chart's SelectionChange event is fired and the data point changes color.
(c) Microsoft Corporation 2001, All Rights Reserved. Contributions by Lori B. Turner, Microsoft Corporation.


For more information on the Office XP Chart Component, see the following Microsoft Knowledge Base article and Web site:
286277 How To Use the Office XP Chart Component to Create Static Charts Server-Side
Using Office Web Components

For additional information on creating server-side charts by using the Office 2000 Chart component, click the following article numbers to view the articles in the Microsoft Knowledge Base:
244049 How To Use Server-Side Charting to Generate Charts Dynamically
264096 FILE: ChartGIF.exe Demonstrates Streaming an Office Web Chart GIF to the Browser


Article ID: 286278 - Last Review: August 23, 2005 - Revision: 2.3
  • Microsoft Office XP Web Components
  • Microsoft Visual Basic, Scripting Edition 5.0
  • Microsoft Active Server Pages 4.0
kbhowto kbofficewebchart KB286278
Retired KB Content Disclaimer
This article was written about products for which Microsoft no longer offers support. Therefore, this article is offered "as is" and will no longer be updated.

Give Feedback


Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from