JSX Graph Example

Reference: http://jsxgraph.uni-bayreuth.de/wp/

by mikot

HTML

<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>

JavaScript

var board = JXG.JSXGraph.initBoard('jsxgbox', {
    originX: 250,
    originY: 250,
    unitX: 50,
    unitY: 50
});
var g1 = board.create('point', [1, -1], {
    style: 6
});
var g2 = board.create('point', [2.5, -2], {
    style: 6
});
var g3 = board.create('point', [1, -3], {
    style: 5
});
var g4 = board.create('point', [2.5, -4], {
    style: 5
});
var g5 = board.create('point', [-4, 1], {
    style: 5,
    name: ''
});

var c1 = board.create('curve', [

function (t) {
    return (g1.X() - g2.X()) * Math.cos(t) + g3.X() * Math.cos(t * (g1.X() - g2.X()) / g2.X());
}, function (t) {
    return (g1.X() - g2.X()) * Math.sin(t) + g3.X() * Math.sin(t * (g1.X() - g2.X()) / g2.X());
},
0, function () {
    return Math.PI * 7 * Math.abs(g4.X());
}], {
    strokeWidth: function () {
        return g5.Y() * 3;
    },
    strokeOpacity: function () {
        return g5.Y() * 0.6;
    }
});

var t = board.create('text', [function () {
    return g5.X() + 0.2;
}, function () {
    return g5.Y() + 0.25;
}, 'X(B)=<value>X(B)</value>'], {
    digits: 3,
    fontSize: function () {
        return Math.abs(g5.Y()) * 10 + 1;
    }
})