Ticks - Revision history

A WASSERMANN at 14:08, 10 January 2023

2023-01-10T14:08:13Z

← Older revision		Revision as of 14:08, 10 January 2023
Line 15:		Line 15:
	var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax1 = brd1.create('line', [[0,0],[1,0]]);		var ax1 = brd1.create('line', [[0,0],[1,0]]);
	brd1.create('ticks',[ax1, 5], {minorTicks:4, majorHeight:10, minorHeight:4});		brd1.create('ticks',[ax1, 5], {minorTicks:4, majorHeight:20, minorHeight:4});
	</jsxgraph>		</jsxgraph>
	<source lang="javascript">		<source lang="javascript">
	var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax1 = brd1.create('line', [[0,0],[1,0]]);		var ax1 = brd1.create('line', [[0,0],[1,0]]);
	brd1.create('ticks',[ax1, 5], {minorTicks:4, majorHeight:10, minorHeight:4});		brd1.create('ticks',[ax1, 5], {minorTicks:4, majorHeight:20, minorHeight:4});
	</source>		</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''.		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''.

A WASSERMANN at 14:40, 18 January 2013

2013-01-18T14:40:51Z

← Older revision		Revision as of 14:40, 18 January 2013
Line 6:		Line 6:

	==Equidistant ticks==		==Equidistant ticks==
	To construct equidistant 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:		To construct equidistant ticks you just have to call <tt>create</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">		<source lang="javascript">
	brd1.~~createElement~~('ticks',[axis, 5]);		brd1.create('ticks',[axis, 5]);
	</source>		</source>

Line 14:		Line 14:
	<jsxgraph height="200" width="700" box="box1">		<jsxgraph height="200" width="700" box="box1">
	var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax1 = brd1.~~createElement~~('line', [[0,0],[1,0]]);		var ax1 = brd1.create('line', [[0,0],[1,0]]);
	brd1.~~createElement~~('ticks',[ax1, 5], {minorTicks:4, majorHeight:10, minorHeight:4});		brd1.create('ticks',[ax1, 5], {minorTicks:4, majorHeight:10, minorHeight:4});
	</jsxgraph>		</jsxgraph>
	<source lang="javascript">		<source lang="javascript">
	var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax1 = brd1.~~createElement~~('line', [[0,0],[1,0]]);		var ax1 = brd1.create('line', [[0,0],[1,0]]);
	brd1.~~createElement~~('ticks',[ax1, 5], {minorTicks:4, majorHeight:10, minorHeight:4});		brd1.create('ticks',[ax1, 5], {minorTicks:4, majorHeight:10, minorHeight:4});
	</source>		</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''.		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''.
Line 26:		Line 26:
	<jsxgraph height="200" width="700" box="box2">		<jsxgraph height="200" width="700" box="box2">
	var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax2 = brd2.~~createElement~~('axis', [[0,0],[1,0]]);		var ax2 = brd2.create('axis', [[0,0],[1,0]]);
	</jsxgraph>		</jsxgraph>
	<source lang="javascript">		<source lang="javascript">
	var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax2 = brd2.~~createElement~~('axis', [[0,0],[1,0]]);		var ax2 = brd2.create('axis', [[0,0],[1,0]]);
	</source>		</source>

Line 96:		Line 96:
	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' or you can remove specific ticks by calling <tt>removeTicks</tt> method of the given line instance with the a reference to the ticks instance as a parameter:		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' or you can remove specific ticks by calling <tt>removeTicks</tt> method of the given line instance with the a reference to the ticks instance as a parameter:
	<source lang="javascript">		<source lang="javascript">
	var xaxis = board.~~createElement~~('line', [point1, point2]);		var xaxis = board.create('line', [point1, point2]);
	var ticks = board.~~createElement~~('ticks', [xaxis, [1.0, 2.0, 5.0]]);		var ticks = board.create('ticks', [xaxis, [1.0, 2.0, 5.0]]);
	xaxis.removeTicks(ticks);		xaxis.removeTicks(ticks);
	</source>		</source>

	To access ticks automatically constructed on creation of an axis, use the axis property called '''defaultTicks''':		To access ticks automatically constructed on creation of an axis, use the axis property called '''defaultTicks''':
	<source lang="javascript">		<source lang="javascript">
	var xaxis = board.~~createElement~~('axis', [point1, point2]);		var xaxis = board.create('axis', [point1, point2]);
	xaxis.removeTicks(xaxis.defaultTicks);		xaxis.removeTicks(xaxis.defaultTicks);
	</source>		</source>

A WASSERMANN: /* Special ticks */

2013-01-18T14:39:21Z

Special ticks

← Older revision		Revision as of 14:39, 18 January 2013
Line 84:		Line 84:
	! Attribute !! Type !! Effect		! Attribute !! Type !! Effect
	\|-		\|-
	\| ~~majorTickHeight~~ \|\| positive integer \|\| This is the height (in pixel) for all special ticks.		\| majorHeight \|\| 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.		\| drawLabels \|\| bool \|\| If ''true'', labels showing the ticks position on the axis are drawn beneath every majorTick.

A WASSERMANN: /* Special ticks */

2013-01-18T14:23:50Z

Special ticks

← Older revision		Revision as of 14:23, 18 January 2013
Line 62:		Line 62:
	var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax3 = brd3.create('axis', [[0,0],[1,0]]);		var ax3 = brd3.create('axis', [[0,0],[1,0]]);
	brd3.create('ticks', [ax3, [~~1.5,~~3.5]], {strokeColor: '#00ff00',majorHeight:15, drawLabels: true});		brd3.create('ticks', [ax3, [3.5]], {strokeColor: '#00ff00', majorHeight:15, drawLabels: true});
	</jsxgraph>		</jsxgraph>
	<source lang="javascript">		<source lang="javascript">
	var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax3 = brd3.create('axis', [[0,0],[1,0]]);		var ax3 = brd3.create('axis', [[0,0],[1,0]]);
	brd3.create('ticks', [ax3, [3.5]], {strokeColor: '#00ff00',majorHeight:15, drawLabels: true});		brd3.create('ticks', [ax3, [3.5]], {strokeColor: '#00ff00', majorHeight:15, drawLabels: true});
	</source>		</source>
	Or more than one special tick:		Or more than one special tick:

A WASSERMANN: /* Special ticks */

2013-01-18T14:23:28Z

Special ticks

A WASSERMANN: /* Special ticks */

2013-01-18T14:22:17Z

Special ticks

← Older revision		Revision as of 14:22, 18 January 2013
Line 62:		Line 62:
	var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax3 = brd3.create('axis', [[0,0],[1,0]]);		var ax3 = brd3.create('axis', [[0,0],[1,0]]);
	brd3.create('ticks', [ax3, [3.5]], {strokeColor: '#00ff00',majorHeight:15});		brd3.create('ticks', [ax3, [1.5,3.5]], {strokeColor: '#00ff00',majorHeight:15});
	</jsxgraph>		</jsxgraph>
	<source lang="javascript">		<source lang="javascript">

A WASSERMANN: /* Special ticks */

2013-01-18T14:21:50Z

Special ticks

← Older revision		Revision as of 14:21, 18 January 2013
Line 62:		Line 62:
	var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax3 = brd3.create('axis', [[0,0],[1,0]]);		var ax3 = brd3.create('axis', [[0,0],[1,0]]);
	brd3.create('ticks', [ax3, [3.5]], {strokeColor: '#00ff00',~~majorTickHeight~~:15});		brd3.create('ticks', [ax3, [3.5]], {strokeColor: '#00ff00',majorHeight:15});
	</jsxgraph>		</jsxgraph>
	<source lang="javascript">		<source lang="javascript">

A WASSERMANN: /* Special ticks */

2013-01-18T14:21:33Z

Special ticks

← Older revision		Revision as of 14:21, 18 January 2013
Line 67:		Line 67:
	var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax3 = brd3.create('axis', [[0,0],[1,0]]);		var ax3 = brd3.create('axis', [[0,0],[1,0]]);
	brd3.create('ticks', [ax3, [3.5]], {strokeColor: '#00ff00',~~majorTickHeight~~:15});		brd3.create('ticks', [ax3, [3.5]], {strokeColor: '#00ff00',majorHeight:15});
	</source>		</source>
	Or more than one special tick:		Or more than one special tick:

A WASSERMANN: /* Special ticks */

2013-01-18T14:21:05Z

Special ticks

← Older revision		Revision as of 14:21, 18 January 2013
Line 61:		Line 61:
	<jsxgraph height="200" width="700" box="box3">		<jsxgraph height="200" width="700" box="box3">
	var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax3 = brd3.~~createElement~~('axis', [[0,0],[1,0]]);		var ax3 = brd3.create('axis', [[0,0],[1,0]]);
	brd3.~~createElement~~('ticks', [ax3, [3.5]], {strokeColor: '#00ff00'});		brd3.create('ticks', [ax3, [3.5]], {strokeColor: '#00ff00',majorTickHeight:15});
	</jsxgraph>		</jsxgraph>
	<source lang="javascript">		<source lang="javascript">
	var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax3 = brd3.~~createElement~~('axis', [[0,0],[1,0]]);		var ax3 = brd3.create('axis', [[0,0],[1,0]]);
	brd3.~~createElement~~('ticks', [ax3, [3.5]], {strokeColor: '#00ff00',majorTickHeight:15});		brd3.create('ticks', [ax3, [3.5]], {strokeColor: '#00ff00',majorTickHeight:15});
	</source>		</source>
	Or more than one special tick:		Or more than one special tick:
	<jsxgraph height="200" width="700" box="box4">		<jsxgraph height="200" width="700" box="box4">
	var brd4 = JXG.JSXGraph.initBoard('box4', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd4 = JXG.JSXGraph.initBoard('box4', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax4 = brd4.~~createElement~~('axis', [[0,0],[1,0]]);		var ax4 = brd4.create('axis', [[0,0],[1,0]]);
	brd4.~~createElement~~('ticks', [ax4, [-4.33333, -1.5, 3.5, 4.321]], {strokeColor: '#00ff00', majorHeight: 15, drawLabels: true});		brd4.create('ticks', [ax4, [-4.33333, -1.5, 3.5, 4.321]], {strokeColor: '#00ff00', majorHeight: 15, drawLabels: true});
	</jsxgraph>		</jsxgraph>
	<source lang="javascript">		<source lang="javascript">

A WASSERMANN: /* Special ticks */

2013-01-18T14:19:52Z

Special ticks

← Older revision		Revision as of 14:19, 18 January 2013
Line 67:		Line 67:
	var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax3 = brd3.createElement('axis', [[0,0],[1,0]]);		var ax3 = brd3.createElement('axis', [[0,0],[1,0]]);
	brd3.createElement('ticks', [ax3, [3.5]], {strokeColor: '#00ff00'});		brd3.createElement('ticks', [ax3, [3.5]], {strokeColor: '#00ff00',majorTickHeight:15});
	</source>		</source>
	Or more than one special tick:		Or more than one special tick:

← Older revision		Revision as of 14:23, 18 January 2013
Line 60:		Line 60:
	Special ticks can't be constructed together with an axis and therefore have to be created directly. The only difference between creating equidistant 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:		Special ticks can't be constructed together with an axis and therefore have to be created directly. The only difference between creating equidistant 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">		<jsxgraph height="200" width="700" box="box3">
	var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax3 = brd3.create('axis', [[0,0],[1,0]]);		var ax3 = brd3.create('axis', [[0,0],[1,0]]);
	brd3.create('ticks', [ax3, [1.5,3.5]], {strokeColor: '#00ff00',majorHeight:15});		brd3.create('ticks', [ax3, [1.5,3.5]], {strokeColor: '#00ff00',majorHeight:15, drawLabels: true});
	</jsxgraph>		</jsxgraph>
	<source lang="javascript">		<source lang="javascript">
	var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd3 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax3 = brd3.create('axis', [[0,0],[1,0]]);		var ax3 = brd3.create('axis', [[0,0],[1,0]]);
	brd3.create('ticks', [ax3, [3.5]], {strokeColor: '#00ff00',majorHeight:15});		brd3.create('ticks', [ax3, [3.5]], {strokeColor: '#00ff00',majorHeight:15, drawLabels: true});
	</source>		</source>
	Or more than one special tick:		Or more than one special tick:
	<jsxgraph height="200" width="700" box="box4">		<jsxgraph height="200" width="700" box="box4">
	var brd4 = JXG.JSXGraph.initBoard('box4', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd4 = JXG.JSXGraph.initBoard('box4', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax4 = brd4.create('axis', [[0,0],[1,0]]);		var ax4 = brd4.create('axis', [[0,0],[1,0]]);
	brd4.create('ticks', [ax4, [-4.33333, -1.5, 3.5, 4.321]], {strokeColor: '#00ff00', majorHeight: 15, drawLabels: true});		brd4.create('ticks', [ax4, [-4.33333, -1.5, 3.5, 4.321]], {strokeColor: '#00ff00', majorHeight: 15, drawLabels: true});
	</jsxgraph>		</jsxgraph>
	<source lang="javascript">		<source lang="javascript">
	var brd4 = JXG.JSXGraph.initBoard('box4', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});		var brd4 = JXG.JSXGraph.initBoard('box4', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
	var ax4 = brd4.~~createElement~~('axis', [[0,0],[1,0]]);		var ax4 = brd4.create('axis', [[0,0],[1,0]]);
	brd4.~~createElement~~('ticks', [ax4, [-4.33333, -1.5, 3.5, 4.321]], {strokeColor: '#00ff00', majorHeight: 15, drawLabels: true});		brd4.create('ticks', [ax4, [-4.33333, -1.5, 3.5, 4.321]], {strokeColor: '#00ff00', majorHeight: 15, drawLabels: true});
	</source>		</source>
	The possible attributes here are mostly the same as above when creating equidistant ticks:		The possible attributes here are mostly the same as above when creating equidistant ticks: