Tutorial 10 - Walk-through VBScript examples

Contents page
Previous | Next

Tutorial 10 - Walk-through VBScript examples

Contents

TeeChart Pro Activex object definition

The basic Chart
Using MS FrontPage
Changing Chart parameters at runtime
Using TeeChart events

Using other TeeChart components

TeeChart Pro Activex object definition

The basic Chart

The following object code describes the Chart below. No changed design time parameters are saved with the Chart in this format other than Chart Width and Height.

<object 
   id=Chart1 
   width=500 
   height=250 
   type="application/x-oleobject" 
   hspace=0
   vspace=0 
   align=center
   classid="CLSID:FCB4B50A-E3F1-4174-BD18-54C3B3287258"
   CODEBASE="teechart2017.ocx#Version=9,0,0,0">
</object>

Please note that if the control is registered with the machine the codebase can be removed but that no minor version control will take place.

We can save design time changes using Microsoft's FrontPage. The Base64 definitions below have been created with Frontpage, after making a few changes to the TeeChart Title, plus enabling Panel Gradient.

*Version note
Please note a change between TeeChart versions. Up to v5.02 the Base64 output appeared as the following. This was generated via TeeChart's IPersistStream interface and was assigned as OBJECT data.

Format up to v5.02+

<OBJECT ID="TChart1" WIDTH=400 HEIGHT=251
 CLASSID="CLSID:B6C10489-FB89-11D4-93C9-006008A7EED4"
 data="DATA:application/x-oleobject;BASE64,iQTBton71BGTyQBg
 CKfu1FRQRjALVENoYXJ0Q2hhcnQABExlZnQCAANUb3ACAAVXaWR0aAOQAQZIZWl
 naHQD+wAQR3JhZGllbnQuVmlzaWJsZQkQVGl0bGUuRm9udC5Db2xvcgcHY2xCbG
 FjaxFUaXRsZS5Gb250LkhlaWdodAL0EFRpdGxlLkZvbnQuU3R5bGULBmZzQm9sZ
 AASVGl0bGUuVGV4dC5TdHJpbmdzAQYtVGVlQ2hhcnQgbW9kaWZpZWQgYW5kIHNh
 dmVkIGluIEJhc2U2NCBmb3JtYXQgBg53aXRoIEZyb250cGFnZQAAAAAAAAACAAA
 AAP////8="
</OBJECT>

Version 5.03 output has been modified to that of below. The change was made because support for TeeChart's IPersistStream interface was discontinued by Internet Explorer v5.5 sp2 and later versions. This caused access to saved Chart characteristics as 'data' to become unuseable. IE5.5+ supports the generation of the above saved information as PARAMs via the IPersistPropertyBag interface. As prior versions of Internet Explorer also support IPersistPropertyBag it is backwards compatible. The change will not adversely affect display of saved Charts in prior versions of IE.

Format TeeChart 5.03+

<OBJECT ID="TChart1" WIDTH=400 HEIGHT=251
 CLASSID="CLSID:B6C10489-FB89-11D4-93C9-006008A7EED4">
<param name="Base64" value="VFBGMAtUQ2hhcnRDaGFydAAETGVmdAIAA1RvcAIABVdpZHRoA5UBBkhlaWdodAP7ABBHcmFkaWVu
dC5WaXNpYmxlCRBUaXRsZS5Gb250LkNvbG9yBwdjbEJsYWNrEVRpdGxlLkZvbnQuSGVpZ2h0AvQQ
VGl0bGUuRm9udC5TdHlsZQsGZnNCb2xkABJUaXRsZS5UZXh0LlN0cmluZ3MBBi1UZWVDaGFydCBt
b2RpZmllZCBhbmQgc2F2ZWQgaW4gQmFzZTY0IGZvcm1hdCAGDndpdGggRnJvbnRwYWdlAAAAAAAA
AAIAAAAA/////w==">
</OBJECT>

Format TeeChart 2017

<object id=TChart1 classid="CLSID:FCB4B50A-E3F1-4174-BD18-54C3B3287258">
  <param name="Base64" value="VFBGMAtUQ2hhcnRDaGFydAAETGVmdAIAA1RvcAIABVdpZHRoA/QBBkhlaWdodAP6ABBHcmFkaWVu
dC5WaXNpYmxlCRJUaXRsZS5UZXh0LlN0cmluZ3MBBhJUZWVDaGFydCBQcm8gQVggdjcAAAAAAAAA
AgAAAAD/////">
</object>

Changing Chart parameters at runtime

Let's put a button on the page to run a VB script to put some data on the last Chart:

<SCRIPT LANGUAGE="VBScript">
    SUB FillChart
     TChart1.AddSeries( 1 ) 
     'Notice the replacement here of scBar Enum variable
     'by integer value 1. See 'Enum constants' in helpfile
     TChart1.Series(0).Clear  
     TChart1.Series(0).Add 100, "Apples", RGB(255,0,0)
     TChart1.Series(0).Add 300, "Pears", RGB(0,255,0)
     TChart1.Series(0).Add 200, "Bananas", RGB(255,255,0)
    END SUB
</SCRIPT>
<INPUT TYPE=BUTTON VALUE="Example: Fill values using Visual Basic Script" NAME="cdmChart" onClick="FillChart">

Using VBScript we can change a variety of Chart parameters, for example:

<SCRIPT LANGUAGE="VBScript">
    SUB ChangeChart
     TChart1.Panel.Gradient.EndColor = RGB(0,0,193)
     TChart1.Header.Font.Color = RGB(255,255,255)
     TChart1.Series(0).VerticalAxis = 1
    END SUB
</SCRIPT>
<INPUT TYPE=BUTTON VALUE="Change Chart appearance" NAME="cdmChart2" onClick="ChangeChart">

Using TeeChart events

Event handling code should be placed before the Object triggering the event. In this example, again modifying the last Chart above, the code as reproduced below, is placed above the Chart in the HTML page. After the Series data is plotted the AfterDraw event is triggered and the Canvas code draws a rectangle and prints a message if there are more than 3 points in Series0.

<!--
Sub TChart1_OnAfterDraw()
 If TChart1.SeriesCount > 0 then
  If TChart1.Series(0).Count > 3 then
    TChart1.Canvas.Brush.Color = RGB(255,255,255)
    TChart1.Canvas.Rectangle 90, 90, 200, 120
    TChart1.Canvas.Font.Bold = True
    TChart1.Canvas.TextOut 100,100, (TChart1.Series(0).Count) + " data points"
  end if
 end if
end sub
-->

Use this button to refill the Chart and trigger the event.

Using other TeeChart components

The TeeChart Pro AX navigator/controlbar component, TeeCommander may be added to the HTML page and associated with a TeeChart:

The code may be placed in the Window_Onload event to automatically connect the Chart to TeeCommander at runtime. Example

  TeeCommander1.Chart=Chart2