WEBchartmaster.com - charts in Internet

VBScript

Move mouse pointer over charts and legend.
Click on charts and legend.

0 2 4 6 8 10 12 14 9 8 10 12 11 12
Area Line
POINT VALUE
1  
2  
3  
4  
5  
6  

   Also this example demonstrates method of using input and output files in AREA statement.

   After first step output file out1.htm consists:
   data from file vbscript.hea;
   data for chart rendering, described by first AREA statement;
   data from file vbscript.txt.

   After second step output file vbscript.htm consists:
   data from file out1.htm, generated at first step;
   data for legend rendering, described by second AREA statement (symbol "!" in LEGEND statement indicates, that only legend must be construct);
   data from file vbscript.foo.

   File vbscript.hea ends with <TD> element and file vbscript.foo begins with </TD> element. Thus data for chart and legend rendering is placed in cell of table.

Chart description

area;;;170;130;#f7f3e6;ch1;;out1.htm;vbscript.hea;vbscript.txt
plot;30;5;10;10
border;2;white
Y1-;;;0;14;2;;0;
d1;l3;2;red;red;Area' onmouseover='overs1()' onmouseout='outs1()' onclick='onclicks1();;9;8;10;12;11;12;
d1;v;10;black;yellow;Values;;9;8;10;12;11;12;
d1;l1;4;blue ;;Line' onmouseover='overl3()' onmouseout='outl3()' onclick='onclickl3();;5;6; 5; 8;7;9;
d1;m4;6;blue;yellow;^Marker;;5;6; 5; 8;7;9;

area;;;170;130;#f7f3e6;ch1;;vbscript.htm;out1.htm;vbscript.foo
plot;30;5;10;10
border;2;white
Y1-;;;0;14;2;;0;
legend!;;;85;65;#f7f3e6;;;12
d1;l3;2;red;red;Area' onmouseover='overs1()' onmouseout='outs1()' onclick='onclicks1();;9;8;10;12;11;12;
d1;v;10;black;yellow;Values;;9;8;10;12;11;12;
d1;l1;4;blue ;;Line' onmouseover='overl3()' onmouseout='outl3()' onclick='onclickl3();;5;6; 5; 8;7;9;
d1;m4;6;blue;yellow;^Marker;;5;6; 5; 8;7;9;

File vbscript.hea

<HTML>
<xml:namespace prefix="v"/>
<head>
<META Name="Generator" Content="WEB chart master">
<meta content="VBScript">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=1252">

<script language=vbscript>
<!--
Function onclicks1()
 r1c2.innerTEXT=s1_1
 r2c2.innerTEXT=s1_2
 r3c2.innerTEXT=s1_3
 r4c2.innerTEXT=s1_4
 r5c2.innerTEXT=s1_5
 r6c2.innerTEXT=s1_6
End Function

Function onclickl3()
 r1c2.innerTEXT=l3_1
 r2c2.innerTEXT=l3_2
 r3c2.innerTEXT=l3_3
 r4c2.innerTEXT=l3_4
 r5c2.innerTEXT=l3_5
 r6c2.innerTEXT=l3_6
End Function

Function overs1()
 For i=0 TO ch1_1.length-1
  ch1_1(i).fillcolor="green"
  ch1_1(i).strokecolor="green"
 Next
End Function

Function outs1()
 For i=0 TO ch1_1.length-1
  ch1_1(i).fillcolor="red"
  ch1_1(i).strokecolor="red"
 Next
End Function

Function overl3()
 For i=0 TO ch1_3.length-1
  ch1_3(i).strokecolor="black"
  ch1_3(i).fillcolor="lime"
 Next
End Function

Function outl3()
 For i=0 TO ch1_3.length-1
  ch1_3(i).strokecolor="blue"
  ch1_3(i).fillcolor="yellow"
 Next
End Function
-->
</script>

</HEAD>
<style>
 v\:* {behavior=url(#default#VML)}
</style>
<body>

<div align="center">
<center>
  <table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="360">
   <tr>
    <td width="200">
     <center>

File vbscript.txt

<script language=vbscript>
<!--
s1_1=9
s1_2=8
s1_3=10
s1_4=12
s1_5=11
s1_6=12

l3_1=5
l3_2=6
l3_3=5
l3_4=8
l3_5=7
l3_6=9

-->
</script>

File vbscript.foo

     </center>
    </td>

   <td width="160">

    <CENTER>
     <TABLE bgcolor="#F7F3E6" WIDTH="150" BORDER="1" CELLSPACING="1" CELLPADDING="1">
     <TR>
      <TD width="50%" align="center">POINT</TD>
      <TD width="50%" align="center">VALUE</TD>
     </TR>
     <TR>
      <TD width="50%" align="center">1</TD>
      <TD id="r1c2" width="50%" align="center"> </TD>
     </TR>
     <TR>
      <TD width="50%" align="center">2</TD>
      <TD id="r2c2" width="50%" align="center"> </TD>
     </TR>
     <TR>
      <TD width="50%" align="center">3</TD>
      <TD id="r3c2" width="50%" align="center"> </TD>
     </TR>
     <TR>
      <TD width="50%" align="center">4</TD>
      <TD id="r4c2" width="50%" align="center"> </TD>
     </TR>
     <TR>
      <TD width="50%" align="center">5</TD>
      <TD id="r5c2" width="50%" align="center"> </TD>
     </TR>
     <TR>
      <TD width="50%" align="center">6</TD>
      <TD id="r6c2" width="50%" align="center"> </TD>
     </TR>
    </TABLE>
   </center>
   </td>
  </tr>
 </table>
</center>
</div>
</body>
</html>