Knowledge Base

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

Article ID: 286277

Article Last Modified on 8/23/2005

APPLIES TO

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

This article was previously published under Q286277

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.

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

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

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:    

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

Start Internet Explorer and browse to http://WebServer/ChartPic.htm, where WebServer is the name of your Web server.
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

REFERENCES

For more information about the Office 2002 Chart component, see the following Microsoft Support Web site:

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 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 HOWTO: Use Server-Side Charting to Generate Charts Dynamically

264096 FILE: ChartGIF.exe Demonstrates Streaming an Office Web Chart GIF to the Browser

286278 HOWTO: Create an Interactive Office Chart Server-Side Using ASP

Additional query words: Chartspace GetPicture ExportPicture

Keywords: kbhowto kbofficewebchart KB286277

Microsoft KB Archive/286277

Contents