scale axis

how to create an axis showing multiples of pi

HTML

<link rel="stylesheet" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<script src="http://jsxgraph.uni-bayreuth.de/~michael/jsxgui/JSXGraph/src/loadjsxgraph.js"></script>
<div id="jxgbox">
    <div id="jxgbox2">
</div>

CSS

#jxgbox {
    width: 700px;
    height: 700px;
}
#jxgbox2 {
    width: 700px;
    height: 200px;
}

JavaScript

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10, 10, 10,-10], axis: false, grid: false});

var xaxis = board.create('axis', [[0, 0], [1, 0]], {ticks: {ticksDistance:1}});
var yaxis = board.create('axis', [[0, 0], [0, 1]]);


//var board2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-10, 10, 10,7], axis: false, grid: false});

var axis = board.create('axis', [[5, 7], [5, 10]], {
    straightFirst: false,   // start drawing at bounding box
     straightLast: false,    // continue beyond bbox
            firstArrow: false,       // arrows on axis
            lastArrow: false,
        ticks: {
            color: '#888',
            drawLabels: false,
            //scale: Math.PI, scaleSymbol: '%',
             ticksDistance: 1,
            
        }
    });


board.create('text', [5.5, 7, '0%']);

/*board.create('ticks', [axis, 1], { 
    strokeColor: '#00ff00', 
    majorHeight: 8, 
    minorHeight: 0, 
    drawLabels: true,
     scaleSymbol: '%',
});
*/