jsxgraph axis labels

by survivant

HTML

<link rel="stylesheet" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id='box' class='jxgbox'></div>

CSS

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

JavaScript

var mu = 4, sigma = 1.5;		
	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))); };

var bellStand = function(x) { return 1/(Math.sqrt(2*Math.PI)) * Math.exp(-1*Math.pow((x),2)/(2)); };
  
graphStart = mu - 3.5*sigma;
 graphEnd = mu + 3.5*sigma;

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

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

var axs = board.create("line", [[0,0], [1,0]],{strokecolor:"#444", strokeWidth:1,highlight:false,fixed:true});
		var xticks = Math.pow(10, (Math.ceil(Math.log(sigma/5)/Math.log(10) )));
		board.create("ticks",[axs, xticks], {highlight:false,drawLabels:true, label:{ offset:[-2,-14]},needsRegularUpdate:false});
		var yaxs = board.create("segment", [ [0,0], [0,10] ],{strokecolor:"#444", highlight:false,strokeWidth:1,fixed:true});
		var yticks = 0.1;
		board.create("ticks",[yaxs, yticks], {drawLabels:true, label:{ offset:[-30,0]},needsRegularUpdate:false});
    

// change distance to 4, have to do it the hacky way.
yaxis.defaultTicks.ticksFunction = function () { return 4; };

// full update is required because axis elements have the needsRegularUpdate attribute set to false and won't update on regular updates.
board.fullUpdate();