Microsoft KB Archive/286278

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

Article ID: 286278

Article Last Modified on 8/23/2005

-

APPLIES TO


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

-



This article was previously published under Q286278



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.



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
  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=&quot;vbscript&quot; CodePage=&quot;65001&quot;%>

<%   Response.Buffer = TRUE Response.ContentType = &quot;text/xml&quot;

Dim sCat sCat = Request.QueryString(&quot;Category&quot;) 'Connect to the SQL Server Northwind database. Dim conn, rs   Set conn = CreateObject(&quot;ADODB.Connection&quot;) conn.Open &quot;Provider=SQLOLEDB;Data Source=SQLServer;Initial Catalog=Northwind;UID=sa&quot;

'Execute a query that returns records based on the Category ID. Set rs = CreateObject(&quot;ADODB.Recordset&quot;) rs.Open &quot;SELECT ProductName, ProductSales From [Product Sales for 1997] &quot; & _ &quot;Where CategoryName='&quot; & sCat & &quot;'&quot;, 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(&quot;ProductName&quot;) aSales(i) = rs.Fields(&quot;ProductSales&quot;) 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(&quot;OWC10.Chartspace&quot;) 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, &quot;Sales&quot; cht.SetData c.chDimCategories, c.chDataLiteral, aNames cht.SeriesCollection(0).SetData c.chDimValues, c.chDataLiteral, aSales

'Format chart elements. Chartspace1.Border.Color = &quot;Rosybrown&quot; ChartSpace1.Border.Weight = c.owcLineWeightMedium cht.SeriesCollection(0).Interior.Color = &quot;Rosybrown&quot; cht.PlotArea.Interior.Color = &quot;Wheat&quot;

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



Select a Product Category: &#xa0;&#xa0;

 --- None Selected ---  Beverages Condiments</OPTION> Confections</OPTION> Dairy Products</OPTION> Grains/Cereals</OPTION> Meat/Poultry</OPTION> Produce</OPTION> Seafood</OPTION> </SELECT>

</DIV>

<object id=CSpace classid=CLSID:0002E556-0000-0000-C000-000000000046 style=&quot;margin:0.5cm;display:none&quot;>

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

Sub cboCategory_OnChange n = CInt(cboCategory.Value) If n <>0 Then CSpace.Style.Display=&quot;inline&quot; CSpace.Clear CSpace.EnableEvents = False CSpace.Load &quot;http://WebServer/MakeChart.asp?Category=&quot; & cboCategory.options(n).Text CSpace.EnableEvents = True CSpace.Width = 600 CSpace.Height = 250 CSpace.Refresh Else CSpace.Style.Display=&quot;none&quot; 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 = &quot;RosyBrown&quot; 'Change the color of the selected point. CSpace.Selection.Interior.Color = &quot;CornSilk&quot; End If End Sub

</SCRIPT>

</BODY> </HTML> </li> Start Microsoft Internet Explorer and browse to http://WebServer/Chart.htm, where WebServer is the name of your Web server.</li> In the Web page that is rendered, select any product category from the drop-down list. A chart is displayed on the Web page.</li> Select a data point (or bar) on the chart. The chart's SelectionChange event is fired and the data point changes color.</li></ol>

(c) Microsoft Corporation 2001, All Rights Reserved. Contributions by Lori B. Turner, Microsoft Corporation.

<div class="references_section">