Using MathJax

This example uses MathJax to render mathematical text.

MathJax is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.

The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by Carol Fisher and Agentyikes. Thank you very much for doing this great work.

Meanwhile, JSXGRapah has full support of MathJax:

The underlying JavaScript code

The first step is to include the freely available MathJax JavaScript library (additionally to the JSXGraph library):

  <script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script>

The second step is to enable MathJax rendering in the JSXGraph options:

JXG.Options.text.useMathJax = true;

To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.

brd.create('text',[-4,15,
  function() { 
    return '\\[f(x) = e^{' + k.Value() + 'x}\\]';
  }], {fontSize:'200%'});

The complete program code looks like this:

var brd, k;
JXG.Options.text.useMathJax = true;
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});
brd.create('functiongraph', [function(t) {return brd.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});
brd.create('text',[-4,15,
  function() { 
    return '\\[f(x) = e^{' + k.Value() + 'x}\\]';
  }]);