1. How to draw standard number line in JSXGraph



According to its developer, the University of Bayreuth, Germany, JSXGraph is a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser. This software is implemented completely in JavaScript, and does not rely on any other library. It uses SVG, VML, or HTML canvas. JSXGraph is easy to embed (if you know how Javascript works) and has a very small footprint without required plug-ins. JSXGraph supports multi-touch devices running iOS, Android, firefoxOS, Windows 8. This software is essential to create portable documents which require standard mathematical graphs and symbols since JSXGraph syntax can be rendered in HTML and converted quickly to Acrobat pdf format.
Note 1. Drawing standard number line with arbitrary labels and annotations \(f(x)=y=b\). This note shows how to customize the horizontal axis into typical number line in algebra. Following is a list of paramaters which need to be configured.
1. boundingbox:[left,top,right,bottom], left and right defines the numeric range to be shown on the number line (width of 450px in div id=test1). The left value should be the lower range of the number line to display. The right value is the upper range.
2. keepAspectRatio:false to display the exact range of the number line [-5,5] in this note. A custom horizontal axis needs to be created since the default axis has faint tick marks below the axis.
3. Remove border-radius:8px or uses 0px if a square corner is desired.
4. Set grid:false or set to true temporarily to check the origin location and the desired range of the number line.
5. Set showNavigation:false to suppress all navigation markers which are meaningful only to interactive sessions.
6. Set showCopyright:false to suppress JSXGraph default copyright text. Your custom copyright or watermark can be designed quickly with text function.
7. Tick marks provided by default horizontal axis are not meaningful for number line, use removeAllTicks().
8. The tick mark label increment should be 1, [xAxis,1]. Use 2 if skipping every other tick mark label.
9. firstArrow (negative direction), lastArrow (positive direction) should be off. Use strokeColor to draw the axis in a desired color or shade.
10. drawZero:true to include the label of the origin.
11. majorHeight:6 to control the height (size) of the major ticks. minorHeight:2 to control the height (size) of the minor ticks.
12. label:{offset,strokeColor,fontSize} to adjust the position of the label (positive amount moves the labels to the left or up), color and size of the labels. The label color can be different from the color of the number line.
13. minorTicks:3 to divide the distance between two consecutive major ticks into four equal parts (3+1, useful for fraction marking).
14. The position and color of the label of a point can be adjusted with attribute label:{offset,strokeColor,fontSize}. The face and weight of the labels can be changed via the cssClass style option (JXG.Options.text.cssClass, see class .myfont). The label color can be different from the color of the point. The label can be in Latex/MathJax mathematical symbols (such as {name:’\\(3\\dfrac{1}{2}\\)’. Notice the use of double backslashes and set the global option JXG.Options.text.useMathJax=true.
15. Point faces include the following symbols: ‘o’ (circle), ‘[]’ (square), ‘x’ (cross), ‘+’ (plus), ‘^’ (triangleUp), ‘v’ (triangleDown), ‘>’ (triangleLeft), ‘<' (triangleRight), or '<>‘ (diamond). Locations at t, y, z, and \(3\dfrac{1}{2}\) uses diamond, circle, square, and triangleRight face, respectively.