5. Grids in log scale



Note 5. The first graph displays grids as semi-log (the tick marks on y-axis are positioned in log scale while the x-axis has the linear scale).
1. Log base-10 is used so that log(10) is 1. Javascript math function supports only natural log base e. Use the formula Math.log(x)/Math.log(10) to convert log base e to base 10. To speed up computation, the constant Math.LN10 which is 2.302585092994046 should be used instead of recomputing log(10), especially in long loops.
2. Both JXG.Options.grid.gridX and JXG.Options.grid.gridY are set at 1 so calling b.create(‘grid’,[],{strokeColor:’#C0C040′}) will show the grid lines at every unit increment.
3. The tick labels for x-axis b.create(‘ticks’,[xAxis,2], skip every other label (increment by 2) and are positioned above the x-axis by drawLabels:true,label:{offset:[-3,9]. The minor ticks are used to indicate the skipped labels minorTicks:1.
4. The log scale markers for the y-axis without labels. Since jsxgraph does not seem to support grid lines at arbitrary increment, the grid lines at tick positions on the y-axis are drawn as horizontal lines. The common log scale basically shows the exponents of 10. If the scale value of 1 corresponds to the exponent 1 in 101, 2 corresponds to 0.30102999566398114 in 100.30102999566398114, 3 corresponds to 0.4771212547196624 in 100.4771212547196624.
5. Graph the function $f(x)=ln(x)$ showing sample points with coordinates (linear,log).


6. The second graph displays grid lines in log-log scale. Since both the x-axis and y-axis are shown in log scale, graph of the function $f(x)=ln(x)$ becomes a straight line in interval $[0.1,\infty)$. The bounding box is convenient to set up the range of both axes quickly. Since $log(x)$ becomes $-\infty$ when $x$ reaches 0, a small interval from 0.1 to 1 should be included to show the negative region of $log(x)$. The x-axis range displays values from 0.1 to 100 (-1 to 2 in linear scale which represents 10-1 to 102. The y-axis display range is from -1 to 2 accordingly. The bounding box parameter is [-0.1,2.1,3.1,-1.1] which represents [left,top, right,bottom]. Since the y-axis is drawn at the position $x$=0, 0.1 corresponds to the exponent -1 which is mapped to $x$=0. 1.0 corresponds to the exponent 0 which is mapped to $x$=1. 10.0 corresponds to the exponent 1 which is mapped to $x$=2. 100.0 corresponds to the exponent 3 which is mapped to $x$=2. The graph shows $f$(0.1)=-1, $f$(1)=0, $f$(10)=1, and $f$(100)=2.
7. Grid has no parent, therefore the second parameter is coded as an empty pair of square bracket []. Any parameters if specified are ignored. Grid lines are drawn based upon fixed increments defined in XG.Options.grid.gridX and XG.Options.grid.gridY which are not useful for non-linear log scale.
8. To avoid collision with the function graph, labels for the points are positioned to the side of each point by specifying name:ty,label:{offset:[dx,dy], where dx and dy are offsets in pixels from the original position of the label which can then be computed dynamically by Javascript. ty is an array prepared by Javascript holding the formatted labels which show the Cartesian coordinates of the points corresponding to the indicated log/linear scale.
9. Labels for the x- and y-axis are shown selectively at certain ticks. The tick labels are prepared by Javascript and stored in the array tickLabely, drawLabels:true,label:{offset:[5,0],labels:tickLabely. Version 0.99 seems to display a 0 at the coordinate [0,0] even for custom tick labeling. If this behavior is undesirable, set drawLabels:false after testing is complete and use 'text' instead to improve the precision of label placement on log scale. Note that offsets specified in label:{offset:[-3,-10] are in pixels, while coordinates in the 'text' call are user coordinates. A positive offset value moves to the right of the x-axis or moves up on the y-axis.
10. Common log of $log(x)$ where $x$ is in the interval [0.1,1000]. Note the property of logarithm, log(ab)=log(a)+log(b).

Linear Log
1 0
10 1
100 2