MathJax in the axes labels of Flot - flot

I would like to render LaTeX in the axes labels of Flot. It works the first pass through on this page because this is executed in my header:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [["$", "$"], ["\\(", "\\)"]]}
});
</script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
However, the user has the option of entering new parameters other than the defaults and executing a JS via <input type="button" value="Evaluate" onclick="discrete()">. It's at this point that MathJax fails to "see" what's happening at the end of discrete.js:
MathJax.Hub.Config({//needed?
tex2jax: {inlineMath: [["$", "$"], ["\\(", "\\)"]]}
});
function doPlot(position) {//Flot
$.plot("#placeholder", [//data
{ data: z_m_plot }
],//options
{
series: {
points: {
radius: 3,
show: true,
fill: true,
fillColor: "navy"
},
color: "navy"
},
xaxis: { axisLabel: "$z_{max}(j - 1)$" },
yaxis: { axisLabel: "$z_{max}(j)$" }
}
);
}
doPlot("left");
Is there a way to pass individual strings to MathJax in order to render $z_{max}(j - 1)$ and $z_{max}(j)$ in the axes labels?

MathJax runs on page load and converts the math markup. If you want it to run again after you redraw your plot add this:
doPlot("left");
MathJax.Hub.Queue(["Typeset",MathJax.Hub]); // queue up MathJax

Related

problems with configuration of mathjax 3

I have a probem with three options while configuring Mathjax v.3 in my application. The minimal code to reflect the problem is an html file and two js file, one being tex-svg.js downloaded from github and the other being my configuration file for mathjax.
Content of the HTML file reads
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
<script type="text/javascript" src="test_files/mathjax-config.js"></script>
<script type="text/javascript" src="test_files/tex-svg.js" async=""></script>
</head>
<body>
first we have $1+\tan(\alpha)^2=\frac{1}{\cos(x)^2}$, then we have $$\int_a^b f(x,\tau,\epsilon)\,dx$$ and last we would have<br>\begin{align}<br>\sin(x)<br>\end{align}<br>and then continue by going to the next line ...<br>... right here
</body>
</html>
and the content of the configuration file is as what follows
window.MathJax = {
options: {
renderActions: {
addMenu: [],
//checkLoading: []
}
},
loader: {
//load: ['[tex]/tagFormat']
},
tex: {
inlineMath: [ ["$","$"] ], // ["$","$"],["\$","\$"],["\(","\)"],["\\(","\\)"]
displayMath: [ ["$$","$$"] ],
processEscapes: true, // for \$ to mean a common dollar sign, not a math delimiter
//ignoreHtmlClass: 'tex2jax_ignore', // divs with class "tex2jax_ignore" are NOT to be rendered
//processHtmlClass: 'tex2jax_process' // divs with class "tex2jax_process" are to be rendered
//processEnvironments: true, // process \begin{xxx}...\end{xxx} outside math mode
//processRefs: true, // process \ref{...} outside of math mode
packages: {'[+]': ['tagFormat','includeHtmlTags','skipTags']},
skipTags: ["script", "style", "textarea", "pre", "code"], //their contents won't be scanned for math
includeHtmlTags: {br: '\n', wbr: '', '#comment': ''}, // HTML tags that can appear within math
digits: /^(?:[\d۰-۹]+(?:[,٬'][\d۰-۹]{3})*(?:[\.\/٫][\d۰-۹]*)?|[\.\/٫][\d۰-۹]+)/, // introduce numbers
tagSide: "right",
tagIndent: ".8em",
multlineWidth: "85%",
tags: "ams",
tagFormat: {
number: function(n){
return n.replace(/0/g,"۰").replace(/1/g,"۱").replace(/2/g,"۲").replace(/3/g,"۳")
.replace(/4/g,"۴").replace(/5/g,"۵").replace(/6/g,"۶").replace(/7/g,"۷")
.replace(/8/g,"۸").replace(/9/g,"۹");
}
}
},
svg: {
fontCache: 'global', // or 'local' or 'none'
mtextInheritFont: true, // required to correctly render RTL Persian text inside a formula
scale: 0.97, // global scaling factor for all expressions
minScale: 0.6 // smallest scaling factor to use
//matchFontHeight: true, // true to match ex-height of surrounding font
//exFactor: .5, // default size of ex in em units
//displayAlign: 'center', // default for indentalign when set to 'auto'
//displayIndent: '0' // default for indentshift when set to 'auto'
},
chtml: {
mtextInheritFont: true, // required to correctly render RTL Persian text inside a formula
scale: 0.97, // global scaling factor for all expressions
minScale: 0.6 // smallest scaling factor to use
//matchFontHeight: true, // true to match ex-height of surrounding font
//exFactor: .5, // default size of ex in em units
//displayAlign: 'center', // default for indentalign when set to 'auto'
//displayIndent: '0', // default for indentshift when set to 'auto'
//adaptiveCSS: true // true means only produce CSS that is used in the processed equations
}
};
The problem is with these options:
skipTags, includeHtmlTags, and tagFormat
any of them which I use, an error is written in console which says Invalid option as there is no default value. As far as I have learned, this error shows these are not loaded, but I don't know how to do so. Adding codes like load: ['[tex]/tagFormat'] gives another error when it cannot find the js file in a specific address, while MathJax3 is seemingly supposed to be a one single file solution.
Where am I wrong? and what's the solution?
Thanks in advance
There is an error in the documentation concerning the skipHtmlTags, includeHtmlTags and a few other options. They should be in the options sub-object, not the tex subject. Also, it is skipHtmlTags, not skipTags.
As for tagFormat, it is not included in the base tex-sag.js file, so you do need to load it separately. Since you have only copied the base tex-svg.js file, and no the tagFormat component, that will lead to a load failure (the message you are getting). It would be better if you installed the complete MathJax distribution if you are hosting your own copy, otherwise these kinds of load problems can occur. Otherwise, you might want to use the tex-svg-full.js file, which includes nearly all the TeX extensions.
Here's a working example, using the CDN, and tex-svg.js, while loading the tagFormat extension by hand (so the initial download is smaller).
<script>
window.MathJax = {
options: {
renderActions: {
addMenu: []
},
skipHtmlTags: ["script", "style", "textarea", "pre", "code"], //their contents won't be scanned for math
includeHtmlTags: {br: '\n', wbr: '', '#comment': ''}, // HTML tags that can appear within math
},
loader: {
load: ['[tex]/tagFormat']
},
tex: {
inlineMath: [ ["$","$"] ],
displayMath: [ ["$$","$$"] ],
processEscapes: true,
packages: {'[+]': ['tagFormat']},
digits: /^(?:[\d۰-۹]+(?:[,٬'][\d۰-۹]{3})*(?:[\.\/٫][\d۰-۹]*)?|[\.\/٫][\d۰-۹]+)/, // introduce numbers
tagSide: "right",
tagIndent: ".8em",
multlineWidth: "85%",
tags: "all",
tagFormat: {
number: function(n){
return String(n)
.replace(/0/g,"۰")
.replace(/1/g,"۱")
.replace(/2/g,"۲")
.replace(/3/g,"۳")
.replace(/4/g,"۴")
.replace(/5/g,"۵")
.replace(/6/g,"۶")
.replace(/7/g,"۷")
.replace(/8/g,"۸")
.replace(/9/g,"۹");
}
}
},
svg: {
fontCache: 'global', // or 'local' or 'none'
mtextInheritFont: true, // required to correctly render RTL Persian text inside a formula
scale: 0.97, // global scaling factor for all expressions
minScale: 0.6 // smallest scaling factor to use
}
};
</script>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-svg.js">
</script>
Testing math:
\begin{align}
\sqrt{x^2<br>
+1}
\end{align}
I've left in the skipHtmlTags and includeHtmlTags options, even though these are the defaults and they could be removed. Also, the tagFormat.number function receives a number not a string, so you need to create the string from it before you can do the substitutions.
Finally, this example has pointed out that there is a timing issue between the tagFormat extension and the ams tag format (which isn't available until after the ams extension is registered), so I've used the all tagging for now. I will submit a bug report for that.
Edit
Here's a version that includes a patch that overrides the tagFormat extension with one that handles the ams tags properly. You can use it for now until MathJax is fixed.
<script>
window.MathJax = {
loader: {
load: ['[tex]/tagFormat']
},
startup: {
ready: function () {
var Configuration = MathJax._.input.tex.Configuration.Configuration;
var TagsFactory = MathJax._.input.tex.Tags.TagsFactory;
var tagFormatConfig = MathJax._.input.tex.tag_format.TagFormatConfiguration.tagFormatConfig;
var TagformatConfiguration = MathJax._.input.tex.tag_format.TagFormatConfiguration.TagformatConfiguration;
Configuration.create('tagFormat', {
config: function (config, jax) {
var tags = jax.parseOptions.options.tags;
if (tags !== 'base' && config.tags.hasOwnProperty(tags)) {
TagsFactory.add(tags, config.tags[tags]);
}
return tagFormatConfig(config, jax);
},
configPriority: 5,
options: TagformatConfiguration.options
});
return MathJax.startup.defaultReady();
}
},
tex: {
packages: {'[+]': ['tagFormat']},
tags: "ams",
tagFormat: {
number: function(n){
return String(n)
.replace(/0/g,"۰")
.replace(/1/g,"۱")
.replace(/2/g,"۲")
.replace(/3/g,"۳")
.replace(/4/g,"۴")
.replace(/5/g,"۵")
.replace(/6/g,"۶")
.replace(/7/g,"۷")
.replace(/8/g,"۸")
.replace(/9/g,"۹");
}
}
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-svg.js">
</script>
Testing math:
\begin{align}
\sqrt{x^2<br>
+1}\qquad \text{with AMS number}
\end{align}
$$
\sqrt{x^2+1}\qquad\text{with no number}
$$
I've removed the options that don't play a role in this in order to make this example a bit cleaner.

inTabOrder in MathJax not taking effect

This is a follow-up question to Override mathjax accessibility blue box feature. I'm playing around with menuSettings in MathJax. However, I can't seem to get inTabOrder to work. Here is my current MathJax config:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$', '$']],
menuSettings: { inTabOrder: false }
}
});
</script>
Can anyone see what I'm doing wrong? Any suggestions will be appreciated.
It should be
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$', '$']]
},
menuSettings: { inTabOrder: false }
});
</script>
as the menuSettings block should be at the top level, not nested inside the tex2jax block.

I'm new to node.js, and I'm working on getting a pie chart working

I'm trying to get a pie chart. However, it isn't working too well. The page is completely blank.
I'm using node.js. I have chart.js installed though npm. I run this html on my ejs file, and it is just a blank page.
<code>
<html>
<head>
<script src="../node_modules/chart.js/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
]
var pieOptions = {
segmentShowStroke : false,
animateScale : true
}
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Pie(data, pieOptions);
</script>
</body>
</html>
</code>
I didn't read too deeply into your code but I noticed that you have your node.js code in the head of the file. Unfortunately, node.js cannot be executed in the browser, but is used for server side implementation of code. What does your console say?
Here is what I had to do.
I copied the Charts.min.js file from the node_modules to the public folder.
Other than that, I have the canvas at the top. Also, I had to change the:
var ctx = document.getElementById("myChart").getContext("2d");
to
var ctx = document.getElementById('myChart').getContext('2d');

masonry reshuffle after div animation

I'm trying to get the jquery masonry script to reshuffle after I animate the size of a div. I had seen some examples but I just can't seem to get it working. I tried:
<script>
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
isAnimated: true
});
});
</script>
<script>
$("#test").click( function() {
$("#test").animate ({
"width": 300,
"height": 200
}, 250 );
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
isAnimated: true
});
});
</script>
I also tried
<script>
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
isAnimated: true
});
});
</script>
<script>
$("#test").click( function() {
$("#test").animate ({
"width": 300,
"height": 200
}, 250 );
$("#container|).masonry("reload");
});
</script>
For some reason I can't get the reshuffle to happen. Here is the page it's not working with http://www.klossal.com/masonry.html
thanks in advance for any help on this.
Masonry("reload") should work but you have an error in your line $("#container|).masonry("reload");. Your need a closing normal quote and not a pipe like so: $("#container").masonry("reload"); I also don't think I don't think you need isotope to shuffle. The easist would be to reorder the tiles before feeding it to masonry. Simple look at my site (http://www.phpdevpad.de). When you click on the menu on the left and try different combinations the tiles are shuffled.
If you want the shuffle method, you need to use Isotope; Masonry's bigger sister. See the github discussion here.

How can I enable the handle on layout manager?

Given the following javascript code :
var layoutFull = new YAHOO.widget.Layout({
units: [
{
position: 'left',
header: 'Right',
width: 300,
resize: true,
collapse: true,
scroll: true,
body: 'right1',
animate: true
},
{
position: 'center',
body: 'Da center...'
}
]
});
layoutFull.render();
I can have a full layout with a collapsible left pane. But there is a fine line between left and center parts. I would like to be able to drag this line for resizing both left and center part as in this example : http://developer.yahoo.com/yui/examples/layout/page_layout_source.html.
Which property should I enable in the layout configuration ? Looking at sample or the API doc didn't give me any luck.
I'm wondering if the following two libraries need to be included ...
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/resize/resize-min.js"></script>
Without 'seeing' the html, its rather hard to guess. Some 'magic' might occur by adding these two. Just a hunch. :)

Resources