The Chart Web Component

The Office XP Chart component can display data from various sources, such as other web components (Spreadsheet, PivotTable, and Data Source controls), arrays, tab-delimited strings, and ADO recordsets. When the Chart component is bound to other web components, changes that are made to the data placed in those controls are immediately displayed on the chart. To create complex charts, you need to know numerous properties and methods that the chart object exposes. You can learn a lot about the Chart component object model from the OWCDCH10.CHM file located in the folder C:\Program Files\Common Files\Microsoft Shared\Web Compo-nents\10\1033.

This section will get you started creating simple charts on a web page. The first chart that you create will be bound to the spreadsheet component that was discussed in an earlier section. The second example will demonstrate how you can create multiple charts within the Web Chart component. Both examples use the client-side scripting code (VBScript) to create an HTML file, and they both chart data obtained dynamically from the Microsoft Access sample database (Northwind.mdb).

Charts are created within a chart workspace. The chart workspace can contain more than one chart (currently you can place as many as 16 charts in a chart workspace). Each chart in a workspace is represented by a chChart object. When the chart workspace is first created, it is empty. To insert a Chart web component on a web page, add an <OBJECT> tag and specify its class ID. The following statement will create a chart workspace named chrtSpace on an HTML page:

<object classid="clsid:0002E500-0000-0000-C000-000000000046" id= _ "chrtSpace"></object>

Use the Clear method to clear the chart workspace of any existing charts. The chart workspace will then be completely empty.

To add a chart to the chart workspace, use the Add method of the chChart object, as follows:


The above statement creates a new chart. At this time, the chart is blank. To place data into the chart, use the SetData method. This method has three arguments, as described in the following table.

Argument Name Description

Dimension Specifies which part of the chart you want to populate with data. The following constants refer to the portion of the chart and are passed to the SetData method with the indicated enumerated constant:

Argument Name Description

Dimension (cont.)












ThetaValues chDimSeriesNames chDimCategories chDimValues chDimYValues chDimXValues chDimOpenValues chDimCloseValues chDimHighValues chDimLowValues chDimBubbleValues chDimRValues chThetaValues



Specifies the source of data. This can be done via one of the following enumerated constants: chDataBound, chData-Linked, chDataLiteral, and chDataNone. The two code examples in this section demonstrate how to use the chDataBound and chDataLiteral constants.

Used to send the actual data for the chart. If the chart is bound to the Spreadsheet web component, you can specify an Excel range (for example, A2:A11). If the chart is bound to the ADO recordset, place the field name here (for example, rst.Fields(1)). If the data for the chart comes from an array or a tab-delimited string, place the name of the variable representing the array or string here.

The following code fragment illustrates the use of the SetData method for a chart bound to the Spreadsheet component. Notice that the data is added here to the Series object.

With objChart.SenesCollection(0)

.SetData cons.chDimSeriesNames, chDataBound,"B1" .SetData cons.chDimCategories, chDataBound,"A2:A9" .SetData cons.chDimValues, chDataBound,"B2:B9" End With

In the above code fragment, chDimSeriesNames, chDimCategories, and chDimValues are passed as the first argument of the SetData method. Notice that the names of these arguments are prefaced by the "cons" object. This object has been defined earlier in the VBScript code, like this:

set cons = chrtSpace.Constants

Because VBScript does not support the use of named constants, you must create a reference by using the Constants property, as shown above, and preface the constants with this object.

The chDataBound constant in the code snippet above serves as the DataSourceIndex argument of the SetData method. When the chart is bound to the first data source, you can use the data source index of 0 as the second argument of the SetData method, like this:

With objChart.SeriesCollection(0)

.SetData cons.chDimSeriesNames, 0,"B1" .SetData cons.chDimCategories, 0,"A2:A9" .SetData cons.chDimValues, 0,"B2:B9"

End With

The index of 0 specifies the first data source in the WCDataSources collection. If your chart is based on multiple data sources, you can set data from the second data source by using index 1, and so on.

The third argument of the SetData method in the code fragment above uses an Excel Range reference to indicate that the data for the indicated chart portion is located in the specified worksheet range. Hence, "B1" above tells VBScript that the name of the series should be taken from cell B1. If you change the contents of cell B1, the name that appears in the legend will also be changed. It is not required, however, to bind the series name to the spreadsheet. You can use the SeriesCollection (0) Caption property to specify an independent name for the series. The "A2:A9" reference in the code above tells where the names of the categories are, and "B2:B9" indicates the location of data to be graphed. If the chart is bound to a recordset, you will place the required recordset field name instead of range references, like this:

With myChart

.SetData cons.chDimCategories, 0, rst.Fields(0).Name .SetData cons.chDimValues, 0, rst.Fields(1).Name

End With

If you need to give your users the capability of saving the chart as a graphics file, use the ExportPicture method of the Chart component to generate a GIF, JPG, or PNG image of that chart, like this:

myChart.ExportPicture Server.MapPath(chartfilename), "gif", _ width:=400, height:=200

Figure D-4 displays the result of opening the HTML file in a web browser created by the code that follows. Notice that the Spreadsheet component is presented here without its toolbar. Also, the control is sized exactly to the data, and its viewable range is limited to the data. The user is not allowed to scroll to other areas of the spreadsheet. Change the data in the spreadsheet, and notice that the chart is updated accordingly.

To prepare the web page shown in Figure D-4, open Notepad and enter the following HTML and VBScript code. Ensure that the path points to the Northwind database on your server. Save the file as WebChart.htm. You can find this file on the companion CD-ROM.

0 0

Post a comment