how to add waterfall series by Ax5 in htm

Richard · Post by **Richard** » Wed Nov 30, 2005 5:59 am

hi,sir

I know it 's easy to draw a waterfall series in vb by Ax5 ,but now i feel some trouble in drawing a waterfall series in htm
somebody help me,better give me some source example or some suggestion.

thanks a lot,

Post by **Pep** » Wed Nov 30, 2005 11:01 am

Hi Richard,

yes, check this one :

Code: Select all

<html>
<head>
<title>TeeChart Pro Internet Examples</title>
<LINK REL=STYLESHEET TYPE="text/css" HREF="style.css"></head>
<body bgcolor=#FFFFFF>

<script language="VBScript">
SUB FillChart
     'sets up Chart to print from IE's print option
     Chart1.Environment.IEPrintWithPage=True

     Chart1.RemoveAllSeries
     Chart1.AddSeries( 33 )

     Chart1.Series(0).Title="My WaterFall"

     Chart1.Series(0).Clear  

     dim x,z as Integer

     ' Add Data here   tChart1.Series(0).AsWaterFall.AddXYZ...

     Chart1.Legend.Alignment=2

     Chart1.Panel.Gradient.Visible=True

     Chart1.Aspect.Chart3DPercent=70

     Chart1.Walls.Left.Pen.Color=RGB(0,0,255)
     Chart1.Walls.Left.Size=8
     Chart1.Walls.Bottom.Size=8
     Chart1.Walls.Back.Color=RGB(200,150,200)

     Chart1.Axis.Bottom.Labels.Font.Size=12
     Chart1.Axis.Bottom.Ticks.Width=2
     Chart1.Axis.Bottom.Ticks.Color=RGB(200,150,200)

     Chart1.Series(0).Marks.Frame.Color=RGB(200,150,200)

     Chart1.Panel.BevelOffset=5

     Chart1.Header.Font.Size=12
     Chart1.Header.Font.Bold=True

    END SUB
   </script>


<p>
<font face="Arial" color="#004080"><em><big><strong>Basic VBScript 

Example</strong></big></em></font></h3>
</p>

<p>
See below an embedded TeeChart Pro ActiveX control using the
HTML < OBJECT > tag.
</p>
<p>
Click the following buttons to add Chart Series and values to
the control, as well as to show the Chart editor, print preview
and export dialogs.
</p>
<p>
Note: The TeeChart Pro ActiveX control file (TEECHART.OCX), should
be present and registered in this machine to see the embedded object.
</p>


<p>
<input type="button" value="Add a Series and fill values" onclick="FillChart"
name="cdmChart1">
<input type="button" value="Show TeeChart Editor dialog" onclick="Chart1.ShowEditor"
name="cdmChart2"> </p>

<p><input type="BUTTON" value="Show TeeChart Print Preview" 

onclick="Chart1.Printer.ShowPreview"
name="cdmChart3">
<input type="button" value="Show TeeChart Export dialog" onclick="Chart1.Export.ShowExport" 

name="cdmChart4"> </p>

<p>
<object 
   id="Chart1" 
   width="400" 
   height="268" 
   type="application/x-oleobject" 
   hspace="0"
   vspace="0" 
   classid="CLSID:B6C10489-FB89-11D4-93C9-006008A7EED4">
</object>
&nbsp; </p>
<p>
Click on a cylinder Bar point above.
</p>
</body>
</html>

Richard · Post by **Richard** » Thu Dec 01, 2005 1:23 am

hi,pep

thank you very much,
you are better helper,your code is very useful.I refer to your code ,I have realize some functions.but now i want to draw like figure1 in vbscript,then figure is make by VB's paintbox

the Z-Axis is datetime,and with the time is changing,the new ArrayxyZ should be add into the chart,but hte new ArrayXYZ have the same Z,that's the time of NOW,and how to set the Zvalue-formatdatetime,at the same time ,how can i set MaxMinvalue of Z-axis.
you can check my code.

Code: Select all

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript" type="text/javascript">
<!--关键在这个函数-->
function GetData()
{
url="Wave.asp?IDval="+document.form2.selectCh.options(document.form2.selectCh.selectedIndex).id;//调用页面及通道ID

 var http = new ActiveXObject("Microsoft.XMLHTTP");
 http.open("POST",url,false);
 http.send();
 var str = http.responseText;
//loadcontent.innerHTML=str; 
 DrawWave(str);
 }
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">

</style>
</head>
<div id=loadcontent>Data is Loading……</div>
<body >
<table width="878" height="35" cellpadding="0" cellspacing="0" >
 
  <tr>
    <td><table width="732" cellpadding="0" cellspacing="0">
  <tr>
    <td width="160">&nbsp;</td>
    <td width="570"><table border="0"cellpadding="0" cellspacing="0"><tr><td></td></tr><tr><td><object 
   id="TChart1" 
   width="570" 
   height="405" 
   type="application/x-oleobject" 
   hspace="0"
   vspace="0" 
   classid="CLSID:B6C10489-FB89-11D4-93C9-006008A7EED4"
   codebase="http://www.envada.com.cn/en8000web/Teechart5.cab#version=5,0,4,0">
</object></td></tr></table></td>
  </tr>
</table>
</td>
  </tr>
</table>
<script language="vbscript">
<!--
Dim Sendstr,ChnStr
Dim FunFlag,RealFlag
Dim wavestr
sub Window_onload()
Dim tmpIndex               
 TChart1.Environment.IEPrintWithPage=True  <!--sets up Chart to print from IE's print option -->
 TChart1.AutoRepaint=True
 TChart1.AddSeries(33)


  <!-- 表头--> 
 TChart1.Header.Text.Clear
 TChart1.Header.Text.Add("1瓦X向轴振")
 TChart1.Header.Font.Bold=True
 TChart1.Header.Font.Color=vbBlue
 TChart1.Header.Font.Size=12
 TChart1.Header.Alignment=2 '0-left,1-right,2-center,defause-2'
 <!-- 表底--> 
 TChart1.Footer.Text.Clear
 TChart1.Footer.Text.Add("周期:T")
 TChart1.Footer.Font.Italic = False
 TChart1.Footer.Font.Bold=True
 TChart1.Footer.Font.Color=vbBlue
 TChart1.Footer.Font.Size=8
 TChart1.Footer.Alignment=1

  TChart1.Aspect.Orthogonal =False
    TChart1.Legend.Visible = False
   TChart1.Aspect.Chart3DPercent =100
   TChart1.Aspect.Zoom = 80
   TChart1.Panel.Gradient.Visible=False
   
  'TChart1.Series(0).asWaterfall.UsePalette=False'
  TChart1.Series(0).asWaterfall.WireFrame=True
  TChart1.Series(0).asWaterfall.Pen.Color=vbBlue
  TChart1.Series(0).asWaterfall.WaterLines.Visible=False
  
  TChart1.Walls.Left.Pen.Color=RGB(0,0,128)
  TChart1.Walls.Left.Size=0
  TChart1.Walls.Back.Color=RGB(242,242,242)
  TChart1.Walls.Bottom.Size=1
  
 
  TChart1.Axis.Bottom.Labels.Font.Size=12 
  TChart1.Axis.Bottom.Ticks.Width=2 
  TChart1.Axis.Bottom.Ticks.Color=RGB(200,150,200)
  
  TChart1.Panel.BevelOffset=5
  TChart1.Panel.Color=vbWhite '15921906'
  
 TChart1.Zoom.Animated=True
 TChart1.Zoom.Pen.Color= vbYellow
 
 TChart1.TimerEnabled=True
 TChart1.TimerInterval=1500
end sub
// the procedure Draw 
sub DrawWave(wavestr)
dim rat,smplen,smpcyc,valnum
dim MyArray
dim MyValArray(),MyPhaArray(),My1XArray(),MyXArray(),MyYArray(),MyZArray()
dim i,j,k,n,m
dim MaxnX,MaxVal
dim tm
	On Error Resume Next
	MyArray=split(trim(wavestr),",",-1,1)
	rat=Myarray(0)
	smplen=MyArray(1)
	smpcyc=MyArray(2)
	valnum=MyArray(3)
	n=CInt(valnum)
	if n>0 then
	Redim MyValArray(n),MyPhaArray(n),MynXArray(n)
	for i=0 to n-1 
		MyValArray(i)=MyArray(3*i+4)/10
		MyPhaArray(i)=MyArray(3*i+5)
		MynXArray(i)=MyArray(3*i+6)
	Next
	MaxnX=CInt(MynXArray(0))
	for i=1 to n-1
		if MaxnX<CInt(MynXArray(i)) then
		 MaxnX=CInt(MynXArray(i))
		end if 
	next
	Redim MyXArray(MaxnX+smpcyc),MyYArray(MaxnX+smpcyc),MyZArray(MaxnX+smpcyc)
	m=MaxnX+smpcyc
	tm=now
	for i=0 to m-1
		MyXArray(i)=i/smpcyc
		MyYArray(i)=FormatNumber(Rnd,2)
		MyZArray(i)=tm
	next
	for i=0 to n-1
		MyYArray(MynXArray(i))=MyValArray(i)
	next
	TChart1.Series(0).asWaterfall.IrregularGrid=True
			TChart1.Series(0).asWaterfall.AddArrayXYZ MyXArray,MyYArray,MyZArray
	MaxVal=TChart1.Axis.Left.MaxYValue+10
	document.form1.textY.value=MaxVal
	MaxXVal=TChart1.Axis.Bottom.MaxXValue
				TChart1.Axis.Left.SetMinMax 0,MaxVal
				TChart1.Axis.Bottom.SetMinMax 0, MaxXVal
				TChart1.AutoRepaint=True
			    TChart1.Repaint
				
	end if
end sub
sub TChart1_OnTimer() 
dim temstr1,temstr2,temstr3,temstr
	temstr1="10,1024,16,18,621,0,16,77,150,92,76,70,32,74,211,112,72,289,144,69,271,136,"
	temstr2="69,190,104,68,230,120,67,129,88,66,90,40,65,30,8,63,249,128,63,100,20,62,107,48,62,"
	tempstr3="308,152,61,55,12,61,169,96,55,50,24"
	temstr=temstr1+temstr2+temstr3
	TChart1.TimerEnabled=False
	DrawWave(temstr)
	TChart1.TimerEnabled=True
end sub
sub ShowPrints()
	TChart1.Printer.ShowPreview
end sub
sub Exportbmp()
	TChart1.Export.ShowExport
end sub
sub Pause()
	if TChart1.TimerEnabled then
		TChart1.TimerEnabled=false
		document.form1.CmdPause.value="刷新"
	else
		TChart1.TimerEnabled=true
		document.form1.CmdPause.value="暂停"
	end if
end sub
<!-- 通道选择-->
sub SelectChannel()
dim headertext
	TChart1.Series(0).Clear
	TChart1.TimerEnabled=False
	TChart1.AutoRepaint=False
	headertext=document.form2.selectCh.options(document.form2.selectCh.selectedIndex).Value
	TChart1.Header.Text.Clear
	TChart1.Header.Text.Add(headertext)
	TChart1.TimerEnabled=True
	TChart1.AutoRepaint=True
end sub
sub TChart1_OnCursorToolChange(Tool, X, Y, XVal, YVal, Series, ValueIndex)
	document.form1.textX.value=FormatNumber(XVal,1)+"T"
	document.form1.textY.Value= FormatNumber(YVal,0)+"um"
end sub
-->
</script>
</body>
</html>

Post by **Pep** » Thu Dec 01, 2005 10:01 am

Hi Richard,

you can use similar code to the following :

Code: Select all

TChart1.Axis.Depth.Visible = True
TChart1.Series(0).asWaterfall.ZValues.DateTime = True
TChart1.Axis.Depth.Labels.DateTimeFormat = "hh:mm:ss"
TChart1.Axis.Depth.SetMinMax Now, Now + 1

Richard · Post by **Richard** » Fri Dec 02, 2005 2:32 am

hi ,Pep

thanks a lot,After I set the Zvalues.DateTime ,DatetimeFormat="hh:mm:ss"

exactully the Axis's depth can be seen.but it is LongInt type,like 38,688,428, not like 10:17:50, I don't know what to do
besides,when i move Mouse on the series,how can I get Value Y.

Post by **Pep** » Fri Dec 02, 2005 7:02 pm

Hi Richard,

yes, sorry, don't remember you're using the AX v5. Using this version the depth axis still showing the values as longint even DateTime property is set to true. To solve this you must reasign the axis labels in the OnGetAxisLabel event :

Code: Select all

Private Sub TChart1_OnGetAxisLabel(ByVal Axis As Long, ByVal SeriesIndex As
Long, ByVal ValueIndex As Long, LabelText As String)
Date = CDate(LabelText)
LabelText = Date
End Sub

This has been fixed in the TeeChart Pro v6 and above.

Richard · Post by **Richard** » Sat Dec 03, 2005 8:41 am

hi ,pep

yeah,I use the AV5.
i have added your code in my program written by VBScript in htm ,but likely it does't work
i don't know what's wrong with it.
Check my code.

Code: Select all

sub TChart1_OnGetAxisLabel(Axis, SeriesIndex, ValueIndex, LabelText)
dim MyDate
    'In vbscript ,atDepth=4'
	if Axis=4 then
		MyDate = CDate(LabelText) 
		LabelText =MyDate 
	end if
end sub

[/code]

Narcís · Post by **Narcís** » Mon Dec 05, 2005 12:17 pm

Hi Richard,

This seems to be a limitation of ActiveX Controls in HTML in that the value
of strings in event handlers is lost. There is a workaround to this problem,
however, which can be seen in the ASP Server examples (accessible from the TeeChart Pro AXv5 Program Group) in the example "Page showing 4 different export formats", specifically the text on the left axis in the first "live" example.

Upgrading your license to TeeChart Pro v7 ActiveX would solve your problem just using:

Code: Select all

tChart1.Series(0).AsWaterFall.ZValues.DateTime = true

Richard · Post by **Richard** » Tue Dec 06, 2005 12:24 am

hi Narcís

How can i update My AV5 to AV7.or need to spend how much

Narcís · Post by **Narcís** » Wed Dec 07, 2005 9:52 am

Hi Richard,

Here is the on-line order web page to upgrade from v5 to v7. v7 includes tools to authomatically upgrade your applications for v6 to v7. If necessary, we will send you the tools to upgrade from v5 to v6 too.

Richard · Post by **Richard** » Mon Dec 12, 2005 4:20 am

HI Narcis,

if i only want to update AV5 to AV6 and get av6.cab ,tell me what i can do,

thanks a lot.

Narcís · Post by **Narcís** » Mon Dec 12, 2005 3:29 pm

Hi Richard,

If you want to update to v6 please contact our Sales Dept. at sales@steema.com. Then you can download what you exactly need from our download area.