Difference between revisions of "The underlying JavaScript and PHP code"

From JSXGraph Wiki
Jump to: navigation, search
(The JavaScript code on the client)
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
Beware that in order to simplify the handling of AJAX we use the additional library [http://www.prototypejs.org/ prototype.js] in this example.
 +
 
=== The JavaScript code on the client ===
 
=== The JavaScript code on the client ===
 
<source lang="javascript">
 
<source lang="javascript">
        brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 300, unitX: 60, unitY: 5});
+
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1.15, 60, 11.15, -20], axis:true});
         b1axisx = brd.createElement('axis', [[0,0], [1,0]], {ticksDelta:5, strokeColor:'#000000'});
+
var graph1,graph2,graph3,graph4,graph5,graph6,graph7,graph8,graph9;
        b1axisy = brd.createElement('axis', [[0,0], [0,1]], {ticksDelta:5, strokeColor:'#000000'});
+
 
        b1axisx.ticksDelta = 5;
+
var x = [];
        b1axisy.ticksDelta = 5;
+
var y = [];
        brd.fullUpdate = true;
+
var p = [];
        brd.update();
+
var r1,r2,rad,phi,z1,z2;
        brd.fullUpdate = false;
+
for (var i=0;i<6;i++) {
       
+
    x[i] = i;
        var graph1,graph2,graph3,graph4,graph5,graph6,graph7,graph8,graph9;
+
    // 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]);
  
        var x = [];
+
p[0] = brd.create('glider', [x[0],y[0],l[0]],{name:' ',size:4,face:'o'});  
        var y = [];
+
p[10] = brd.create('glider', [x[10],y[10],l[1]],{name:' ',size:4,face:'o'});  
        var p = [];
+
p[8] = brd.create('glider', [x[8],y[8],l[2]],{name:' ',size:4,face:'o'});  
        var r1,r2,rad,phi,z1,z2;
+
p[9] = brd.create('glider', [x[9],y[9],l[3]],{name:' ',size:4,face:'o'});  
        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]);
+
doIt();
        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();
        function doIt() {
+
    // Generate a ";"-separated list
            brd.update();
+
    var t = '';
            // Generate a ";"-separated list
+
    for (var i=0;i<p.length;i++) {
            var t = '';
+
        t += p[i].Y() + ';';
            for (var i=0;i<p.length;i++) {
+
    }
                t += p[i].Y() + ';';
+
    new Ajax.Request('/~mkohl/rserv.php', {
            }
+
        method:'post',
            new Ajax.Request('/~alfred/jsxgraph/branches/0.70/examples/rserv.php', {
+
        parameters:'input='+escape(t),
                method:'post',
+
        onComplete: function(transport) {
                parameters:'input='+escape(t),
+
            if (200 == transport.status) {
                onComplete: function(transport) {
+
                var t = transport.responseText;
                    if (200 == transport.status) {
+
                var res = t.match(/"(.*)"/gi);
                        var t = transport.responseText;
+
                res = RegExp.$1;
                        var res = t.match(/"(.*)"/gi);
+
                var a = res.split(";");
                        res = RegExp.$1;
+
                var m = a[0]*1.0;
                        var a = res.split(";");
+
                var sd = a[1]*1.0;
                        var m = a[0]*1.0;
+
                var med = a[2]*1.0;
                        var sd = a[1]*1.0;
+
                var mad = a[3]*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 mad = a[3]*1.0;
+
                var est2 = a[5]*1.0;
                        var est1 = a[4]*1.0;
+
                if (!graph2) {  
                        var est2 = a[5]*1.0;
+
                    graph2 = brd.create('curve', [[x[0],x[x.length-1]],[m,m]], {strokecolor:'red'});  
                        if (!graph2) {  
+
                    graph3 = brd.create('curve', [[x[0],x[x.length-1]],[m+sd,m+sd]], {strokecolor:'red',dash:2});  
                            graph2 = brd.createElement('curve', [[x[0],x[x.length-1]],[m,m]], {strokecolor:'red'});  
+
                    graph4 = brd.create('curve', [[x[0],x[x.length-1]],[m-sd,m-sd]], {strokecolor:'red',dash:2});  
                            graph3 = brd.createElement('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'});  
                            graph4 = brd.createElement('curve', [[x[0],x[x.length-1]],[m-sd,m-sd]], {strokecolor:'red',dash:2});  
+
                    graph1 = brd.create('curve', [[x[0],x[x.length-1]],[med-mad,med-mad]], {strokecolor:'black',dash:3});  
                            graph5 = brd.createElement('curve', [[x[0],x[x.length-1]],[med,med]], {strokecolor:'black'});  
+
                    graph6 = brd.create('curve', [[x[0],x[x.length-1]],[med+mad,med+mad]], {strokecolor:'black',dash:3});  
                            graph1 = brd.createElement('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'});  
                            graph6 = brd.createElement('curve', [[x[0],x[x.length-1]],[med+mad,med+mad]], {strokecolor:'black',dash:3});  
+
                    graph7 = brd.create('curve', [[x[0],x[x.length-1]],[est1-est2,est1-est2]], {strokecolor:'green',dash:4});  
                            graph8 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1,est1]], {strokecolor:'green'});  
+
                    graph9 = brd.create('curve', [[x[0],x[x.length-1]],[est1+est2,est1+est2]], {strokecolor:'green',dash:4});  
                            graph7 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1-est2,est1-est2]], {strokecolor:'green',dash:4});  
+
                } else {
                            graph9 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1+est2,est1+est2]], {strokecolor:'green',dash:4});  
+
                    graph2.dataY = [m,m];
                        } else {
+
                    graph3.dataY = [m+sd,m+sd];
                            graph2.dataY = [m,m];
+
                    graph4.dataY = [m-sd,m-sd];
                            graph3.dataY = [m+sd,m+sd];
+
                    graph5.dataY = [med,med];
                            graph4.dataY = [m-sd,m-sd];
+
                    graph1.dataY = [med-mad,med-mad];
                            graph5.dataY = [med,med];
+
                    graph6.dataY = [med+mad,med+mad];
                            graph1.dataY = [med-mad,med-mad];
+
                    graph8.dataY = [est1,est1];
                            graph6.dataY = [med+mad,med+mad];
+
                    graph7.dataY = [est1-est2,est1-est2];
                            graph8.dataY = [est1,est1];
+
                    graph9.dataY = [est1+est2,est1+est2];
                            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 />'+  
+
                $('output').innerHTML = '<b><font size="+1">Normal location and scale:</font></b><br /><br />'+  
                                '<b>Estimates for location (true value = 10):</b><br />' +
+
                    '<b>Estimates for location (true value = 10):</b><br />' +
                                'Mean = ' + brd.round(m,2) + '<br />' +
+
                    'Mean = ' + Math.round(m,2) + '<br />' +
                                'Median = ' + brd.round(med,2) + '<br />' +
+
                    'Median = ' + Math.round(med,2) + '<br />' +
                                'Radius-minimax estimator = ' + brd.round(est1,2) + '<br /><br />' +
+
                    'Radius-minimax estimator = ' + Math.round(est1,2) + '<br /><br />' +
                                '<b>Estimates for scale (true value = 3):</b><br />' +
+
                    '<b>Estimates for scale (true value = 3):</b><br />' +
                                'Standard deviation = ' + brd.round(sd,2) + '<br />' +
+
                    'Standard deviation = ' + Math.round(sd,2) + '<br />' +
                                'MAD = ' + brd.round(mad,2) + '<br />' +  
+
                    'MAD = ' + Math.round(mad,2) + '<br />' +  
                                'Radius-minimax estimator = ' + brd.round(est2,2) + '<br />';
+
                    'Radius-minimax estimator = ' + Math.round(est2,2) + '<br />';
                        brd.update();
+
                brd.update();
                    };
+
            };
                }});
+
        }});
        }
+
}
 +
brd.addHook(doIt, 'mouseup');
 
</source>
 
</source>
  

Latest revision as of 11:36, 21 February 2013

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