Customization of JSXGraph display

R C

unread,

Jun 30, 2020, 7:46:12 AM6/30/20

to JSXGraph

Hello,

I had a few questions about customizing the display of JSXGraph (some comments are also included in the code below)

- Can the font weight of the axes labels be changed?

I tried setting:

JXG.Options.board.defaultAxes.x.ticks.strokeWidth = 4; // no effect
JXG.Options.board.defaultAxes.y.ticks.strokeWidth = 4; // no effect
JXG.Options.board.defaultAxes.x.ticks.label.strokeWidth = 2; // no effect
JXG.Options.board.defaultAxes.y.ticks.label.strokeWidth = 2; // no effect

- Can the display of the minor ticks be completely suppressed?

Setting minor height to zero still seems to leave some faint traces on the axes.

JXG.Options.board.defaultAxes.x.ticks.minorHeight = 0;

JXG.Options.b.defaultAxes.y.ticks.minorHeight = 0;

- I encountered some discrepancies in using MathJax, for example in the 'text' element in the code below.

I had set

JXG.Options.text.useMathJax = true;

JXG.Options.label.useMathJax = true;

Is there another setting that needs to be to changed?

- Is there a method to clear traces? On changing a parameter using an 'input' element, the previous trace remains.

I wrapped the board creation in the update function, but a function method would possibly be cleaner.

- I was able to modify the baseline settings for the slider, but could not find settings to change the stroke color or width of the line indicating the slider setting, or the color of the labels.

Is this possible? Also, I am currently using an external slider for multiple handles for setting a parameter range as I could not find a way to do that in JSXGraph.

- Are dual y-axes possible?

- Finally, can the background color of the board be changed? In the code below, I set the background color of the 'div' element in html.

Thank you very much for making this powerful and flexible program to develop interactive visualizations freely available.

<html>
<head>
<title>Minimal Customization Example</title>
<script type="text/x-mathjax-config"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\$','\$']]}}); </script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
<script src="https://cdn.jsdelivr.net/npm/jsxg...@1.1.0/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxg...@1.1.0/distrib/jsxgraph.css" />
<style>
input {
text-align: center;
}
</style>
</head>
<body>
<div>
Plot $\alpha x^2 - \beta$. The value of $\alpha$ is controlled by the slider and $\beta$ using the input box, $\beta = $
<input id="c" type="number" name="c" value="5">
<input type="button" onClick="run()" value="Run">
</div>
<div id="jxgbox" class="jxgbox" style="width:1200px; height:900px; background-color:lightgray">
</div>
<script>
JXG.Options.board.defaultAxes.x.strokeColor = 'gray';
JXG.Options.board.defaultAxes.y.strokeColor = 'gray';
JXG.Options.board.defaultAxes.x.ticks.strokeColor = 'ivory';
JXG.Options.board.defaultAxes.y.ticks.strokeColor = 'ivory';
JXG.Options.board.defaultAxes.x.ticks.label.strokeColor = 'blue';
JXG.Options.board.defaultAxes.y.ticks.label.strokeColor = 'blue';
JXG.Options.board.defaultAxes.x.ticks.label.fontSize = 16;
JXG.Options.board.defaultAxes.y.ticks.label.fontSize = 16;
// JXG.Options.board.defaultAxes.x.ticks.label.fontWeight = 'bold';
JXG.Options.board.defaultAxes.x.strokeWidth = 2;
JXG.Options.board.defaultAxes.y.strokeWidth = 2;
JXG.Options.board.defaultAxes.x.ticks.strokeWidth = 4; // no effect
JXG.Options.board.defaultAxes.y.ticks.strokeWidth = 4; // no effect
JXG.Options.board.defaultAxes.x.ticks.label.strokeWidth = 2; // no effect
JXG.Options.board.defaultAxes.y.ticks.label.strokeWidth = 2; // no effect
// setting minor height to zero still seems to leave some traces on axes
JXG.Options.board.defaultAxes.x.ticks.minorHeight = 0;
JXG.Options.board.defaultAxes.y.ticks.minorHeight = 0;
JXG.Options.text.useMathJax = true;
JXG.Options.label.useMathJax = true;
function run(){
const board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5, 8, 5, -8], axis: true, grid: false});
var a = board.create('slider', [[1, 7.5], [3, 7.5], [1, 2, 3]],
{name: '$\\alpha$', strokeColor:'red', fillColor:'red',
ticks:{drawLabels:true,
labels:{strokeColor:'red'} // no effect
},
baseline:{strokeWidth:1.5, strokeColor:'red'},
labels:{strokeColor:'red'} // no effect
});
board.create('text', [-4, 4, '$\\alpha x^2 - \\beta$']); // display is incorrect
var X = [-2, -1, 0, +1, +2];
var attr = {
strokeColor:'black',
fillColor:'white',
face:'[]',
size:4,
strokeWidth: 2,
withLabel: false
};
var c = 2;

// function update(){
c = document.getElementById('c').value;
var points = X.map( x => board.create('point',
[ x, function () { return a.Value()*x*x - c; } ], attr) );
var curve1 = board.create('spline', points); // smooth curve
}
</script>
</body>
</html>

Alfred Wassermann

unread,

Jul 2, 2020, 6:43:36 AM7/2/20

to JSXGraph

Hi,

these are very interesting question and certainly are of interest fo many users.

Beside the MathJax question, all answers can be seen in action at https://jsfiddle.net/8adzfsbo/4/

1. Can the font weight of the axes labels be changed?

The recommended way to do this is to use a CSS class:

<style>
.myFont {
  font-weight: bold;
}
</style>

Then, in JSXGraph there are three options, depending what is to be changed,

// 1. Adjust all labels
// JXG.Options.label.cssClass = 'myFont';

// 2. Adjust just ticks labels
JXG.Options.ticks.label.cssClass = 'myFont';

// 3. Adjust the labels of the default axes, only
// JXG.Options.board.defaultAxes.x.ticks.label.cssClass = 'myFont';
// JXG.Options.board.defaultAxes.y.ticks.label.cssClass = 'myFont';

2. Can the display of the minor ticks be completely suppressed?

Yes

// Set the number of minor ticks between two major ticks to zero
// for the default axes:
JXG.Options.board.defaultAxes.x.ticks.minorTicks = 0;
JXG.Options.board.defaultAxes.y.ticks.minorTicks = 0;

3. I encountered some discrepancies in using MathJax.

The problem can be fixed by adding the attribute "parse:false". This is the default for labels.

If "parse:true" which is default, four (!) backslashes have to be used.

board.create('text', [-4, 4, '$\\alpha x^2 - \\beta$'], {parse: false});

Further, strongly recommend to use MathJAx 3. It renders much faster:

<script>
window.MathJax = {
  tex: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    packages: ['base', 'ams']
  },
  options: {
    ignoreHtmlClass: 'tex2jax_ignore',
    processHtmlClass: 'tex2jax_process'
  }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>

4. Is there a method to clear traces?

There are three possibilities:

a) use "showClearTraces:true" as board attribute. Then the user sees an icon to clear the traces

b) Call board.clearTraces(): clears all traces

c) Call A.clearTrace(): clears the trace of the element A

5. I was able to modify the baseline settings for the slider, but could not find settings to change the stroke color or width of the line indicating the slider setting, or the color of the labels.

Change the attributes of "highline" and "ticks: {label}"

var slider_attr = {


            strokeColor:'red', fillColor:'red',                  
            ticks:{ 
                    drawLabels: true,


                    label:{strokeColor:'red'} 
                  }, 
            baseline:{


                strokeWidth: 1.5, 
                strokeColor: 'red'
            },


            highline:{
                strokeWidth: 3, 
                strokeColor: 'blue'
            }          
    };

6. Also, I am currently using an external slider for multiple handles for setting a parameter range as I could not find a way to do that in JSXGraph.

Why not use a second slider?

slider_attr.name = 'a';
var a = board.create('slider', [[1, 4.5], [3, 4.5], [1, 2, 3]], slider_attr);
slider_attr.name = 'c';
var c = board.create('slider', [[1, 3.5], [3, 3.5], [1, 2, 3]], slider_attr);

7. Are dual y-axes possible?

Yes, for example

var ax = board.create('axis', [[-4,0], [-4,1]], {
 ticks: {visible: false}
  });
var ti = board.create('ticks', [ax, [-3.141, 3.141]], {
 drawLabels:true, 
          scale: 3.1415,
          scaleSymbol: '&pi;',
          label: {offset: [10, 0]}
          });

8. Can the background color of the board be changed? In the code below, I set the background color of the 'div' element in html.

Yes, using CSS is the way to change the background.

Best wishes,

Alfred

R C

unread,

Jul 2, 2020, 11:40:57 AM7/2/20

to jsxg...@googlegroups.com

Hello Dr. Wassermann,
Thank you for your detailed responses to my numerous questions. They
were very helpful also in helping me better understand how to use CSS
to customize JSXgraph elements.

My understanding, please let me know if I am wrong, is that the
scaling of the data points plotted is associated with the bounding box
defined for the board, so plotting two data sets with significantly
different y ranges would require appropriate rescaling. My question
was related to an option to associate a data set with an axis, with
the necessary rescaling done automatically, but I can implement this
on a case by case basis.

With regard to clearing traces, I was hoping to avoid an additional
click to clear the traces, as in the cases I am interested in,
clearing traces would always be necessary on changing an input field.
Including the statement 'board.clearTraces()' in the update function
did not seem to work, but I may have to look further into its
placement in the code. In any case, I can redraw the board on change
in input, as in the example I posted.

Thanks again for your help.

> --
> You received this message because you are subscribed to a topic in the Google Groups "JSXGraph" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsxgraph/8gddSLm2Za8/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to jsxgraph+u...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/jsxgraph/e176cb9c-be73-48d8-896e-337b17ae6525o%40googlegroups.com.

--
Regards,
RC

Reply all

Reply to author

Forward