Article ID: 286277 - Last Review: August 23, 2005 - Revision: 2.2

HOWTO: Use the Office XP Chart Component to Create Static Charts with ASP

Retired KB ArticleRetired KB Content Disclaimer
View products that this article applies to.
This article was previously published under Q286277
Expand all | Collapse all

SUMMARY

In order to render a static chart (a picture of a chart) on a Web page using server-side code with the Office XP Chart component, you must first export the picture to a file on the Web server or on a share. The Office XP Chart component has a new method, GetPicture, that enables you to directly stream the picture as binary data using the Active Server Pages (ASP) Response object without the need to create a file. This article demonstrates how you can use the Office XP Chart component and its GetPicture method to create static charts with server-side code.
Back to the top

MORE INFORMATION

The following sample illustrates how you can create a static chart to render in a browser. The chart is built from data using the Northwind sample database, and then rendered in the browser in the Graphics Interchange Format (GIF) image format.

Sample

  1. Paste the following code into Notepad, and then save the code as GetChart.asp in the virtual root folder of your Web server. By default, the virtual root is C:\inetpub\wwwroot.
    <% Language = VBScript %>
<%
    Response.Buffer = TRUE
    Response.ContentType = "image/gif"

    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 the chart elements.
    cht.SeriesCollection(0).Interior.Color = "Rosybrown"
    cht.PlotArea.Interior.Color = "Wheat"
    Chartspace1.Border.Color = c.chColorNone

    'Return the new chart in GIF format.
    Response.BinaryWrite Chartspace1.GetPicture ("gif", 500, 400)
    Response.End
%>
    NOTE: In GetChart.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: 
    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 then save the code as ChartPic.htm in the virtual root directory of your Web server.
    <HTML>
<BODY>

<DIV ALIGN=CENTER STYLE="width:500px;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>

<IMG ID=ChtImg STYLE="Margin:0.5cm;Display:none"></IMG>

<SCRIPT LANGUAGE=VBScript>
Sub cboCategory_OnChange()
   n = CInt(cboCategory.Value)
   If n <>0 Then
      ChtImg.src="GetChart.asp?Category=" & cboCategory.options(n).Text
      ChtImg.Style.Display="inline"
   Else
      ChtImg.Style.Display="none"
   End If
End Sub
</SCRIPT>

</BODY>
</HTML>
  3. Start Internet Explorer and browse to http://WebServer/ChartPic.htm, where WebServer is the name of your Web server.
  4. In the Web page that is rendered, select any product category from the list. A chart in GIF format is displayed on the Web page.

Additional Notes


The following table lists the graphics filters that you can use with the GetPicture method and the corresponding ContentType for the ASP Response object:

   Graphics Filter          ContentType (or MIME Type)      
   ---------------          --------------------------
   gif                      image/gif
   jpeg or jpg              image/jpeg
   png                      image/png
Back to the top

REFERENCES

For more information about the Office 2002 Chart component, see the following Microsoft Support Web site:
http://support.microsoft.com/ofd (http://support.microsoft.com/ofd)
For additional information about a Microsoft Visual Basic .NET version of this article, click the following article number to view the article in the Microsoft Knowledge Base:
303016  (http://support.microsoft.com/kb/303016/ ) HOW TO: Use a DataSet with the Office XP Chart Component and ASP.NET
For additional information on creating server-side charts 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/ ) HOWTO: 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
286278  (http://support.microsoft.com/kb/286278/ ) HOWTO: Create an Interactive Office Chart Server-Side Using ASP
(c) Microsoft Corporation 2001, All Rights Reserved. Contributions by Lori B. Turner, Microsoft Corporation.

Back to the top
APPLIES TO
  • Microsoft Active Server Pages 4.0
  • Microsoft Visual Basic, Scripting Edition 5.0
  • Microsoft Office XP Web Components
Back to the top
Keywords: 
kbhowto kbofficewebchart KB286277
Back to the top
Retired KB ArticleRetired 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
 

Get Help Now

Contact a support professional by E-mail, Online, or Phone

Article Translations