areaBetween

by Javier Puértolas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.3.5/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>

JavaScript

board = JXG.JSXGraph.initBoard("jxgbox", {showNavigation:false,boundingbox:[-2,20,4.5,-1], axis:true});
var f1 = function(x){return 4*x};
var f2 = function(x){return x*x + 1};

var curve1 = board.create('functiongraph', [function(x){return f1(x)}, -3,5]);
var curve2 = board.create('functiongraph', [function(x){return f2(x)}, -3,5]);

var int1 = board.create('intersection', [curve1, curve2, 0], { visible:false, fixed: true});

var int2 = board.create('intersection', [curve1, curve2, 1], { visible:false, fixed: true});

board.create('integral', [[int1.X(), int2.X()], curve1], { layer:1, withLabel:false, curveLeft:{visible:false}, curveRight:{visible:false}});
board.create('integral', [[int1.X(), int2.X()], curve2], {color:'white', opacity:1, layer:1, withLabel:false, highlight:false, curveLeft:{visible:false}, curveRight:{visible:false}});