The underlying JavaScript and PHP code

From JSXGraph Wiki
Revision as of 08:47, 3 June 2010 by A WASSERMANN (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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', {originX: 20, originY: 300, unitX: 60, unitY: 5, 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.createElement('point', [x[i],y[i]],{name:' ',fixed:true,style:7}); 
                p[6+i] = brd.createElement('point', [x[6+i],y[6+i]],{name:' ',fixed:true,style:7});
            }else{
                y[i] = 10+z1*3;
                p[i] = brd.createElement('point', [x[i],y[i]],{name:' ',fixed:true,style:7}); 
            }
        }
        var hlow = [];
        var hup = [];
        var l = [];
        hlow[0] = brd.createElement('point', [x[0],0],{name:' ',visible:false}); 
        hlow[1] = brd.createElement('point', [x[10],0],{name:' ',visible:false}); 
        hlow[2] = brd.createElement('point', [x[8],0],{name:' ',visible:false}); 
        hlow[3] = brd.createElement('point', [x[9],0],{name:' ',visible:false}); 
        hup[0] = brd.createElement('point', [x[0],20],{name:' ',visible:false}); 
        hup[1] = brd.createElement('point', [x[10],20],{name:' ',visible:false}); 
        hup[2] = brd.createElement('point', [x[8],20],{name:' ',visible:false}); 
        hup[3] = brd.createElement('point', [x[9],20],{name:' ',visible:false}); 
        l[0] = brd.createElement('line', [hlow[0],hup[0]],{visible:false}); 
        l[1] = brd.createElement('line', [hlow[1],hup[1]],{visible:false}); 
        l[2] = brd.createElement('line', [hlow[2],hup[2]],{visible:false}); 
        l[3] = brd.createElement('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.createElement('glider', [x[0],y[0],l[0]],{name:' ',style:6}); 
        p[10] = brd.createElement('glider', [x[10],y[10],l[1]],{name:' ',style:6}); 
        p[8] = brd.createElement('glider', [x[8],y[8],l[2]],{name:' ',style:6}); 
        p[9] = brd.createElement('glider', [x[9],y[9],l[3]],{name:' ',style:6}); 

        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.createElement('curve', [[x[0],x[x.length-1]],[m,m]], {strokecolor:'red'}); 
                            graph3 = brd.createElement('curve', [[x[0],x[x.length-1]],[m+sd,m+sd]], {strokecolor:'red',dash:2}); 
                            graph4 = brd.createElement('curve', [[x[0],x[x.length-1]],[m-sd,m-sd]], {strokecolor:'red',dash:2}); 
                            graph5 = brd.createElement('curve', [[x[0],x[x.length-1]],[med,med]], {strokecolor:'black'}); 
                            graph1 = brd.createElement('curve', [[x[0],x[x.length-1]],[med-mad,med-mad]], {strokecolor:'black',dash:3}); 
                            graph6 = brd.createElement('curve', [[x[0],x[x.length-1]],[med+mad,med+mad]], {strokecolor:'black',dash:3}); 
                            graph8 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1,est1]], {strokecolor:'green'}); 
                            graph7 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1-est2,est1-est2]], {strokecolor:'green',dash:4}); 
                            graph9 = brd.createElement('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 = ' + brd.round(m,2) + '<br />' +
                                'Median = ' + brd.round(med,2) + '<br />' +
                                'Radius-minimax estimator = ' + brd.round(est1,2) + '<br /><br />' +
                                '<b>Estimates for scale (true value = 3):</b><br />' +
                                'Standard deviation = ' + brd.round(sd,2) + '<br />' +
                                'MAD = ' + brd.round(mad,2) + '<br />' + 
                                'Radius-minimax estimator = ' + brd.round(est2,2) + '<br />';
                        brd.update();
                    };
                }});
        }

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