Step 2: Creating a Web Page
The first step in adding an ActiveX control to a web page is to create the HTML page, and add the required code to insert, size and access the chart. The following three steps outline how to do this:
1. Create the web page that you want to add ComponentOne Chart to.
2. Insert and size the ActiveX control. To do this, add an <OBJECT> tag to your HTML code as follows:
<OBJECT ID="Chart3D1" WIDTH=473 HEIGHT=352
CLASSID="CLSID: 3D931501-4601-11CF-80B2-0020AF19EE14 "
CODEBASE="http://www.yoursite.com/olectra.cab">
</OBJECT>
When this HTML code is processed, the browser checks to see if ComponentOne Chart is registered on the computer where the page is being browsed from, and if not it will download and register the control.
If you want to specify a version the control to check for, add the Version element. This will avoid such problems as using new functionality with a prior version of the control. The following example shows how to specify the control version to search for:
<OBJECT ID="Chart3D1" WIDTH=473 HEIGHT=352
CLASSID="CLSID:3D931501-4601-11CF-80B2-0020AF19EE14 "
CODEBASE="http://www.yoursite.com/olectra.cab#Version=6,0,0,0">
</OBJECT>
3. To set properties, load data or access the chart, you must write VBScript code. For example, the following code sets the header, footer, ChartType and adds some data:
<SCRIPT LANGUAGE="VBScript">
Sub Window_OnLoad()
'Do the basic setup of the chart.
Chart3D1.AllowUserChanges = False
Chart3D1.IsBatched = True
Chart3D1.Border.Type = 4 'Plain
Chart3D1.Border.Width = 1
Chart3D1.Interior.BackGroundColor = RGB(&HFA, &HFA, &HD2)
Chart3D1.Interior.ForeGroundColor = RGB(0, 0, 0)
Chart3D1.ChartArea.Axes("X").MajorGrid.IsOnXYPlane = True
Chart3D1.ChartArea.Axes("X").MajorGrid.IsOnXZPlane = True
Chart3D1.ChartArea.Axes("Y").MajorGrid.IsOnXYPlane = True
Chart3D1.ChartArea.Axes("Y").MajorGrid.IsOnYZPlane = True
Chart3D1.ChartArea.Axes("Z").MajorGrid.IsOnXZPlane = True
Chart3D1.ChartArea.Axes("Z").MajorGrid.IsOnYZPlane = True
Chart3D1.ChartGroups(1).ChartType = 1 'Bar
Chart3D1.ChartGroups(1).Elevation.IsMeshed = True
Chart3D1.ChartGroups(1).Elevation.IsShaded = True
Chart3D1.ChartGroups(1).Elevation.ShadedTopColor = RGB(&HFF, &HF8, &HDC)
Chart3D1.ChartGroups(1).ElevationData.RowCount = 3
Chart3D1.ChartGroups(1).ElevationData.ColumnCount = 4
Chart3D1.ChartGroups(1).ElevationData.Value(1, 1) = 1.32608
Chart3D1.ChartGroups(1).ElevationData.Value(1, 2) = 1.4186
Chart3D1.ChartGroups(1).ElevationData.Value(1, 3) = 1.49956
Chart3D1.ChartGroups(1).ElevationData.Value(1, 4) = 1.56597
Chart3D1.ChartGroups(1).ElevationData.Value(2, 1) = 1.34446
Chart3D1.ChartGroups(1).ElevationData.Value(2, 2) = 1.43709
Chart3D1.ChartGroups(1).ElevationData.Value(2, 3) = 1.5124
Chart3D1.ChartGroups(1).ElevationData.Value(2, 4) = 1.56768
Chart3D1.ChartGroups(1).ElevationData.Value(3, 1) = 1.35423
Chart3D1.ChartGroups(1).ElevationData.Value(3, 2) = 1.44188
Chart3D1.ChartGroups(1).ElevationData.Value(3, 3) = 1.50643
Chart3D1.ChartGroups(1).ElevationData.Value(3, 4) = 1.54619
Chart3D1.ChartGroups(1).ElevationData.RowOrigin = 1
Chart3D1.ChartGroups(1).ElevationData.ColumnOrigin = 1
Chart3D1.ChartArea.PlotCube.XScale = 180
Chart3D1.ChartArea.PlotCube.YScale = 180
Chart3D1.ChartArea.PlotCube.Interior.BackGroundColor = RGB_
(&HD2, &HB4, &H8C)
End Sub
</SCRIPT>
Notes:
· The CLSID (pronounced Class ID) specified above is for the 32-bit ComponentOne Chart 3D.
· ComponentOne Chart is safe for scripting, which means that it (or any of its methods) will not write to the local storage when used within a secure Web browser. ComponentOne Chart will also not execute any binary code (for example, a. virus) that is passed to it as data.
· The Codebase element in the above example points to where the .CAB file (which contains all the files users must download to view the control) is located.
Loading Data or a File from a URL