Schongar P.VBScript unleashed.1997
.pdf
number of pixels by which the contents of the control should scroll in each direction. Positive values cause the contents of the control to scroll right and down. Negative values cause the contents of the controls to scroll in the opposite directions. The contents of the Marquee can scroll in both directions simultaneously, which is equivalent to a diagonal movement.
ScrollDelay
The ScrollDelay property is the delay between successive movements of the control's contents, and its value is expressed in milliseconds. This property, along with ScrollPixelsX and ScrollPixelsY, determines how fast the contents of the Marquee will scroll. Consider two Marquee controls with the following properties:
Marquee 1 |
Marquee 2 |
ScrollPixelsX=0 
ScrollPixelsX=0
ScrollPixelsY=10 
ScrollPixelsY=20
ScrollDelay=100 
ScrollDelay=200
Both controls scroll their contents at the same speed. The first control scrolls its contents by 10 pixels vertically every 100 milliseconds (10 times per second), while the second one scrolls them by 20 pixels at a time, but twice as frequently. Both controls scroll the document by 100 pixels per second, but the movement is smoother in the first control.
LoopsX, LoopsY
The LoopsX and LoopsY parameters specify how many times the contents will scroll in each direction. The value -1 causes the document to loop forever.
szURL
This is the name of the HTML document to be scrolled. The value of this property can be a local file or a URL of any page on the Web.
WhiteSpace
This property defines how much white (blank) space will appear between successive scrolls. If you want some extra space to appear before the next appearance of the document displayed in the Marquee control, set this property to the number of pixels of white space. The WhiteSpace value is expressed in pixels.
Zoom
The document displayed in the Marquee control can be larger or smaller than normal size. The Zoom property reduces or enlarges the document by a percentage value. Its default value is 100 and corresponds to actual size. The value 200 will cause the document to appear twice as large as normal.
WidthOfPage
The WidthOfPage property is identical to the WhiteSpace property but applies to the horizontal direction. It determines the width of an empty area that will be drawn between horizontal scrolls.
The Marquee ActiveX control provides two methods for controlling the scrolling, the Pause and Resume methods, which pause and resume scrolling respectively.
The Marquee control recognizes a number of events, too, which give you control over the control's operation. Some of the Marquee events aren't working with the current implementation of the control, but they are documented and you should expect to find a revised version of the control on Microsoft's Web site. Here are the descriptions of the Marquee control events:
OnStartOfImage, OnEndOfImage
The OnStartOfImage event is triggered immediately before the document starts scrolling and the OnEndOfImage event is triggered immediately after the URL has completely scrolled. Both event handlers accept an argument, the HorizontalOrVertical argument, which is H for horizontal scrolling and V for vertical scrolling.
OnBounce
The OnBounce event is triggered when the document bounces off one end of the control, if the scroll style is set to Bounce (properties ScrollStyleX, ScrollStyleY). This event handler accepts an argument (SideBouncedOff) that tells you on which of four possible sides the document bounced (L for left, R for right, T for top, and B for bottom).
OnLMouseClick
You can capture mouse clicks on the control, too, with the OnLMouseClick event. This event is the same as the Click event of other ActiveX controls, but it's named differently.
The Marquee Example
Figure 9.6 shows the Marquee page (which you'll find in this chapter's folder on the CD). The Marquee page contains two Marquee controls, which both display the Sams Web site. One of them scrolls its contents vertically and the other one horizontally. The two command buttons next to the Marquees demonstrate the Zoom property and the Pause/ Resume methods. When the user clicks the ZOOM button, the contents of the top Marquee control are enlarged to 120% and the button's caption becomes NORMAL. If clicked again, it restores the contents of the first control to normal size.
Figure 9.6 : The Marquee example demonstrates the Zoom property and the Pause/Resume events.
The second button temporarily stops the scrolling of the document in the Marquee control, and its caption becomes RESUME. If clicked again, the scrolling resumes and the button's caption becomes PAUSE again. The code of the Marquee document is shown in Listing 9.4.
Listing 9.4. The Marquee document.
1:<HTML>
2:<HEAD>
3:<TITLE>ActiveX Marquee Methods</TITLE>
4:<SCRIPT LANGUAGE="VBScript">
5: <!--
6:Sub CommandButton1_Click()
7:If CommandButton1.Caption="ZOOM" then
8:Marquee1.Zoom = 125
9:CommandButton1.Caption="NORMAL"
10:Else
11:Marquee1.Zoom = 100
12:CommandButton1.Caption="ZOOM"
13:End If
14:End Sub
15:
16:Sub CommandButton2_Click()
17:If CommandButton2.Caption="PAUSE" Then
18:Marquee2.Pause
19:CommandButton2.Caption="RESUME"
20:Else
21:Marquee2.Resume
22:CommandButton2.Caption="PAUSE"
23:End If
24:
25:End Sub
26:-->
27:</SCRIPT>
29:</HEAD>
30:<BODY>
31:<OBJECT ID="Marquee1" WIDTH=400 HEIGHT=200 align=CENTER BORDER=1 HSPACE=5
32:CLASSID="CLSID:1A4DA620-6217-11CF-BE62-0080C72EDD2D">
33:<PARAM NAME="WhiteSpace" VALUE="42">
34:<PARAM NAME="szURL" VALUE="http://www.sams.com">
35:<PARAM NAME="_ExtentX" VALUE="124">
36:<PARAM NAME="_ExtentY" VALUE="125">
37:<PARAM NAME="Zoom" VALUE="100">
38:<PARAM NAME="ScrollPixelsX" VALUE="0">
39:<PARAM NAME="ScrollPixelsY" VALUE="4">
40:<PARAM NAME="WidthOfPage" VALUE="300">
41:</OBJECT>
42:<OBJECT ID="CommandButton1" WIDTH=215 HEIGHT=48
43:CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
44:<PARAM NAME="Caption" VALUE="ZOOM">
45:<PARAM NAME="Size" VALUE="5689;1270">
46:<PARAM NAME="FontName" VALUE="Arial">
47:<PARAM NAME="FontHeight" VALUE="220">
48:<PARAM NAME="FontCharSet" VALUE="0">
49:<PARAM NAME="FontPitchAndFamily" VALUE="2">
50:<PARAM NAME="ParagraphAlign" VALUE="3">
51:<PARAM NAME="FontWeight" VALUE="0">
52:</OBJECT>
53:<P>
54:<OBJECT ID="Marquee2" WIDTH=400 HEIGHT=200 align=CENTER BORDER=1 HSPACE=5
55:CLASSID="CLSID:1A4DA620-6217-11CF-BE62-0080C72EDD2D">
56:<PARAM NAME="szURL" VALUE="http://www.sams.com">
57:<PARAM NAME="_ExtentX" VALUE="124">
58:<PARAM NAME="_ExtentY" VALUE="125">
59:<PARAM NAME="Zoom" VALUE="100">
60:<PARAM NAME="ScrollPixelsX" VALUE="4">
61:<PARAM NAME="ScrollPixelsY" VALUE="0">
62:</OBJECT>
63:
64:<OBJECT ID="CommandButton2" WIDTH=215 HEIGHT=48
65:CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
66:<PARAM NAME="Caption" VALUE="PAUSE">
67:<PARAM NAME="Size" VALUE="5689;1270">
68:<PARAM NAME="FontName" VALUE="Arial">
69:<PARAM NAME="FontHeight" VALUE="220">
70:<PARAM NAME="FontCharSet" VALUE="0">
71:<PARAM NAME="FontPitchAndFamily" VALUE="2">
72:<PARAM NAME="ParagraphAlign" VALUE="3">
73:<PARAM NAME="FontWeight" VALUE="0">
74:</OBJECT>
75:</BODY>
76:</HTML>
The Chart Control
The Chart control presents numeric data as graphs, and supports a variety of different types and styles of graphs, such as pie charts and bar graphs. You supply the data and the parameters of the graph, and the Chart control generates the graph on-the-fly. Figure 9.7 is a collection of various chart types generated with the Chart control.
Figure 9.7 : Various types of graphs produced by the Chart control.
There are seven chart types you can produce with the Chart control: Pie, Point, Line, Area, Bar, Column, and Stocks. In addition, there are more than one flavor of each of these styles. Most of these types have the following variations: Simple, Stacked, and Full. Use the Chart document, which we will present shortly, to experiment with the various graph types and styles.
The Graph control is in essence a mechanism for plotting data. Because of the numerous parameters a data plot can have, the Chart control has a long list of properties. Yet, there are no methods (short of the About method, which displays information about the control) and no events. Let's start with the simpler properties that control the appearance of the chart.
Rows, Columns
These two values determine the total number of data points to be plotted. Obviously, you must supply Rows ´ Columns data points to the control. (In the section "Manipulating the Chart Control's Data," you'll see how to specify the data to be plotted.)
HGridStyle, VGridStyle
These two properties determine the type of horizontal and vertical grid that will be placed on the graph, and they can have one of the following values:
0No grid
1Solid grid
2Bold grid
3Dotted grid
4Bold dotted grid
ChartType
The ChartType property determines the graph's type and may have one of the following values:
0Simple pie chart
1Special pie chart
2Simple point chart
3Stacked point chart
4Full point chart
5Simple line chart
6Stacked line chart
7Full line chart
8Simple area chart
9Stacked area chart
10Full area chart
11Simple column chart
12Stacked column chart
13Full column chart
14Simple bar chart
15Stacked bar chart
16Full bar chart
17HLC (high low close) simple stock chart
18HCL WSJ stock chart
19OHLC (open high low close) simple stock chart
20OHCL WSJ stock chart
ColorScheme
There are five predefined color schemes (0, 1, 2, 3, and 4), and you can set one of them for your chart by setting the
ColorScheme property.
BackStyle
This property determines whether the graph's background will be transparent (BackStyle=0) or not (BackStyle=1).
Scale
This is a scaling factor for the graph data and it can go up to 100%, but no more.
RowName
This property specifies a row name. (The row names are the legends that appears along the Y axis.)
ColumnName
This property specifies a column name. (The column names are the legends that appear along the X axis.)
DisplayLegend
Use this property to view (Legend=-1) or hide (Legend=0) the chart's legend.
GridPlacement
This property controls how the grid is drawn. The grid lines can be drawn either over the chart (foreground) or below the chart (background), and it can have one of the two values
0Grid lines drawn behind the graph
1Grid lines drawn on top of the graph
Manipulating the Chart Control's Data
To manipulate the chart's data, the Chart control provides the RowIndex and ColumnIndex properties. Imagine that the data to be plotted is stored in a tabular arrangement, with Rows rows and Columns columns. Each row of data in the table corresponds to one line in a line graph, one color in an area graph, or one set of bars with a common color in a bar graph. Successive data for each row is stored in successive columns. To address a specific data point, you must first set the RowIndex and ColumnIndex properties of the control. To address the second data point of the fourth data set, use the following statements:
Chart1.RowIndex=3 |
' 4 th |
row |
Chart1.ColumnIndex=1 |
' 2 |
nd column |
To set the value of this point, use the DataItem property:
Chart1.DataItem=1002
In other words, you must first select the data point you want to access and then set its value. To assign values to an entire
row (which is a data set), use a loop like the following one:
Chart1.RowIndex=3 |
' 3 rd data set |
For i=0 to Chart1.Rows-1
Chart1.ColumnIndex=i
Chart1.DataItem=DataPoints
Next
You can also set the legends of the chart in a similar way. The ColumnName and RowName properties are the legends of each dataset and each point along the dataset, respectively. The row names appear along the X axis, and the column names appear in a small box on the graph, as shown in Figure 9.8.
Figure 9.8 : The legends on the chart are specified with the RowName and ColumnName properties.
Supplying Data Over the Internet
The URL property of the Chart control lets you specify the data to be plotted with the remaining parameters of the graph in a file, which you can specify by means of its URL. In other words, if you want to post data that changes daily on your Web, you don't have to reprogram your pages. You can just create a file with the new data and have a Chart control on one of your pages request them from the server. This is done with the URL property, which is assigned the URL of the file with the control's data on the server.
The format of this data file is as follows:
The first line describes the ChartType property and contains a number between 0 and 20, as described earlier.
The second line contains an integer, which is the number of rows.
The third line contains another integer, which is the number of columns, followed by the optional column names (separated by tab characters).
The fourth line, and any additional lines beyond the fourth, contains the data for each row. The first element in each of these lines can be the name of the row (optional). Successive data points are separated by tab characters.
The following data file specifies a chart type 9 (stacked area) with 3 rows and 5 columns. The column names are 1996, 1997, 1998, 1999, and 2000. The first row's name (first dataset) is Domestic, the second row's name is Overseas, and the third row's name is Total.
9
3
5 |
1996 |
1997 |
1998 |
1999 |
2000 |
Domestic |
1234 |
2242 |
3342 |
4434 |
4954 |
Overseas |
845 |
1045 |
1212 |
1504 |
2045 |
Total |
2079 |
3287 |
4554 |
5938 |
6999 |
If you save these lines to a file on the server and assign its name to the Chart control's URL property, the graph described by these values will be plotted automatically. You can also combine this technique with the control's Reload method, which forces the Chart control to read the data again and replot them; you can provide your viewers with graphs based on real-time data. The titles for the graph's columns and rows are optional, and you can omit them. They are used for displaying a legend; a graph can have no legends, legends for one axis only, or legends for both axes.
The Chart Example
Figure 9.9 shows the Chart project, which demonstrates several of the properties of the Chart control. The Chart1 example is simple, but it lets you experiment with the various properties of the control we discussed so far.
Figure 9.9 : The Chart document lets you adjust many of the parameters of a graph.
The layout of Figure 9.9 contains a Chart control and four drop-down List controls. Each list contains all the settings for a specific property. The first list controls the type of the graph, the second and third lists control the style of the grid, and the last list controls whether the grid will be drawn in front of or behind the graph. Drop down each list, select a setting, and see how it affects the graph.
Start the ActiveX Control Pad application and create a new layout. To place the Chart control on it, you must add its icon to the toolbox. The Chart control is called Chart Object in the Insert ActiveX control dialog box. Once the Chart control has been placed on the layout, the following definition is inserted in the ALX file. (You can copy this definition and paste it in your own projects.)
<OBJECT ID="iechart1"
CLASSID="CLSID:FC25B780-75BE-11CF-8B01-444553540000"
STYLE="TOP:58pt;LEFT:25pt;WIDTH:256pt;HEIGHT:182pt;
ZINDEX:0;"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/iechart.
ocx#Version=4,70,0,
1161">
<PARAM NAME="_ExtentX" VALUE="9022">
<PARAM NAME="_ExtentY" VALUE="6429">
<PARAM NAME="Rows" VALUE="4">
<PARAM NAME="Columns" VALUE="3">
<PARAM NAME="ChartType" VALUE="8">
<PARAM NAME="Data[0][0]" VALUE="9">
<PARAM NAME="Data[0][1]" VALUE="10">
<PARAM NAME="Data[0][2]" VALUE="11">
<PARAM NAME="Data[1][0]" VALUE="7">
<PARAM NAME="Data[1][1]" VALUE="11">
<PARAM NAME="Data[1][2]" VALUE="12">
<PARAM NAME="Data[2][0]" VALUE="6">
<PARAM NAME="Data[2][1]" VALUE="12">
<PARAM NAME="Data[2][2]" VALUE="13">
<PARAM NAME="Data[3][0]" VALUE="11">
<PARAM NAME="Data[3][1]" VALUE="13">
<PARAM NAME="Data[3][2]" VALUE="14">
<PARAM NAME="HorizontalAxis" VALUE="0">
<PARAM NAME="VerticalAxis" VALUE="0">
<PARAM NAME="hgridStyle" VALUE="0">
<PARAM NAME="vgridStyle" VALUE="0">
<PARAM NAME="ColorScheme" VALUE="0">
<PARAM NAME="BackStyle" VALUE="1">
<PARAM NAME="Scale" VALUE="100">
<PARAM NAME="DisplayLegend" VALUE="1">
<PARAM NAME="BackColor" VALUE="16777215">
<PARAM NAME="ForeColor" VALUE="32768">
</OBJECT>
Notice that except for a few standard properties, this definition includes sample data points. The Data array is where all data points are stored. You can edit this definition to change the data or add more data points (and datasets, if you have to). The first index corresponds to the Rows property and the second index to the Columns property.
When the layout is loaded, it populates the drop-down lists and assigns legends to the chart's rows and columns via the RowName and ColumnName property. The actual code of the application, which changes the graph's properties, is quite simple. It picks the property number from the list and assigns it to the appropriate property. The Change event of the first ComboBox control signals that the user has changed the graph's type. Here is the event handler for the event:
Sub ComboBox1_Change()