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 solution how to use MathJax in texts inside of a JSXGraph construction has been worked out by Carol Fisher and Agentyikes. Thank you very much for this great work.

0,0

–o+←↓↑→

n = 1.00

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>

To enable MathJax inside of JSXGraph, the function that is linked to (dynamic) text which will be rendered by MathJax returns HTML code containing a div-tag together with an ID. Here, this ID is mathjax_div. In our example this text element is displayed at position (-4,15).

Then, we need a second, invisible text - put to (-3,15). The function connected to this second text calls the MathJaX function MathJax.Hub.Typeset('mathjax_div');, whenever the board is updated. Thus, the text in the division mathjax_div is rendered again by MathJax.

var brd, k;
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() { 
    var txt;
    if (k.Value() == 1) {
      txt = '<div id="mathjax_div">'+'\\[f(x) = e^x \\]'+'</div>'; 
    } else {
      txt = '<div id="mathjax_div">'+'\\[f(x) = e^{' + k.Value() + 'x}\\]'+'</div>';
    }
    return txt;
  }]);
  brd.create('text',[-3,15,function() { MathJax.Hub.Typeset('mathjax_div'); return '';}]);
  brd.update();