jsxgraph axis labels

by survivant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.4/jsxgraphcore.js"></script>
<div id='box' class='jxgbox'></div> 
<div id='box2' class='jxgbox'></div>

CSS

#box {
    width:300px;
    height:300px;
}

#box2 {
    width:300px;
    height:300px;
}


.jxgbox {
    /* for IE 7 */
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    border-style: solid;
    border-width: 1px;
    border-color: #356AA0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-touch-action: none;
}

.JXGtext {
    /* May produce artefacts in IE. Solution: setting a color explicitly. */
    background-color: transparent;
    font-family: Arial, Helvetica, Geneva, sans-serif;
    padding: 0;
    margin: 0;
}

.JXGinfobox {
    border-style: none;
    border-width: 1px;
    border-color: black;
}

.JXGimage {
    opacity: 1.0;
}

.JXGimageHighlight {
    opacity: 0.6;
}

JavaScript

var mu = 143, sigma = 40;		
	var bell = function(x) { return 1/(sigma*Math.sqrt(2*Math.PI)) * Math.exp(-1*Math.pow((x-mu),2)/(2*Math.pow(sigma,2))); };
 
graphStart = mu - 3.5*sigma;
 graphEnd = mu + 3.5*sigma;
 var top = bell(143);
 
 console.log('top=' + top);

var board = JXG.JSXGraph.initBoard("box", {showNavigation:false,showCopyright:false,boundingbox:[graphStart,top*2,graphEnd,0], axis:false});

var board2 = JXG.JSXGraph.initBoard("box2", {showNavigation:false,showCopyright:false,boundingbox:[graphStart,0.82,graphEnd,-0.15], axis:false});

var bellCurve = board.create("functiongraph", [bell,-300,300],{strokeWidth:1,highlight:false,dash:0});
var bellCurve2 = board2.create("functiongraph", [bell,-20,20],{strokeWidth:1,highlight:false,dash:0});

var line0 = board.create('line',[[0,-0.1], [1,-0.1]], {strokeWidth:1, strokeOpacity: .2, strokeColor: '#000', highlight:false, fixed: true}); 

var yaxs = board.create("segment", [ [0,0], [0,10] ],{strokecolor:"#444", highlight:false,strokeWidth:1,fixed:true});

var segArr = [], ptArr=[], bellArr = [];
for(i=-3;i<4;i++) {	
			ptArr[i] = board.create("point", [i*sigma+mu,0],{visible:false,name:''});		
			bellArr[i] = board.create("point", [i*sigma+mu,bell(i*sigma+mu)],{visible:false,name:''});	
			segArr[i] = board.create("segment", [ptArr[i] , bellArr[i]],{strokeWidth:1,dash:2,color:"green",fixed:true});
		}	
    
    
    var area = board.create('curve', [[], []], {color: 'green', opacity: 0.3, highlightStrokeColorOpacity: 0.3, highlight:false});
		

area.updateDataArray = function () {
    // start and end
    var left = 2, right = 5, x, y, curve;
    
    x = [2];
    y = [0];
    
    x.push(2);
		y.push(bellCurve.Y(2));

    // go through c[0] (sin) forwards, push all of c[0]'s data points into the data array for area
    curve = bellCurve;    
    
    console.log("graphStart=" + graphStart + "  graphEnd=" + graphEnd);
    
    for (i = 0; i < curve.numberPoints; i++) {
        if ((left <=...