The underlying JavaScript and PHP code

Beware that in order to simplify the handling of AJAX we use the additional library prototype.js in this example.

The JavaScript code on the client

brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1.15, 60, 11.15, -20], axis:true});
var graph1,graph2,graph3,graph4,graph5,graph6,graph7,graph8,graph9;

var x = [];
var y = [];
var p = [];
var r1,r2,rad,phi,z1,z2;
for (var i=0;i<6;i++) {
    x[i] = i;
    // Box-Muller-Method for standard normal random numbers
    r1 = Math.random();
    r2 = Math.random();
    rad = Math.sqrt(-2*Math.log(1-r1));
    phi = 2*Math.PI*r2;
    z1 = rad*Math.cos(phi);
    z2 = rad*Math.sin(phi);
    if(i < 5){
        y[i] = 10+z1*3;
        y[6+i] = 10+z2*3;
        x[6+i] = 6+i;
        p[i] = brd.create('point', [x[i],y[i]],{name:' ',fixed:true,size:2,face:'[]'}); 
        p[6+i] = brd.create('point', [x[6+i],y[6+i]],{name:' ',fixed:true,size:2,face:'[]'});
    }else{
        y[i] = 10+z1*3;
        p[i] = brd.create('point', [x[i],y[i]],{name:' ',fixed:true,size:2,face:'[]'}); 
    }
}
var hlow = [];
var hup = [];
var l = [];
hlow[0] = brd.create('point', [x[0],0],{name:' ',visible:false}); 
hlow[1] = brd.create('point', [x[10],0],{name:' ',visible:false}); 
hlow[2] = brd.create('point', [x[8],0],{name:' ',visible:false}); 
hlow[3] = brd.create('point', [x[9],0],{name:' ',visible:false}); 
hup[0] = brd.create('point', [x[0],20],{name:' ',visible:false}); 
hup[1] = brd.create('point', [x[10],20],{name:' ',visible:false}); 
hup[2] = brd.create('point', [x[8],20],{name:' ',visible:false}); 
hup[3] = brd.create('point', [x[9],20],{name:' ',visible:false}); 
l[0] = brd.create('line', [hlow[0],hup[0]],{visible:false}); 
l[1] = brd.create('line', [hlow[1],hup[1]],{visible:false}); 
l[2] = brd.create('line', [hlow[2],hup[2]],{visible:false}); 
l[3] = brd.create('line', [hlow[3],hup[3]],{visible:false}); 

brd.removeObject(p[0]);
brd.removeObject(p[10]);
brd.removeObject(p[8]);
brd.removeObject(p[9]);

p[0] = brd.create('glider', [x[0],y[0],l[0]],{name:' ',size:4,face:'o'}); 
p[10] = brd.create('glider', [x[10],y[10],l[1]],{name:' ',size:4,face:'o'}); 
p[8] = brd.create('glider', [x[8],y[8],l[2]],{name:' ',size:4,face:'o'}); 
p[9] = brd.create('glider', [x[9],y[9],l[3]],{name:' ',size:4,face:'o'}); 

doIt();

function doIt() {
    brd.update();
    // Generate a ";"-separated list
    var t = '';
    for (var i=0;i<p.length;i++) {
        t += p[i].Y() + ';';
    }
    new Ajax.Request('/~mkohl/rserv.php', {
        method:'post',
        parameters:'input='+escape(t),
        onComplete: function(transport) {
            if (200 == transport.status) {
                var t = transport.responseText;
                var res = t.match(/"(.*)"/gi);
                res = RegExp.$1;
                var a = res.split(";");
                var m = a[0]*1.0;
                var sd = a[1]*1.0;
                var med = a[2]*1.0;
                var mad = a[3]*1.0;
                var mad = a[3]*1.0;
                var est1 = a[4]*1.0;
                var est2 = a[5]*1.0;
                if (!graph2) { 
                    graph2 = brd.create('curve', [[x[0],x[x.length-1]],[m,m]], {strokecolor:'red'}); 
                    graph3 = brd.create('curve', [[x[0],x[x.length-1]],[m+sd,m+sd]], {strokecolor:'red',dash:2}); 
                    graph4 = brd.create('curve', [[x[0],x[x.length-1]],[m-sd,m-sd]], {strokecolor:'red',dash:2}); 
                    graph5 = brd.create('curve', [[x[0],x[x.length-1]],[med,med]], {strokecolor:'black'}); 
                    graph1 = brd.create('curve', [[x[0],x[x.length-1]],[med-mad,med-mad]], {strokecolor:'black',dash:3}); 
                    graph6 = brd.create('curve', [[x[0],x[x.length-1]],[med+mad,med+mad]], {strokecolor:'black',dash:3}); 
                    graph8 = brd.create('curve', [[x[0],x[x.length-1]],[est1,est1]], {strokecolor:'green'}); 
                    graph7 = brd.create('curve', [[x[0],x[x.length-1]],[est1-est2,est1-est2]], {strokecolor:'green',dash:4}); 
                    graph9 = brd.create('curve', [[x[0],x[x.length-1]],[est1+est2,est1+est2]], {strokecolor:'green',dash:4}); 
                } else {
                    graph2.dataY = [m,m];
                    graph3.dataY = [m+sd,m+sd];
                    graph4.dataY = [m-sd,m-sd];
                    graph5.dataY = [med,med];
                    graph1.dataY = [med-mad,med-mad];
                    graph6.dataY = [med+mad,med+mad];
                    graph8.dataY = [est1,est1];
                    graph7.dataY = [est1-est2,est1-est2];
                    graph9.dataY = [est1+est2,est1+est2];
                }

                $('output').innerHTML = '<b><font size="+1">Normal location and scale:</font></b><br /><br />'+ 
                    '<b>Estimates for location (true value = 10):</b><br />' +
                    'Mean = ' + Math.round(m,2) + '<br />' +
                    'Median = ' + Math.round(med,2) + '<br />' +
                    'Radius-minimax estimator = ' + Math.round(est1,2) + '<br /><br />' +
                    '<b>Estimates for scale (true value = 3):</b><br />' +
                    'Standard deviation = ' + Math.round(sd,2) + '<br />' +
                    'MAD = ' + Math.round(mad,2) + '<br />' + 
                    'Radius-minimax estimator = ' + Math.round(est2,2) + '<br />';
                brd.update();
            };
        }});
}
brd.addHook(doIt, 'mouseup');

The PHP code of the server (rserv.php)

<?php
$input = $_POST["input"];
if (!get_magic_quotes_gpc()) {
    $input = addslashes($input);
}
$cmd = "/usr/bin/Rscript LokSkala.R '" . $input ."'";
passthru($cmd);
?>

Back to the example page: Analyze data with the Statistics software R