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="Chart2D1" WIDTH=473 HEIGHT=352
CLASSID="CLSID:92D71E93-25A8-11CF-A640-9986B64D9618"
CODEBASE="olectra.cab">
</OBJECT>
When this HTML code is processed, the browser checks to see if you have ComponentOne Chart registered, and if not it will download and register the control.
If you also 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="Chart2D1" WIDTH=473 HEIGHT=352
CLASSID="CLSID:92D71E93-25A8-11CF-A640-9986B64D9618"
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()
'Declare a Variable
Dim x
'Batch the updates to the Chart
Chart2D1.IsBatched = True
'Setup the Header
Chart2D1.Header.Text = "Statistics By Region"
Chart2D1.Header.Border.Type = 3 'oc2dBorderShadow
Chart2D1.Header.Border.Width = 4
Chart2D1.Header.Interior.BackgroundColor = RGB(190, 190, 190)
Chart2D1.Header.Font.Bold = True
'Setup the Footer
Chart2D1.Footer.Text = "Nowhere"
Chart2D1.Footer.Border.Type = 3 'oc2dBorderShadow
Chart2D1.Footer.Border.Width = 4
Chart2D1.Footer.Interior.BackgroundColor = RGB(210, 210, 210)
Chart2D1.Footer.Font.Size = 10
Chart2D1.Footer.Font.Bold = True
'Add some data to the Chart
Chart2D1.ChartGroups(1).ChartType = 3 'oc2dTypePie
Chart2D1.ChartGroups(1).Data.NumSeries = 5
Chart2D1.ChartGroups(1).Data.NumPoints(1) = 1
Chart2D1.ChartGroups(1).Data.y(1, 1) = 20
Chart2D1.ChartGroups(1).Data.y(2, 1) = 15
Chart2D1.ChartGroups(1).Data.y(3, 1) = 25
Chart2D1.ChartGroups(1).Data.y(4, 1) = 30
Chart2D1.ChartGroups(1).Data.y(5, 1) = 20
'Give the Chart a 3D look
Chart2D1.ChartArea.View3d.Depth = 20
Chart2D1.ChartArea.View3d.Elevation = 30
'Setup some colors and borders
Chart2D1.Interior.BackgroundColor = RGB(170, 170, 170)
Chart2D1.Interior.ForegroundColor = RGB(0, 0, 0)
Chart2D1.Border.Type = 2 'oc2dBorder3DIn
Chart2D1.Border.Width = 5
Chart2D1.ChartArea.Border.Type = 1 'oc2dBorder3DOut
Chart2D1.ChartArea.Border.Width = 3
'Allow users to bring up our Property Page
Chart2D1.AllowUserChanges = True
'Add 5 labels to the Chart
For x = 1 to 5
Chart2D1.ChartLabels.Add
Next
'Setup the Labels
For x = 1 to 5
Chart2D1.ChartLabels(x).Name = "Label" & x
Chart2D1.ChartLabels(x).AttachMethod = 2 'oc2dAttachDataIndex
Chart2D1.ChartLabels(x).AttachDataIndex.Series = x
Chart2D1.ChartLabels(x).AttachDataIndex.Point = 1
Chart2D1.ChartLabels(x).Font.Size = 10
Chart2D1.ChartLabels(x).Font.Bold = True
Chart2D1.ChartLabels(x).Border.Type = 3 'oc2dBorderShadow
Chart2D1.ChartLabels(x).Border.Width = 2
Chart2D1.ChartLabels(x).Interior.BackgroundColor = RGB(255, 235, 205)
Chart2D1.ChartLabels(x).IsConnected = True
Chart2D1.ChartLabels(x).Offset = 10
Next
'Set the text of each of the labels
Chart2D1.ChartLabels(1).Text = "North"
Chart2D1.ChartLabels(2).Text = "South East"
Chart2D1.ChartLabels(3).Text = "South West"
Chart2D1.ChartLabels(4).Text = "West"
Chart2D1.ChartLabels(5).Text = "East"
'Force the location of the Chart to give it more room
Chart2D1.ChartArea.PlotArea.Top.Value = 40
Chart2D1.ChartArea.PlotArea.Bottom.Value = 0
'Go back to normal Chart updates
Chart2D1.IsBatched = False
End Sub
-->
</SCRIPT>
Notes:
· The CLSID (pronounced Class ID) specified above is for the 32-bit ComponentOne Chart 2D.
· 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. For more information on creating .CAB files, see Step 4: Packaging the Control.
Loading Data or a File From a URL