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

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

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>

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

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

SUMMARY

MORE INFORMATION

Sample

REFERENCES