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

This article was previously published under Q286278
This article has been archived. It is offered "as is" and will no longer be updated.
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        rs.MoveNext    Loop    'Close the connection to the database.    rs.close    conn.Close    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    Response.End%>						
    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.
    <HTML><BODY><DIV ALIGN=CENTER STYLE="width:600pt;margin:0.5cm;border:thin solid rosybrown;padding:0.5cm;font-family:sans-serif;font-size:14;background-color:cornsilk">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></SELECT></DIV><object id=CSpace classid=CLSID:0002E556-0000-0000-C000-000000000046style="margin:0.5cm;display:none"></object><SCRIPT LANGUAGE=VBScript>Dim cSet c = CSpace.ConstantsSub cboCategory_OnChange()   n = CInt(cboCategory.Value)   If n <>0 Then      CSpace.Style.Display="inline"      CSpace.Clear      CSpace.EnableEvents = False      CSpace.Load "http://WebServer/MakeChart.asp?Category=" & cboCategory.options(n).Text      CSpace.EnableEvents = True      CSpace.Width = 600      CSpace.Height = 250      CSpace.Refresh   Else      CSpace.Style.Display="none"   End IfEnd SubSub 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 IfEnd Sub</SCRIPT></BODY></HTML>					
  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
owc webchart

Article ID: 286278 - Last Review: 01/11/2015 04:00:23 - Revision: 2.3

Microsoft Office XP Web Components, Microsoft Visual Basic, Scripting Edition 5.0, Microsoft Active Server Pages 4.0

  • kbnosurvey kbarchive kbhowto kbofficewebchart KB286278