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

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

SUMMARY

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.
Back to the top | Give Feedback

MORE INFORMATION

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.

Sample

  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-000000000046
style="margin:0.5cm;display:none"></object>

<SCRIPT LANGUAGE=VBScript>
Dim c
Set c = CSpace.Constants

Sub 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 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

</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.

Back to the top | Give Feedback

REFERENCES

For more information on the Office XP Chart Component, see the following Microsoft Knowledge Base article and Web site:
286277
(http://support.microsoft.com/kb/286277/ )
How To Use the Office XP Chart Component to Create Static Charts Server-Side
Using Office Web Components
http://support.microsoft.com/ofd
(http://support.microsoft.com/ofd)

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
(http://support.microsoft.com/kb/244049/ )
How To Use Server-Side Charting to Generate Charts Dynamically
264096
(http://support.microsoft.com/kb/264096/ )
FILE: ChartGIF.exe Demonstrates Streaming an Office Web Chart GIF to the Browser
Back to the top | Give Feedback

Properties

Article ID: 286278 - Last Review: August 23, 2005 - Revision: 2.3
APPLIES TO
  • Microsoft Office XP Web Components
  • Microsoft Visual Basic, Scripting Edition 5.0
  • Microsoft Active Server Pages 4.0
Keywords: 
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.
Back to the top | Give Feedback

Give Feedback

 
Back to the topBack to the top