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:
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
(c) Microsoft Corporation 2001, All Rights Reserved. Contributions by Lori B. Turner, Microsoft Corporation.
Additional query words: Chartspace GetPicture ExportPicture
Keywords: kbhowto kbofficewebchart KB286277