Difference between revisions of "Ticks"
m |
|||
Line 1: | Line 1: | ||
+ | <jsxgraph height="200" width="700" box="boxX"> | ||
+ | var brdX = JXG.JSXGraph.initBoard('boxX', {originX: 350, originY: 100, unitX: 40, unitY: 40}); | ||
+ | var axX = brdX.createElement('axis', [[0,0],[1,0]]); | ||
+ | brdX.createElement('ticks',[axX,0.5], {majorTicks:3,majHeight:80,minHeight:3,strokeColor:'red'}); | ||
+ | brdX.createElement('ticks',[axX,[-2,4.2]], {strokeColor:'black'}); | ||
+ | brdX.createElement('ticks',[axX,function(i){ return (Math.PI).toFixed(2);}], {strokeColor:'green',majHeight:120}); | ||
+ | brdX.fullUpdate=true; brdX.update(); brdX.fullUpdate=false; | ||
+ | </jsxgraph> | ||
+ | |||
+ | <source lang="javascript"> | ||
+ | var brdX = JXG.JSXGraph.initBoard('boxX', {originX: 350, originY: 100, unitX: 40, unitY: 40}); | ||
+ | var axX = brd2.createElement('axis', [[0,0],[1,0]]); | ||
+ | brdX.createElement('ticks',[axX,0.5], {majorTicks:3,majHeight:80,minHeight:3,strokeColor:'red'}); | ||
+ | brdX.createElement('ticks',[axX,[-2,4.2]], {strokeColor:'black'}); | ||
+ | brdX.createElement('ticks',[axX,function(i){ return (Math.PI).toFixed(2);}], {strokeColor:'green',majHeight:120}); | ||
+ | brdX.fullUpdate=true; brdX.update(); brdX.fullUpdate=false; | ||
+ | </source> | ||
+ | |||
+ | <div:m style="display:none"> | ||
+ | '''The text below is for the next release. It doesn't work by now, because many of the required methods aren't released yet.''' | ||
+ | |||
+ | Ticks are little indicators on an axis to mark special positions on that axis. In JSXGraph they come in mainly three flavors: Aequidistant, functional and special ticks. Aequidistant ticks are those with the same distance between each marker, the distance between two functional ticks is determined by a function taking the number i of the tick (<math>i \in \mathbb{Z}</math>) and returning the distance between the (i-1)-th and the i-th tick. Aequidistant and functional ticks are created all over the axis against what special ticks are only created once. | ||
+ | |||
+ | =Create Ticks= | ||
+ | |||
+ | '''Note''': You can create ticks on any GeometryElement based on the Line-object such as Line and Axis. So every appearance of axis in the examples on this page can be replaced by line and vice versa. | ||
+ | |||
+ | ==Aequidistant ticks== | ||
+ | To construct aequidistant ticks you just have to call <tt>createElement</tt> with type '''ticks''' and parents array with a line or axis in the first and a positive number describing the distance between two ticks in the second element: | ||
+ | <source lang="javascript"> | ||
+ | brd1.createElement('ticks',[axis, 1]); | ||
+ | </source> | ||
+ | |||
+ | For example: | ||
<jsxgraph height="200" width="700" box="box1"> | <jsxgraph height="200" width="700" box="box1"> | ||
var brd1 = JXG.JSXGraph.initBoard('box1', {originX: 350, originY: 100, unitX: 40, unitY: 40}); | var brd1 = JXG.JSXGraph.initBoard('box1', {originX: 350, originY: 100, unitX: 40, unitY: 40}); | ||
− | var ax1 = brd1.createElement(' | + | var ax1 = brd1.createElement('line', [[0,0],[1,0]]); |
− | brd1.createElement('ticks',[ax1, | + | brd1.createElement('ticks',[ax1, 1], {majorTicks:5, majorTickHeight:10, minorTickHeight:4}); |
− | brd1.createElement(' | + | </jsxgraph> |
− | brd1.createElement('ticks',[ax1, | + | <source lang="javascript"> |
− | + | var brd1 = JXG.JSXGraph.initBoard('box1', {originX: 350, originY: 100, unitX: 40, unitY: 40}); | |
+ | var ax1 = brd1.createElement('line', [[0,0],[1,0]]); | ||
+ | brd1.createElement('ticks',[ax1, 1], {majorTicks:5, majorTickHeight:10, minorTickHeight:4}); | ||
+ | </source> | ||
+ | You may notice that here are some ticks that have bigger height than other ticks. Those are called ''major ticks'', the smaller ones are called ''minor ticks''. | ||
+ | Ticks like shown above are automatically constructed when creating an axis: | ||
+ | <jsxgraph height="200" width="700" box="box2"> | ||
+ | var brd2 = JXG.JSXGraph.initBoard('box2', {originX: 350, originY: 100, unitX: 40, unitY: 40}); | ||
+ | var ax2 = brd2.createElement('axis', [[0,0],[1,0]]); | ||
</jsxgraph> | </jsxgraph> | ||
+ | <source lang="javascript"> | ||
+ | var brd2 = JXG.JSXGraph.initBoard('box2', {originX: 350, originY: 100, unitX: 40, unitY: 40}); | ||
+ | var ax2 = brd2.createElement('axis', [[0,0],[1,0]]); | ||
+ | </source> | ||
+ | If you wish to use other than the default options for the ticks when creating an axis, you can do so. The attributes names are the same when creating ticks directly: | ||
+ | {| cellpadding="8" cellspacing="0" border="1" | ||
+ | ! Attribute !! Type !! Effect | ||
+ | |- | ||
+ | | insertTicks || bool || Inserts ticks whenever the distance between two ticks is too big. | ||
+ | |- | ||
+ | | majorTickHeight || positive integer || This is the height (in pixel) for major ticks. | ||
+ | |- | ||
+ | | minorTickHeight || positive integer || This is the height (in pixel) for minor ticks. | ||
+ | |- | ||
+ | | majorTicks || positive integer || majorTicks-1 is the amount of minor ticks between two major ticks. | ||
+ | |- | ||
+ | | drawZero || bool || If ''true'', a tick at zero (the first point of the two defining the line) is drawn. | ||
+ | |- | ||
+ | | drawLabels || bool || If ''true'', labels showing the ticks position on the axis are drawn beneath every majorTick. | ||
+ | |- | ||
+ | | strokeColor || HTML colorstring || Changes stroke color of the ticks | ||
+ | |- | ||
+ | | strokeWidth || positive integer || Drawing width for ticks. | ||
+ | |} | ||
+ | There's just one special attribute for creating aequidistant ticks together with their axis: '''ticksDistance''' determines the distance between two ticks. | ||
+ | |||
+ | '''Note''': These options are ''for axis creation only'' and are ignored when constructing lines! | ||
+ | |||
+ | ==Special ticks== | ||
+ | Special ticks can't be constructed together with an axis and therefore have to be created directly. The only difference between creating aequidistant and creating special ticks is the second element of the parents array. For special ticks you have to give an array of positions on the axis, where special ticks are to be drawn. You always need an array for this, even if there's only one special tick to draw: | ||
+ | <jsxgraph height="200" width="700" box="box3"> | ||
+ | var brd3 = JXG.JSXGraph.initBoard('box3', {originX: 350, originY: 100, unitX: 40, unitY: 40}); | ||
+ | var ax3 = brd3.createElement('axis', [[0,0],[1,0]]); | ||
+ | brd3.createElement('ticks', [ax3, [3.5]], {strokeColor: '#00ff00'}); | ||
+ | </jsxgraph> | ||
+ | <source lang="javascript"> | ||
+ | var brd3 = JXG.JSXGraph.initBoard('box3', {originX: 350, originY: 100, unitX: 40, unitY: 40}); | ||
+ | var ax3 = brd3.createElement('axis', [[0,0],[1,0]]); | ||
+ | brd3.createElement('ticks', [ax3, [3.5]], {strokeColor: '#00ff00'}); | ||
+ | </source> | ||
+ | Or more than one special tick: | ||
+ | <jsxgraph height="200" width="700" box="box4"> | ||
+ | var brd4 = JXG.JSXGraph.initBoard('box4', {originX: 350, originY: 100, unitX: 40, unitY: 40}); | ||
+ | var ax4 = brd4.createElement('axis', [[0,0],[1,0]]); | ||
+ | brd4.createElement('ticks', [ax4, [-4.33333, -1.5, 3.5, 4.321]], {strokeColor: '#00ff00', majorTickHeight: 15}); | ||
+ | </jsxgraph> | ||
<source lang="javascript"> | <source lang="javascript"> | ||
− | var | + | var brd4 = JXG.JSXGraph.initBoard('box4', {originX: 350, originY: 100, unitX: 40, unitY: 40}); |
− | var | + | var ax4 = brd4.createElement('axis', [[0,0],[1,0]]); |
− | + | brd4.createElement('ticks', [ax4, [-4.33333, -1.5, 3.5, 4.321]], {strokeColor: '#00ff00', majorTickHeight: 15}); | |
− | |||
− | |||
− | |||
</source> | </source> | ||
+ | The possible attributes here are mostly the same as above when creating aequidistant ticks: | ||
+ | {| cellpadding="8" cellspacing="0" border="1" | ||
+ | ! Attribute !! Type !! Effect | ||
+ | |- | ||
+ | | majorTickHeight || positive integer || This is the height (in pixel) for all special ticks. | ||
+ | |- | ||
+ | | drawLabels || bool || If ''true'', labels showing the ticks position on the axis are drawn beneath every majorTick. | ||
+ | |- | ||
+ | | strokeColor || HTML colorstring || Changes stroke color of the ticks | ||
+ | |- | ||
+ | | strokeWidth || positive integer || Drawing width for ticks. | ||
+ | |} | ||
+ | ==Functional ticks== | ||
+ | todo | ||
+ | |||
+ | =Remove ticks= | ||
+ | You can remove all ticks attached to a line or an axis by calling the <tt>removeAllTicks()</tt> method of the line you want to have 'tickless'. | ||
+ | |||
+ | </div:m> | ||
+ | |||
[[Category:Examples]] | [[Category:Examples]] |
Revision as of 13:33, 14 March 2009
var brdX = JXG.JSXGraph.initBoard('boxX', {originX: 350, originY: 100, unitX: 40, unitY: 40});
var axX = brd2.createElement('axis', [[0,0],[1,0]]);
brdX.createElement('ticks',[axX,0.5], {majorTicks:3,majHeight:80,minHeight:3,strokeColor:'red'});
brdX.createElement('ticks',[axX,[-2,4.2]], {strokeColor:'black'});
brdX.createElement('ticks',[axX,function(i){ return (Math.PI).toFixed(2);}], {strokeColor:'green',majHeight:120});
brdX.fullUpdate=true; brdX.update(); brdX.fullUpdate=false;
<div:m style="display:none"> The text below is for the next release. It doesn't work by now, because many of the required methods aren't released yet.
Ticks are little indicators on an axis to mark special positions on that axis. In JSXGraph they come in mainly three flavors: Aequidistant, functional and special ticks. Aequidistant ticks are those with the same distance between each marker, the distance between two functional ticks is determined by a function taking the number i of the tick ([math]i \in \mathbb{Z}[/math]) and returning the distance between the (i-1)-th and the i-th tick. Aequidistant and functional ticks are created all over the axis against what special ticks are only created once.
Contents
Create Ticks
Note: You can create ticks on any GeometryElement based on the Line-object such as Line and Axis. So every appearance of axis in the examples on this page can be replaced by line and vice versa.
Aequidistant ticks
To construct aequidistant ticks you just have to call createElement with type ticks and parents array with a line or axis in the first and a positive number describing the distance between two ticks in the second element:
brd1.createElement('ticks',[axis, 1]);
For example:
var brd1 = JXG.JSXGraph.initBoard('box1', {originX: 350, originY: 100, unitX: 40, unitY: 40});
var ax1 = brd1.createElement('line', [[0,0],[1,0]]);
brd1.createElement('ticks',[ax1, 1], {majorTicks:5, majorTickHeight:10, minorTickHeight:4});
You may notice that here are some ticks that have bigger height than other ticks. Those are called major ticks, the smaller ones are called minor ticks. Ticks like shown above are automatically constructed when creating an axis:
var brd2 = JXG.JSXGraph.initBoard('box2', {originX: 350, originY: 100, unitX: 40, unitY: 40});
var ax2 = brd2.createElement('axis', [[0,0],[1,0]]);
If you wish to use other than the default options for the ticks when creating an axis, you can do so. The attributes names are the same when creating ticks directly:
Attribute | Type | Effect |
---|---|---|
insertTicks | bool | Inserts ticks whenever the distance between two ticks is too big. |
majorTickHeight | positive integer | This is the height (in pixel) for major ticks. |
minorTickHeight | positive integer | This is the height (in pixel) for minor ticks. |
majorTicks | positive integer | majorTicks-1 is the amount of minor ticks between two major ticks. |
drawZero | bool | If true, a tick at zero (the first point of the two defining the line) is drawn. |
drawLabels | bool | If true, labels showing the ticks position on the axis are drawn beneath every majorTick. |
strokeColor | HTML colorstring | Changes stroke color of the ticks |
strokeWidth | positive integer | Drawing width for ticks. |
There's just one special attribute for creating aequidistant ticks together with their axis: ticksDistance determines the distance between two ticks.
Note: These options are for axis creation only and are ignored when constructing lines!
Special ticks
Special ticks can't be constructed together with an axis and therefore have to be created directly. The only difference between creating aequidistant and creating special ticks is the second element of the parents array. For special ticks you have to give an array of positions on the axis, where special ticks are to be drawn. You always need an array for this, even if there's only one special tick to draw:
var brd3 = JXG.JSXGraph.initBoard('box3', {originX: 350, originY: 100, unitX: 40, unitY: 40});
var ax3 = brd3.createElement('axis', [[0,0],[1,0]]);
brd3.createElement('ticks', [ax3, [3.5]], {strokeColor: '#00ff00'});
Or more than one special tick:
var brd4 = JXG.JSXGraph.initBoard('box4', {originX: 350, originY: 100, unitX: 40, unitY: 40});
var ax4 = brd4.createElement('axis', [[0,0],[1,0]]);
brd4.createElement('ticks', [ax4, [-4.33333, -1.5, 3.5, 4.321]], {strokeColor: '#00ff00', majorTickHeight: 15});
The possible attributes here are mostly the same as above when creating aequidistant ticks:
Attribute | Type | Effect |
---|---|---|
majorTickHeight | positive integer | This is the height (in pixel) for all special ticks. |
drawLabels | bool | If true, labels showing the ticks position on the axis are drawn beneath every majorTick. |
strokeColor | HTML colorstring | Changes stroke color of the ticks |
strokeWidth | positive integer | Drawing width for ticks. |
Functional ticks
todo
Remove ticks
You can remove all ticks attached to a line or an axis by calling the removeAllTicks() method of the line you want to have 'tickless'.
</div:m>