Including LaTeX symbols with MathJax inside Google Charts?

Question

Within a tree diagram generated with Google Charts I would like to include LaTeX symbols generated with MathJax. Using the $ $ command that normally works throughout my HTML file, I am unable to reproduce these symbols within the javascript code of the diagram itself. Is there any way to do this?

The following jsfiddle sums it all up: http://jsfiddle.net/jqzup01b/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="../js/main.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
MatchWebFonts: {
    matchFor: {
      "HTML-CSS": true,
      NativeMML: false,
      SVG: false
    },
    fontCheckDelay: 2000,
    fontCheckTimeout: 30 * 1000
  },


jax: ["input/TeX","output/HTML-CSS"],
  "HTML-CSS": { linebreaks: { automatic: true },  matchFontHeight: true, scale: 90 },
         SVG: { linebreaks: { automatic: true }, matchFontHeight: true},
    tex2jax: {inlineMath: [['$','$']]}
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["orgchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        data.addRows([
          [{v:'Mike', f:'One<div style="color:grey; font-style:italic" w></div>'}, '', ''],
          [{v:'Jim', f:'Two<div style="color:grey; font-style:italic; background: white; width: 100px;">$can i haz LaTeX here$<div>'}, 'Mike', ''],
          [{v:'Alice', f:'Three<div style="color:grey; font-style:italic">$\in$<div>'}, 'Mike', '']

        ]);

        var chart = new google.visualization.OrgChart(document.getElementById('chart_span'));
        chart.draw(data, {allowHtml:true});
      }

</script>

    This is not LaTeX.<br>
    $\int ( This \, is).$

    <span id="chart_span">  
</span>

Answer 1

Since the chart will be loaded asynchronously, MathJax's initial typesetting pass will already be over by the time the chart arrives.

So you need to trigger another typesetting call (which will look for new content) by adding

        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

to your drawChart function, see the snippet below and the MathJax documentation for more .

PS: Keep in mind that TeX strings in JavaScript need lots of escaping, eg, \\\\in .

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="../js/main.js"></script> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ MatchWebFonts: { matchFor: { "HTML-CSS": true, NativeMML: false, SVG: false }, fontCheckDelay: 2000, fontCheckTimeout: 30 * 1000 }, jax: ["input/TeX","output/HTML-CSS"], "HTML-CSS": { linebreaks: { automatic: true }, matchFontHeight: true, scale: 90 }, SVG: { linebreaks: { automatic: true }, matchFontHeight: true}, tex2jax: {inlineMath: [['$','$']]} }); </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script> <script type="text/javascript"> google.load("visualization", "1", {packages:["orgchart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Manager'); data.addColumn('string', 'ToolTip'); data.addRows([ [{v:'Mike', f:'One<div style="color:grey; font-style:italic" w></div>'}, '', ''], [{v:'Jim', f:'Two<div style="color:grey; font-style:italic; background: white; width: 100px;">$can i haz LaTeX here$<div>'}, 'Mike', ''], [{v:'Alice', f:'Three<div style="color:grey; font-style:italic">$\\in$<div>'}, 'Mike', ''] ]); var chart = new google.visualization.OrgChart(document.getElementById('chart_span')); chart.draw(data, {allowHtml:true}); MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } </script> This is not LaTeX.<br> $\\int ( This \\, is).$ <span id="chart_span"> </span>