Voorbeeld / Oefening voor het grafisch presenteren van statistische data

Tip: gebruik de standaard-applet 'grafiekYT.class' (uit 'WebLib' van Min & de Goeijen) voor de grafische output.

Oplossing:

<SCRIPT>
function plot(form)
  { 
    document.output.setGrafiek1YT1(9.0,0.0);     
    document.output.setGrafiek1YT2(9.0,parseFloat(document.form8.p1.value));     
    document.output.setGrafiek1YT1(29.0,0.0);     
    document.output.setGrafiek1YT2(29.0,parseFloat(document.form8.p2.value));     
    document.output.setGrafiek1YT1(49.0,0.0);     
    document.output.setGrafiek1YT2(49.0,parseFloat(document.form8.p3.value));     
    document.output.setGrafiek1YT1(69.0,0.0);     
    document.output.setGrafiek1YT2(69.0,parseFloat(document.form8.p4.value));     
    document.output.setGrafiek1YT1(89.0,0.0);     
    document.output.setGrafiek1YT2(89.0,parseFloat(document.form8.p5.value));     
   
    som = parseFloat(document.form8.p1.value)
         +parseFloat(document.form8.p2.value)
         +parseFloat(document.form8.p3.value)
         +parseFloat(document.form8.p4.value) 
         +parseFloat(document.form8.p5.value);
    document.form8.x.value = som;
    gem = som / 5.0;
    document.form8.y.value = gem;

    document.form8.z1.value = document.form8.p1.value;
    document.form8.v1.value = parseFloat(document.form8.p1.value)-gem;
    document.form8.z2.value = document.form8.p2.value;
    document.form8.v2.value = parseFloat(document.form8.p2.value)-gem;
    document.form8.z3.value = document.form8.p3.value;
    document.form8.v3.value = parseFloat(document.form8.p3.value)-gem;
    document.form8.z4.value = document.form8.p4.value;
    document.form8.v4.value = parseFloat(document.form8.p4.value)-gem;
    document.form8.z5.value = document.form8.p5.value;
    document.form8.v5.value = parseFloat(document.form8.p5.value)-gem;

    document.output.setGrafiek2YT1(11.0,0.0);     
    document.output.setGrafiek2YT2(11.0,parseFloat(document.form8.y.value));     
    document.output.setGrafiek2YT1(31.0,0.0);     
    document.output.setGrafiek2YT2(31.0,parseFloat(document.form8.y.value));     
    document.output.setGrafiek2YT1(51.0,0.0);     
    document.output.setGrafiek2YT2(51.0,parseFloat(document.form8.y.value));     
    document.output.setGrafiek2YT1(71.0,0.0);     
    document.output.setGrafiek2YT2(71.0,parseFloat(document.form8.y.value));     
    document.output.setGrafiek2YT1(91.0,0.0);     
    document.output.setGrafiek2YT2(91.0,parseFloat(document.form8.y.value));     
  }
</SCRIPT>

<FORM NAME="form8">
Typ hier je input-getal 1:
<INPUT TYPE="text" NAME="p1"  SIZE="10">

Typ hier je input-getal 2:
<INPUT TYPE="text" NAME="p2" SIZE="10">

Typ hier je input-getal 3:
<INPUT TYPE="text" NAME="p3"  SIZE="10">

Typ hier je input-getal 4:
<INPUT TYPE="text" NAME="p4"  SIZE="10">

Typ hier je input-getal 5:
<INPUT TYPE="text" NAME="p5"  SIZE="10"> en 
<INPUT type="button" name="x3" value="klik" onClick="plot(this.form)">

xxx: <INPUT TYPE="text" NAME="x" VALUE="" SIZE="5">

<APPLET
    code=grafiekYT.class
    name=output
    width=460
    height=185 >
   <param name="BackColor"   value="255,255,255">
   <param name="GridColor"   value="0,0,0">
   <param name="Graph1Color" value="255,0,0">
   <param name="Graph2Color" value="0,0,255">
   <param name="GridT"       value="5">
   <param name="GridY"       value="4">

   <param name="Y1min"       Value="0">
   <param name="Y1max"       Value="100">
   <param name="Y1text"      Value="De ruwe data">

   <param name="Y2min"       Value="0">
   <param name="Y2max"       Value="100">
   <param name="Y2text"      Value="De output">
   
   <param name="Tmin"        Value="0">
   <param name="Tmax"        Value="100">

</APPLET>
xxx: <INPUT TYPE="text" NAME="y" VALUE="" SIZE="5">

1: <INPUT TYPE="text" NAME="z1" VALUE="" SIZE="5">
verschil: <INPUT TYPE="text" NAME="v1" VALUE="" SIZE="5">

2: <INPUT TYPE="text" NAME="z2" VALUE="" SIZE="5">
verschil: <INPUT TYPE="text" NAME="v2" VALUE="" SIZE="5">

3: <INPUT TYPE="text" NAME="z3" VALUE="" SIZE="5">
verschil: <INPUT TYPE="text" NAME="v3" VALUE="" SIZE="5">

4: <INPUT TYPE="text" NAME="z4" VALUE="" SIZE="5">
verschil: <INPUT TYPE="text" NAME="v4" VALUE="" SIZE="5">

5: <INPUT TYPE="text" NAME="z5" VALUE="" SIZE="5">
xxx: <INPUT TYPE="text" NAME="v5" VALUE="" SIZE="5">

</CENTER>

Als je nu, hieronder op de knop drukt worden er 5 lijntjes (vectoren) in een applet geplot. Uw getallen mogen - hier - niet kleiner dan 0 of groter dan 100 zijn.

Resultaat: