https://jsxgraph.org/wiki/api.php?action=feedcontributions&user=Michael&feedformat=atom
JSXGraph Wiki - User contributions [en]
2024-03-29T14:04:48Z
User contributions
MediaWiki 1.40.1
https://jsxgraph.org/wiki/index.php?title=Options&diff=6194
Options
2014-01-20T07:39:42Z
<p>Michael: </p>
<hr />
<div>Below are the default values for many parameters of a JSXGraph construction. These values have to be overwritten before the initialization of the JSXGraph board via<br />
<source lang="javascript"><br />
JXG.Options.text.fontSize = 14;<br />
JXG.Options.text.useASCIIMathML = true;<br />
</source><br />
<br />
or more compact<br />
<br />
<source lang="javascript"><br />
JXG.Options = JXG.merge(JXG.Options, {<br />
showNavigation: false,<br />
point: {<br />
face: 'x'<br />
}<br />
});<br />
</source><br />
<br />
If you have some more options you want to use for more than just one construction you can save them in an extra .js file and include them right after loading JSXGraph.<br />
<br />
Here is the complete list of default values as of version 0.93. The latest version of Options.js is available at<br />
[https://github.com/jsxgraph/jsxgraph/blob/master/src/options.js].<br />
<source lang="javascript"><br />
/**<br />
* Options Namespace<br />
* @description These are the default options of the board and of all geometry elements.<br />
*/<br />
JXG.Options = {<br />
/* Options that are used directly within the board class */<br />
showCopyright : true,<br />
showNavigation : true,<br />
takeSizeFromFile : false, // If true, the construction - when read from a file or string - the size of the div can be changed.<br />
renderer: 'svg',<br />
takeFirst : false, // if true the first element with hasPoint==true is taken.<br />
pan: true,<br />
<br />
/* zoom options */<br />
zoom : {<br />
factorX : 1.25,<br />
factorY : 1.25,<br />
wheel: false<br />
},<br />
<br />
/* navbar options */<br />
navbar: {<br />
strokeColor: '#aaaaaa',<br />
fillColor: '#f5f5f5',<br />
padding: '2px',<br />
position: 'absolute',<br />
fontSize: '10px',<br />
cursor: 'pointer',<br />
zIndex: '100',<br />
right: '5px',<br />
bottom: '5px'<br />
},<br />
<br />
/**<br />
* Generic options <br />
*/<br />
<br />
/* geometry element options */<br />
elements : {<br />
// the following tag is a meta tag: http://code.google.com/p/jsdoc-toolkit/wiki/MetaTags<br />
<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
/**<br />
* The stroke color of the given geometry element.<br />
* @type String<br />
* @name JXG.GeometryElement#strokeColor<br />
* @see JXG.GeometryElement#highlightStrokeColor<br />
* @see JXG.GeometryElement#strokeWidth<br />
* @see JXG.GeometryElement#strokeOpacity<br />
* @see JXG.GeometryElement#highlightStrokeOpacity<br />
* @default {@link JXG.Options.elements.color#strokeColor}<br />
*/<br />
strokeColor: '#0000ff',<br />
<br />
/**<br />
* The stroke color of the given geometry element when the user moves the mouse over it.<br />
* @type String<br />
* @name JXG.GeometryElement#highlightStrokeColor<br />
* @see JXG.GeometryElement#strokeColor<br />
* @see JXG.GeometryElement#strokeWidth<br />
* @see JXG.GeometryElement#strokeOpacity<br />
* @see JXG.GeometryElement#highlightStrokeOpacity<br />
* @default {@link JXG.Options.elements.color#highlightStrokeColor}<br />
*/<br />
highlightStrokeColor: '#C3D9FF',<br />
<br />
/**<br />
* The fill color of this geometry element.<br />
* @type String<br />
* @name JXG.GeometryElement#fillColor<br />
* @see JXG.GeometryElement#highlightFillColor<br />
* @see JXG.GeometryElement#fillOpacity<br />
* @see JXG.GeometryElement#highlightFillOpacity<br />
* @default {@link JXG.Options.elements.color#fillColor}<br />
*/<br />
fillColor: 'red',<br />
<br />
/**<br />
* The fill color of the given geometry element when the mouse is pointed over it.<br />
* @type String<br />
* @name JXG.GeometryElement#highlightFillColor<br />
* @see JXG.GeometryElement#fillColor<br />
* @see JXG.GeometryElement#fillOpacity<br />
* @see JXG.GeometryElement#highlightFillOpacity<br />
* @default {@link JXG.Options.elements.color#highlightFillColor}<br />
*/<br />
highlightFillColor: 'none',<br />
<br />
/**<br />
* Opacity for element's stroke color.<br />
* @type number<br />
* @name JXG.GeometryElement#strokeOpacity<br />
* @see JXG.GeometryElement#strokeColor<br />
* @see JXG.GeometryElement#highlightStrokeColor<br />
* @see JXG.GeometryElement#strokeWidth<br />
* @see JXG.GeometryElement#highlightStrokeOpacity<br />
* @default {@link JXG.Options.elements#strokeOpacity}<br />
*/<br />
strokeOpacity: 1,<br />
<br />
/**<br />
* Opacity for stroke color when the object is highlighted.<br />
* @type number<br />
* @name JXG.GeometryElement#highlightStrokeOpacity<br />
* @see JXG.GeometryElement#strokeColor<br />
* @see JXG.GeometryElement#highlightStrokeColor<br />
* @see JXG.GeometryElement#strokeWidth<br />
* @see JXG.GeometryElement#strokeOpacity<br />
* @default {@link JXG.Options.elements#highlightStrokeOpacity}<br />
*/<br />
highlightStrokeOpacity: 1,<br />
<br />
/**<br />
* Opacity for fill color.<br />
* @type number<br />
* @name JXG.GeometryElement#fillOpacity<br />
* @see JXG.GeometryElement#fillColor<br />
* @see JXG.GeometryElement#highlightFillColor<br />
* @see JXG.GeometryElement#highlightFillOpacity<br />
* @default {@link JXG.Options.elements.color#fillOpacity}<br />
*/<br />
fillOpacity: 1,<br />
<br />
/**<br />
* Opacity for fill color when the object is highlighted.<br />
* @type number<br />
* @name JXG.GeometryElement#highlightFillOpacity<br />
* @see JXG.GeometryElement#fillColor<br />
* @see JXG.GeometryElement#highlightFillColor<br />
* @see JXG.GeometryElement#fillOpacity<br />
* @default {@link JXG.Options.elements.color#highlightFillOpacity}<br />
*/<br />
highlightFillOpacity: 1,<br />
<br />
/**<br />
* Width of the element's stroke.<br />
* @type number<br />
* @name JXG.GeometryElement#strokeWidth<br />
* @see JXG.GeometryElement#strokeColor<br />
* @see JXG.GeometryElement#highlightStrokeColor<br />
* @see JXG.GeometryElement#strokeOpacity<br />
* @see JXG.GeometryElement#highlightStrokeOpacity<br />
* @default {@link JXG.Options.elements#strokeWidth}<br />
*/<br />
strokeWidth: 2,<br />
<br />
/**<br />
* Width of the element's stroke when the mouse is pointed over it.<br />
* @type number<br />
* @name JXG.GeometryElement#highlightStrokeWidth<br />
* @see JXG.GeometryElement#strokeColor<br />
* @see JXG.GeometryElement#highlightStrokeColor<br />
* @see JXG.GeometryElement#strokeOpacity<br />
* @see JXG.GeometryElement#highlightStrokeOpacity<br />
* @see JXG.GeometryElement#highlightFillColor<br />
* @default {@link JXG.Options.elements#strokeWidth}<br />
*/<br />
highlightStrokeWidth: 2,<br />
<br />
<br />
/**<br />
* If true the element is fixed and can not be dragged around. The element<br />
* will be repositioned on zoom and moveOrigin events.<br />
* @type Boolean<br />
* @default false<br />
* @name JXG.GeometryElement#fixed<br />
*/<br />
fixed: false,<br />
<br />
/**<br />
* If true the element is fixed and can not be dragged around. The element<br />
* will even stay at its position on zoom and moveOrigin events.<br />
* Only free elements like points, texts, curves can be frozen.<br />
* @type Boolean<br />
* @default false<br />
* @name JXG.GeometryElement#frozen<br />
*/<br />
frozen: false,<br />
<br />
/**<br />
* If true a label will display the element's name.<br />
* @type Boolean<br />
* @default false<br />
* @name JXG.GeometryElement#withLabel<br />
*/<br />
withLabel: false,<br />
<br />
label: {<br />
fixed: true<br />
},<br />
<br />
/**<br />
* If false the element won't be visible on the board, otherwise it is shown.<br />
* @type boolean<br />
* @name JXG.GeometryElement#visible<br />
* @see JXG.GeometryElement#hideElement<br />
* @see JXG.GeometryElement#showElement<br />
* @default true<br />
*/<br />
visible: true,<br />
<br />
/**<br />
* Display layer which will contain the element.<br />
* @see JXG.Options#layer<br />
* @default See {@link JXG.Options#layer}<br />
*/<br />
layer: 0,<br />
<br />
<br />
/**<br />
* Determines the elements border-style.<br />
* Possible values are:<br />
* <ul><li>0 for a solid line</li><br />
* <li>1 for a dotted line</li><br />
* <li>2 for a line with small dashes</li><br />
<br />
<br />
* <li>3 for a line with medium dashes</li><br />
* <li>4 for a line with big dashes</li><br />
* <li>5 for a line with alternating medium and big dashes and large gaps</li><br />
* <li>6 for a line with alternating medium and big dashes and small gaps</li></ul><br />
* @type Number<br />
* @name JXG.GeometryElement#dash<br />
* @default 0<br />
*/<br />
dash: 0,<br />
<br />
/**<br />
* If true the element will get a shadow.<br />
* @type boolean<br />
* @name JXG.GeometryElement#shadow<br />
* @default false<br />
*/<br />
shadow: false,<br />
<br />
/**<br />
* If true the element will be traced, i.e. on every movement the element will be copied<br />
* to the background. Use {@link JXG.GeometryElement#clearTrace} to delete the trace elements.<br />
* @see JXG.GeometryElement#clearTrace<br />
* @see JXG.GeometryElement#traces<br />
* @see JXG.GeometryElement#numTraces<br />
* @type Boolean<br />
* @default false<br />
* @name JXG.GeometryElement#trace<br />
*/<br />
trace: false,<br />
<br />
/**<br />
* Extra visual properties for traces of an element<br />
* @type Object<br />
* @see JXG.GeometryElement#trace<br />
* @name JXG.GeometryElement#traceAttributes<br />
*/<br />
traceAttributes: {},<br />
<br />
/**<br />
* <br />
* @type Boolean<br />
* @default true<br />
* @name JXG.GeometryElement#highlight<br />
*/<br />
highlight: true,<br />
<br />
/**<br />
* If this is set to true, the element is updated in every update<br />
* call of the board. If set to false, the element is updated only after<br />
* zoom events or more generally, when the bounding box has been changed.<br />
* Examples for the latter behaviour should be axes.<br />
* @type Boolean<br />
* @default true<br />
* @see JXG.GeometryElement#needsRegularUpdate<br />
* @name JXG.GeometryElement#needsRegularUpdate<br />
*/<br />
needsRegularUpdate: true,<br />
<br />
/*draft options */<br />
draft : {<br />
/**<br />
* If true the element will be drawn in grey scale colors to visualize that it's only a draft.<br />
* @type boolean<br />
* @name JXG.GeometryElement#draft<br />
* @default {@link JXG.Options.elements.draft#draft}<br />
*/<br />
draft : false,<br />
strokeColor : '#565656',<br />
fillColor : '#565656',<br />
strokeOpacity : 0.8,<br />
fillOpacity : 0.8,<br />
strokeWidth : 1<br />
}<br />
// close the meta tag<br />
/**#@-*/<br />
},<br />
<br />
ticks : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
/**<br />
* Draw labels yes/no<br />
* @type Boolean<br />
* @name JXG.Ticks#drawLabels<br />
* @default false<br />
*/<br />
drawLabels: false,<br />
<br />
/**<br />
* Draw the zero tick, that lies at line.point1?<br />
* @type Boolean<br />
* @name JXG.Ticks#drawZero<br />
* @default false<br />
*/<br />
drawZero: false,<br />
<br />
/**<br />
* If the distance between two ticks is too big we could insert new ticks. If insertTicks<br />
* is <tt>true</tt>, we'll do so, otherwise we leave the distance as is.<br />
* This option is ignored if equidistant is false.<br />
* @type Boolean<br />
* @name JXG.Ticks#insertTicks<br />
* @see JXG.Ticks#equidistant<br />
* @see JXG.Ticks#maxTicksDistance<br />
* @default false<br />
*/<br />
insertTicks: false,<br />
minTicksDistance: 50,<br />
<br />
/**<br />
* Total height of a minor tick. If negative the full height of the board is taken.<br />
* @type Number<br />
* @name JXG.Ticks#minorHeight<br />
*/<br />
minorHeight: 4,<br />
<br />
/**<br />
* Total height of a major tick. If negative the full height of the board is taken.<br />
* @type Number<br />
* @name JXG.Ticks#majorHeight<br />
*/<br />
majorHeight: 10,<br />
<br />
/**<br />
* The number of minor ticks between two major ticks.<br />
* @type Number<br />
* @name JXG.Ticks#minorTicks<br />
*/<br />
minorTicks: 4,<br />
<br />
/**<br />
* The default distance between two ticks. Please be aware that this value does not have<br />
* to be used if {@link JXG.Ticks#insertTicks} is set to true.<br />
* @type Boolean<br />
* @name JXG.Ticks#ticksDistance<br />
* @see JXG.Ticks#equidistant<br />
* @see JXG.Ticks#insertTicks<br />
* @default 1<br />
*/<br />
ticksDistance: 1,<br />
strokeOpacity: 1,<br />
strokeWidth: 1,<br />
strokeColor: 'black',<br />
highlightStrokeColor: '#888888'<br />
// close the meta tag<br />
/**#@-*/<br />
},<br />
<br />
/* precision options */<br />
precision : {<br />
touch : 30,<br />
mouse : 4,<br />
epsilon : 0.0001,<br />
hasPoint : 4<br />
},<br />
<br />
/* Default ordering of the layers */<br />
layer : {<br />
numlayers: 20, // only important in SVG<br />
text : 9,<br />
point : 9, <br />
arc : 8,<br />
line : 7,<br />
circle: 6, <br />
curve : 5,<br />
turtle : 5,<br />
polygon: 3,<br />
sector: 3,<br />
angle : 3, <br />
integral : 3,<br />
axis : 2,<br />
grid : 1,<br />
image : 0,<br />
trace: 0<br />
},<br />
<br />
/**<br />
* element type specific options <br />
*/ <br />
/* special angle options */<br />
angle : {<br />
withLabel: true,<br />
<br />
/**<br />
* Radius of the sector, displaying the angle.<br />
* @type Number<br />
* @name Angle#radius<br />
*/<br />
radius : 1.0,<br />
type : 'auto', // 'square' or 'sector' or 'auto'<br />
fillColor : '#FF7F00',<br />
highlightFillColor : '#FF7F00',<br />
strokeColor : '#FF7F00',<br />
fillOpacity : 0.3,<br />
highlightFillOpacity : 0.3,<br />
radiuspoint: {<br />
withLabel: false,<br />
visible: false,<br />
name: ''<br />
},<br />
pointsquare: {<br />
withLabel: false,<br />
visible: false,<br />
name: ''<br />
},<br />
dot: {<br />
visible: false,<br />
strokeColor: 'none',<br />
fillColor: 'black',<br />
size: 2,<br />
face: 'o',<br />
withLabel: false,<br />
name: ''<br />
},<br />
label: {<br />
strokeColor: '#0000FF'<br />
}<br />
},<br />
<br />
/* special arc options */<br />
arc : {<br />
firstArrow : false,<br />
lastArrow : false,<br />
fillColor : 'none',<br />
highlightFillColor : 'none',<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
useDirection: false<br />
},<br />
<br />
/* special axis options */<br />
axis: {<br />
needsRegularUpdate : false, // Axes only updated after zooming and moving of the origin.<br />
strokeWidth: 1,<br />
strokeColor : '#666666',<br />
highlightStrokeWidth: 1,<br />
highlightStrokeColor : '#888888',<br />
withTicks: true,<br />
straightFirst : true,<br />
straightLast : true,<br />
lastArrow: true,<br />
withLabel: false, <br />
/* line ticks options */<br />
ticks : {<br />
needsRegularUpdate : false, <br />
strokeWidth: 1,<br />
strokeColor : '#666666',<br />
highlightStrokeColor : '#888888',<br />
drawLabels : true,<br />
drawZero : false,<br />
insertTicks : true,<br />
minTicksDistance : 10,<br />
minorHeight : 4, // if <0: full width and height<br />
majorHeight : -1, // if <0: full width and height<br />
minorTicks : 4,<br />
ticksDistance: 1, // TODO doc<br />
strokeOpacity : 0.25<br />
},<br />
point1 : { // Default values for point1 if created by line<br />
needsRegularUpdate : false<br />
},<br />
point2 : { // Default values for point2 if created by line<br />
needsRegularUpdate : false<br />
}<br />
},<br />
<br />
/* special options for bisector of 3 points */<br />
bisector : {<br />
strokeColor: '#000000', // Bisector line<br />
point : { // Bisector point<br />
visible: false,<br />
fixed: false,<br />
withLabel: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special options for the 2 bisectors of 2 lines */<br />
bisectorlines : {<br />
line1 : { // <br />
strokeColor: 'red'<br />
},<br />
line2 : { // <br />
strokeColor: 'black'<br />
}<br />
},<br />
<br />
/* special chart options */<br />
chart: {<br />
chartStyle: 'line',<br />
colors: ['#B02B2C','#3F4C6B','#C79810','#D15600','#FFFF88','#C3D9FF','#4096EE','#008C00'],<br />
highlightcolors: null,<br />
fillcolor: null,<br />
highlightonsector: false,<br />
highlightbysize: false<br />
},<br />
<br />
/*special circle options */<br />
circle : {<br />
fillColor : 'none',<br />
highlightFillColor : 'none',<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
center: {<br />
visible: false,<br />
withLabel: false,<br />
fixed: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special options for circumcircle of 3 points */<br />
circumcircle : {<br />
fillColor : 'none',<br />
highlightFillColor : 'none',<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
center : { // center point<br />
visible: false,<br />
fixed: false,<br />
withLabel: false,<br />
name: ''<br />
}<br />
},<br />
<br />
circumcirclearc : {<br />
fillColor : 'none',<br />
highlightFillColor : 'none',<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
center: {<br />
visible: false,<br />
withLabel: false,<br />
fixed: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special options for circumcircle sector of 3 points */<br />
circumcirclesector: {<br />
useDirection: true,<br />
fillColor: '#00FF00',<br />
highlightFillColor: '#00FF00',<br />
fillOpacity: 0.3,<br />
highlightFillOpacity: 0.3,<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
point: {<br />
visible: false,<br />
fixed: false,<br />
withLabel: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special conic options */<br />
conic : {<br />
fillColor : 'none',<br />
highlightFillColor : 'none',<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
foci: {<br />
// points<br />
fixed: false,<br />
visible: false,<br />
withLabel: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special curve options */<br />
curve : {<br />
strokeWidth : 1,<br />
strokeColor : '#0000ff',<br />
fillColor: 'none',<br />
<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
/**<br />
* The data points of the curve are not connected with straight lines but with bezier curves.<br />
* @name JXG.Curve#handDrawing<br />
* @type Boolean<br />
* @default false<br />
*/<br />
handDrawing: false,<br />
<br />
/**<br />
* The curveType is set in @see generateTerm and used in {@link JXG.Curve#updateCurve}.<br />
* Possible values are <ul><br />
* <li>'none'</li><br />
* <li>'plot': Data plot</li><br />
* <li>'parameter': we can not distinguish function graphs and parameter curves</li><br />
* <li>'functiongraph': function graph</li><br />
* <li>'polar'</li><br />
* <li>'implicit' (not yet)</li></ul><br />
* Only parameter and plot are set directly. Polar is set with setProperties only.<br />
* @name JXG.Curve#curveType<br />
*/<br />
curveType: null,<br />
RDPsmoothing : false, // Apply the Ramer-Douglas-Peuker algorithm<br />
numberPointsHigh : 1600, // Number of points on curves after mouseUp<br />
numberPointsLow : 400, // Number of points on curves after mousemove<br />
doAdvancedPlot : true // Use the algorithm by Gillam and Hohenwarter<br />
// It is much slower, but the result is better<br />
<br />
/**#@-*/<br />
},<br />
<br />
glider: {},<br />
<br />
/* special grid options */<br />
grid : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
/* grid styles */<br />
needsRegularUpdate : false,<br />
hasGrid : false,<br />
gridX : 1,<br />
gridY : 1,<br />
strokeColor : '#C0C0C0',<br />
strokeOpacity : '0.5',<br />
strokeWidth: 1,<br />
dash : 0, // dashed grids slow down the iPad considerably<br />
/* snap to grid options */<br />
<br />
/**<br />
* @deprecated<br />
*/<br />
snapToGrid : false,<br />
/**<br />
* @deprecated<br />
*/<br />
snapSizeX : 10,<br />
/**<br />
* @deprecated<br />
*/<br />
snapSizeY : 10<br />
<br />
/**#@-*/<br />
},<br />
<br />
/* special grid options */<br />
image: {<br />
imageString : null,<br />
fillOpacity: 1.0<br />
},<br />
<br />
/* special options for incircle of 3 points */<br />
incircle : {<br />
fillColor : 'none',<br />
highlightFillColor : 'none',<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
center : { // center point<br />
visible: false,<br />
fixed: false,<br />
withLabel: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special options for integral */<br />
integral: {<br />
withLabel: true, // Show integral value as text<br />
strokeWidth: 0,<br />
strokeOpacity: 0,<br />
curveLeft: { // Start point<br />
visible: true<br />
},<br />
baseLeft: { // Start point<br />
visible: false,<br />
fixed: false,<br />
withLabel: false,<br />
name: ''<br />
},<br />
curveRight: { // End point<br />
visible: true<br />
},<br />
baseRight: { // End point<br />
visible: false,<br />
fixed: false,<br />
withLabel: false,<br />
name: ''<br />
},<br />
label: {<br />
fontSize: 20<br />
}<br />
},<br />
<br />
/* special legend options */<br />
legend: {<br />
/**<br />
* @visprop<br />
*/<br />
style: 'vertical',<br />
labels: ['1','2','3','4','5','6','7','8'],<br />
colors: ['#B02B2C','#3F4C6B','#C79810','#D15600','#FFFF88','#C3D9FF','#4096EE','#008C00']<br />
},<br />
<br />
/* special line options */<br />
line : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
firstArrow : false,<br />
lastArrow : false,<br />
straightFirst : true,<br />
straightLast : true,<br />
fillColor : 'none', // Important for VML on IE<br />
highlightFillColor : 'none', // Important for VML on IE<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#888888',<br />
withTicks: false,<br />
<br />
/**#@-*/<br />
<br />
point1 : { // Default values for point1 if created by line<br />
visible: false, <br />
withLabel: false, <br />
fixed: false,<br />
name: ''<br />
},<br />
point2 : { // Default values for point2 if created by line<br />
visible: false, <br />
withLabel: false, <br />
fixed: false,<br />
name: ''<br />
},<br />
ticks : {<br />
drawLabels : true,<br />
drawZero : false,<br />
insertTicks : false,<br />
minTicksDistance : 50,<br />
maxTicksDistance : 300,<br />
minorHeight : 4, // if <0: full width and height<br />
majorHeight : -1, // if <0: full width and height<br />
minorTicks : 4,<br />
defaultDistance : 1,<br />
strokeOpacity : 0.3<br />
},<br />
/* absolute label offset from anchor */<br />
labelOffsets: [10,10]<br />
},<br />
<br />
/* special options for locus curves */<br />
locus : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
translateToOrigin: false,<br />
translateTo10: false,<br />
stretch: false,<br />
toOrigin: null,<br />
to10: null<br />
<br />
/**#@-*/<br />
},<br />
<br />
/* special options for parallel lines */<br />
parallel : {<br />
strokeColor: '#000000' // Parallel line<br />
},<br />
<br />
/* special perpendicular options */<br />
perpendicular : {<br />
strokeColor: '#000000', // Perpendicular line<br />
straightFirst: true,<br />
straightLast: true<br />
},<br />
<br />
/* special perpendicular options */<br />
perpendicularsegment : {<br />
strokeColor: '#000000', // Perpendicular segment<br />
straightFirst: false,<br />
straightLast: false,<br />
point : { // Perpendicular point<br />
visible: false,<br />
fixed: true,<br />
withLabel: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special point options */<br />
point : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
withLabel: true,<br />
<br />
/**<br />
* This attribute was used to determined the point layout. It was derived from GEONExT and was<br />
* replaced by {@link JXG.Point#face} and {@link JXG.Point#size}.<br />
* @see JXG.Point#face<br />
* @see JXG.Point#size<br />
* @type Number<br />
* @default JXG.Options.point#style<br />
* @name JXG.Point#style<br />
* @deprecated<br />
*/<br />
style : 5,<br />
<br />
/**<br />
* There are different point styles which differ in appearance.<br />
* Posssible values are<br />
* <table><tr><th>Value</th></tr><br />
* <tr><td>cross</td></tr><br />
* <tr><td>circle</td></tr><br />
* <tr><td>square</td></tr><br />
* <tr><td>plus</td></tr><br />
* <tr><td>diamond</td></tr><br />
* <tr><td>triangleUp</td></tr><br />
* <tr><td>triangleDown</td></tr><br />
* <tr><td>triangleLeft</td></tr><br />
* <tr><td>triangleRight</td></tr><br />
* </table><br />
* @type string<br />
* @see JXG.Point#setStyle<br />
* @default circle<br />
* @name JXG.Point#face<br />
*/<br />
face : 'o',<br />
<br />
/**<br />
* Determines the size of a point.<br />
* Means radius resp. half the width of a point (depending on the face).<br />
* @see JXG.Point#face<br />
* @type number<br />
* @see JXG.Point#setStyle<br />
* @default 3<br />
* @name JXG.Point#size<br />
*/<br />
size : 3,<br />
fillColor : '#ff0000',<br />
highlightFillColor : '#EEEEEE',<br />
strokeWidth: 2,<br />
strokeColor : '#ff0000',<br />
highlightStrokeColor : '#C3D9FF',<br />
zoom: false, // Change the point size on zoom<br />
<br />
/**<br />
* If true, the infobox is shown on mouse over, else not.<br />
* @name JXG.Point#showInfobox<br />
* @type Boolean<br />
* @default true<br />
*/<br />
showInfobox: true,<br />
<br />
draft: false,<br />
<br />
/**<br />
* List of attractor elements. If the distance of the point is less than<br />
* attractorDistance the point is made to glider of this element.<br />
* @type array<br />
* @name JXG.Point#attractors<br />
* @default empty<br />
*/<br />
attractors: [],<br />
<br />
/**<br />
* If the distance of the point to one of its attractors is less <br />
* than this number the point will be a glider on this <br />
* attracting element. <br />
* If set to zero nothing happens.<br />
* @type number<br />
* @name JXG.Point#attractorDistance<br />
* @default 0<br />
*/<br />
attractorDistance: 0.0,<br />
<br />
/**<br />
* If the distance of the point to one of its attractors is at least <br />
* this number the point will be released from being a glider on the<br />
* attracting element. <br />
* If set to zero nothing happens.<br />
* @type number<br />
* @name JXG.Point#snatchDistance<br />
* @default 0<br />
*/<br />
snatchDistance: 0.0,<br />
<br />
/**<br />
* If set to true, the point will snap to a grid defined by<br />
* {@link JXG.Point#snapSizeX} and {@link JXG.Point#snapSizeY}.<br />
* @see JXG.Point#snapSizeX<br />
* @see JXG.Point#snapSizeY<br />
* @type Boolean<br />
* @name JXG.Point#snapToGrid<br />
* @default false<br />
*/<br />
snapToGrid: false,<br />
<br />
/**<br />
* Defines together with {@link JXG.Point#snapSizeY} the grid the point snaps on to.<br />
* The point will only snap on values multiple to snapSizeX in x and snapSizeY in y direction.<br />
* If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks<br />
* of the default ticks of the default x axes of the board.<br />
* @see JXG.Point#snapToGrid<br />
* @see JXG.Point#snapSizeY<br />
* @see JXG.Board#defaultAxes<br />
* @type Number<br />
* @name JXG.Point#snapSizeX<br />
* @default 1<br />
*/<br />
snapSizeX: 1,<br />
<br />
/**<br />
* Defines together with {@link JXG.Point#snapSizeX} the grid the point snaps on to.<br />
* The point will only snap on values multiple to snapSizeX in x and snapSizeY in y direction.<br />
* If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks<br />
* of the default ticks of the default y axes of the board.<br />
* @see JXG.Point#snapToGrid<br />
* @see JXG.Point#snapSizeX<br />
* @see JXG.Board#defaultAxes<br />
* @type Number<br />
* @name JXG.Point#snapSizeY<br />
* @default 1<br />
*/<br />
snapSizeY: 1<br />
<br />
/**#@-*/<br />
},<br />
<br />
/* special polygon options */<br />
polygon : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
/**<br />
* If <tt>true</tt>, moving the mouse over inner points triggers hasPoint.<br />
* @see JXG.GeometryElement#hasPoint<br />
* @name JXG.Polygon#hasInnerPoints<br />
* @type Boolean<br />
* @default false<br />
*/<br />
hasInnerPoints: false,<br />
fillColor : '#00FF00',<br />
highlightFillColor : '#00FF00',<br />
fillOpacity : 0.3,<br />
highlightFillOpacity : 0.3,<br />
<br />
/**<br />
* Is the polygon bordered by lines?<br />
* @type Boolean<br />
* @name JXG.Polygon#withLines<br />
* @default true<br />
*/<br />
withLines: true,<br />
<br />
/**#@-*/<br />
<br />
borders: {<br />
withLabel: false,<br />
strokeWidth: 1,<br />
highlightStrokeWidth: 1,<br />
// Polygon layer + 1<br />
layer: 5<br />
},<br />
<br />
/**<br />
* Points for regular polygons<br />
*/ <br />
vertices : {<br />
withLabel: true,<br />
strokeColor: '#ff0000',<br />
fillColor: '#ff0000',<br />
fixed: true<br />
}<br />
},<br />
<br />
/* special options for riemann sums */<br />
riemannsum: {<br />
withLabel:false,<br />
fillOpacity:0.3,<br />
fillColor:'#ffff00'<br />
},<br />
<br />
/* special sector options */<br />
sector : {<br />
fillColor: '#00FF00',<br />
highlightFillColor: '#00FF00',<br />
fillOpacity: 0.3,<br />
highlightFillOpacity: 0.3<br />
},<br />
<br />
semicircle : {<br />
midpoint: {<br />
visible: false,<br />
withLabel: false,<br />
fixed: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special slider options */<br />
slider : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
/**<br />
* The slider only returns multiples of this value, e.g. for discrete values set this property to <tt>1</tt>. For<br />
* continuous results set this to <tt>-1</tt>.<br />
* @memberOf Slider.prototype<br />
* @name snapWidth<br />
* @type Number<br />
*/<br />
snapWidth: -1, // -1 = deactivated<br />
<br />
/**<br />
* The precision of the slider value displayed in the optional text.<br />
* @memberOf Slider.prototype<br />
* @name precision<br />
* @type Number<br />
*/<br />
precision: 2,<br />
firstArrow : false,<br />
lastArrow : false,<br />
withTicks: true,<br />
withLabel: true,<br />
<br />
layer: 9,<br />
showInfobox: false,<br />
name : '',<br />
visible: true,<br />
strokeColor : '#000000',<br />
highlightStrokeColor : '#888888',<br />
fillColor : '#ffffff',<br />
highlightFillColor : 'none',<br />
size: 6,<br />
<br />
/**#@-*/<br />
<br />
point1: {<br />
needsRegularUpdate : false,<br />
showInfobox: false,<br />
withLabel: false,<br />
visible: false,<br />
fixed: true,<br />
name: ''<br />
},<br />
point2: {<br />
needsRegularUpdate : false,<br />
showInfobox: false,<br />
withLabel: false,<br />
visible: false,<br />
fixed: true,<br />
name: ''<br />
},<br />
baseline: {<br />
needsRegularUpdate : false,<br />
name : '',<br />
strokeWidth: 1,<br />
strokeColor : '#000000',<br />
highlightStrokeColor : '#888888'<br />
},<br />
/* line ticks options */<br />
ticks : {<br />
needsRegularUpdate : false,<br />
drawLabels : false,<br />
drawZero : true,<br />
insertTicks : true,<br />
minorHeight : 4, // if <0: full width and height<br />
majorHeight : 10, // if <0: full width and height<br />
minorTicks : 0,<br />
defaultDistance : 1,<br />
strokeOpacity : 1,<br />
strokeWidth: 1,<br />
strokeColor : '#000000'<br />
}, <br />
highline: {<br />
strokeWidth: 3,<br />
name : '',<br />
strokeColor : '#000000',<br />
highlightStrokeColor : '#888888'<br />
},<br />
label: {<br />
strokeColor: '#000000'<br />
}<br />
},<br />
<br />
/* special text options */<br />
text : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
fontSize : 12,<br />
digits: 2,<br />
isLabel: false,<br />
strokeColor : '#000000',<br />
useASCIIMathML : false,<br />
useMathJax : false,<br />
display : 'html', //'html' or 'internal'<br />
cssClass : 'JXGtext',<br />
highlightCssClass : 'JXGtext',<br />
withLabel: false<br />
<br />
/**#@-*/<br />
},<br />
<br />
/* special options for trace curves */<br />
tracecurve : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
strokeColor: '#000000',<br />
fillColor: 'none',<br />
numberPoints: 100<br />
<br />
/**#@-*/<br />
},<br />
<br />
/*special turtle options */<br />
turtle : {<br />
strokeWidth : 1,<br />
fillColor: 'none',<br />
strokeColor: '#000000',<br />
arrow : {<br />
strokeWidth: 2,<br />
withLabel: false,<br />
strokeColor: '#ff0000'<br />
}<br />
},<br />
<br />
<br />
/**<br />
* Abbreviations of properties. Setting the shortcut means setting abbreviated properties<br />
* to the same value.<br />
* It is used in JXG.GeometryElement#setProperty and in<br />
* the constructor JXG.GeometryElement.<br />
* Attention: In Options.js abbreviations are not allowed.<br />
*/<br />
shortcuts : {<br />
color: ['strokeColor', 'fillColor'],<br />
opacity: ['strokeOpacity', 'fillOpacity'],<br />
highlightColor: ['highlightStrokeColor', 'highlightFillColor'],<br />
highlightOpacity: ['highlightStrokeOpacity', 'highlightFillOpacity'],<br />
strokeWidth: ['strokeWidth', 'highlightStrokeWidth']<br />
}<br />
<br />
};<br />
</source></div>
Michael
https://jsxgraph.org/wiki/index.php?title=Options&diff=6193
Options
2014-01-20T07:38:59Z
<p>Michael: </p>
<hr />
<div>Below are the default values for many parameters of a JSXGraph construction. These values have to be overwritten before the initialization of the JSXGraph board via<br />
<source lang="javascript"><br />
JXG.Options.text.fontSize = 14;<br />
JXG.Options.text.useASCIIMathML = true;<br />
</source><br />
<br />
or more compact<br />
<br />
<source lang="javascript"><br />
JXG.Options = JXG.merge(JXG.Options, {<br />
showNavigation: false,<br />
point: {<br />
face: 'x'<br />
}<br />
});<br />
</source><br />
<br />
If you have some more options you want to use for more than just one construction you can save them in an extra .js file and include them right after loading JSXGraph.<br />
<br />
Here is the complete list of default values as of version 0.93. The latest version of Options.js is available at<br />
[https://github.com/jsxgraph/jsxgraph/blob/master/src/Options.js].<br />
<source lang="javascript"><br />
/**<br />
* Options Namespace<br />
* @description These are the default options of the board and of all geometry elements.<br />
*/<br />
JXG.Options = {<br />
/* Options that are used directly within the board class */<br />
showCopyright : true,<br />
showNavigation : true,<br />
takeSizeFromFile : false, // If true, the construction - when read from a file or string - the size of the div can be changed.<br />
renderer: 'svg',<br />
takeFirst : false, // if true the first element with hasPoint==true is taken.<br />
pan: true,<br />
<br />
/* zoom options */<br />
zoom : {<br />
factorX : 1.25,<br />
factorY : 1.25,<br />
wheel: false<br />
},<br />
<br />
/* navbar options */<br />
navbar: {<br />
strokeColor: '#aaaaaa',<br />
fillColor: '#f5f5f5',<br />
padding: '2px',<br />
position: 'absolute',<br />
fontSize: '10px',<br />
cursor: 'pointer',<br />
zIndex: '100',<br />
right: '5px',<br />
bottom: '5px'<br />
},<br />
<br />
/**<br />
* Generic options <br />
*/<br />
<br />
/* geometry element options */<br />
elements : {<br />
// the following tag is a meta tag: http://code.google.com/p/jsdoc-toolkit/wiki/MetaTags<br />
<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
/**<br />
* The stroke color of the given geometry element.<br />
* @type String<br />
* @name JXG.GeometryElement#strokeColor<br />
* @see JXG.GeometryElement#highlightStrokeColor<br />
* @see JXG.GeometryElement#strokeWidth<br />
* @see JXG.GeometryElement#strokeOpacity<br />
* @see JXG.GeometryElement#highlightStrokeOpacity<br />
* @default {@link JXG.Options.elements.color#strokeColor}<br />
*/<br />
strokeColor: '#0000ff',<br />
<br />
/**<br />
* The stroke color of the given geometry element when the user moves the mouse over it.<br />
* @type String<br />
* @name JXG.GeometryElement#highlightStrokeColor<br />
* @see JXG.GeometryElement#strokeColor<br />
* @see JXG.GeometryElement#strokeWidth<br />
* @see JXG.GeometryElement#strokeOpacity<br />
* @see JXG.GeometryElement#highlightStrokeOpacity<br />
* @default {@link JXG.Options.elements.color#highlightStrokeColor}<br />
*/<br />
highlightStrokeColor: '#C3D9FF',<br />
<br />
/**<br />
* The fill color of this geometry element.<br />
* @type String<br />
* @name JXG.GeometryElement#fillColor<br />
* @see JXG.GeometryElement#highlightFillColor<br />
* @see JXG.GeometryElement#fillOpacity<br />
* @see JXG.GeometryElement#highlightFillOpacity<br />
* @default {@link JXG.Options.elements.color#fillColor}<br />
*/<br />
fillColor: 'red',<br />
<br />
/**<br />
* The fill color of the given geometry element when the mouse is pointed over it.<br />
* @type String<br />
* @name JXG.GeometryElement#highlightFillColor<br />
* @see JXG.GeometryElement#fillColor<br />
* @see JXG.GeometryElement#fillOpacity<br />
* @see JXG.GeometryElement#highlightFillOpacity<br />
* @default {@link JXG.Options.elements.color#highlightFillColor}<br />
*/<br />
highlightFillColor: 'none',<br />
<br />
/**<br />
* Opacity for element's stroke color.<br />
* @type number<br />
* @name JXG.GeometryElement#strokeOpacity<br />
* @see JXG.GeometryElement#strokeColor<br />
* @see JXG.GeometryElement#highlightStrokeColor<br />
* @see JXG.GeometryElement#strokeWidth<br />
* @see JXG.GeometryElement#highlightStrokeOpacity<br />
* @default {@link JXG.Options.elements#strokeOpacity}<br />
*/<br />
strokeOpacity: 1,<br />
<br />
/**<br />
* Opacity for stroke color when the object is highlighted.<br />
* @type number<br />
* @name JXG.GeometryElement#highlightStrokeOpacity<br />
* @see JXG.GeometryElement#strokeColor<br />
* @see JXG.GeometryElement#highlightStrokeColor<br />
* @see JXG.GeometryElement#strokeWidth<br />
* @see JXG.GeometryElement#strokeOpacity<br />
* @default {@link JXG.Options.elements#highlightStrokeOpacity}<br />
*/<br />
highlightStrokeOpacity: 1,<br />
<br />
/**<br />
* Opacity for fill color.<br />
* @type number<br />
* @name JXG.GeometryElement#fillOpacity<br />
* @see JXG.GeometryElement#fillColor<br />
* @see JXG.GeometryElement#highlightFillColor<br />
* @see JXG.GeometryElement#highlightFillOpacity<br />
* @default {@link JXG.Options.elements.color#fillOpacity}<br />
*/<br />
fillOpacity: 1,<br />
<br />
/**<br />
* Opacity for fill color when the object is highlighted.<br />
* @type number<br />
* @name JXG.GeometryElement#highlightFillOpacity<br />
* @see JXG.GeometryElement#fillColor<br />
* @see JXG.GeometryElement#highlightFillColor<br />
* @see JXG.GeometryElement#fillOpacity<br />
* @default {@link JXG.Options.elements.color#highlightFillOpacity}<br />
*/<br />
highlightFillOpacity: 1,<br />
<br />
/**<br />
* Width of the element's stroke.<br />
* @type number<br />
* @name JXG.GeometryElement#strokeWidth<br />
* @see JXG.GeometryElement#strokeColor<br />
* @see JXG.GeometryElement#highlightStrokeColor<br />
* @see JXG.GeometryElement#strokeOpacity<br />
* @see JXG.GeometryElement#highlightStrokeOpacity<br />
* @default {@link JXG.Options.elements#strokeWidth}<br />
*/<br />
strokeWidth: 2,<br />
<br />
/**<br />
* Width of the element's stroke when the mouse is pointed over it.<br />
* @type number<br />
* @name JXG.GeometryElement#highlightStrokeWidth<br />
* @see JXG.GeometryElement#strokeColor<br />
* @see JXG.GeometryElement#highlightStrokeColor<br />
* @see JXG.GeometryElement#strokeOpacity<br />
* @see JXG.GeometryElement#highlightStrokeOpacity<br />
* @see JXG.GeometryElement#highlightFillColor<br />
* @default {@link JXG.Options.elements#strokeWidth}<br />
*/<br />
highlightStrokeWidth: 2,<br />
<br />
<br />
/**<br />
* If true the element is fixed and can not be dragged around. The element<br />
* will be repositioned on zoom and moveOrigin events.<br />
* @type Boolean<br />
* @default false<br />
* @name JXG.GeometryElement#fixed<br />
*/<br />
fixed: false,<br />
<br />
/**<br />
* If true the element is fixed and can not be dragged around. The element<br />
* will even stay at its position on zoom and moveOrigin events.<br />
* Only free elements like points, texts, curves can be frozen.<br />
* @type Boolean<br />
* @default false<br />
* @name JXG.GeometryElement#frozen<br />
*/<br />
frozen: false,<br />
<br />
/**<br />
* If true a label will display the element's name.<br />
* @type Boolean<br />
* @default false<br />
* @name JXG.GeometryElement#withLabel<br />
*/<br />
withLabel: false,<br />
<br />
label: {<br />
fixed: true<br />
},<br />
<br />
/**<br />
* If false the element won't be visible on the board, otherwise it is shown.<br />
* @type boolean<br />
* @name JXG.GeometryElement#visible<br />
* @see JXG.GeometryElement#hideElement<br />
* @see JXG.GeometryElement#showElement<br />
* @default true<br />
*/<br />
visible: true,<br />
<br />
/**<br />
* Display layer which will contain the element.<br />
* @see JXG.Options#layer<br />
* @default See {@link JXG.Options#layer}<br />
*/<br />
layer: 0,<br />
<br />
<br />
/**<br />
* Determines the elements border-style.<br />
* Possible values are:<br />
* <ul><li>0 for a solid line</li><br />
* <li>1 for a dotted line</li><br />
* <li>2 for a line with small dashes</li><br />
<br />
<br />
* <li>3 for a line with medium dashes</li><br />
* <li>4 for a line with big dashes</li><br />
* <li>5 for a line with alternating medium and big dashes and large gaps</li><br />
* <li>6 for a line with alternating medium and big dashes and small gaps</li></ul><br />
* @type Number<br />
* @name JXG.GeometryElement#dash<br />
* @default 0<br />
*/<br />
dash: 0,<br />
<br />
/**<br />
* If true the element will get a shadow.<br />
* @type boolean<br />
* @name JXG.GeometryElement#shadow<br />
* @default false<br />
*/<br />
shadow: false,<br />
<br />
/**<br />
* If true the element will be traced, i.e. on every movement the element will be copied<br />
* to the background. Use {@link JXG.GeometryElement#clearTrace} to delete the trace elements.<br />
* @see JXG.GeometryElement#clearTrace<br />
* @see JXG.GeometryElement#traces<br />
* @see JXG.GeometryElement#numTraces<br />
* @type Boolean<br />
* @default false<br />
* @name JXG.GeometryElement#trace<br />
*/<br />
trace: false,<br />
<br />
/**<br />
* Extra visual properties for traces of an element<br />
* @type Object<br />
* @see JXG.GeometryElement#trace<br />
* @name JXG.GeometryElement#traceAttributes<br />
*/<br />
traceAttributes: {},<br />
<br />
/**<br />
* <br />
* @type Boolean<br />
* @default true<br />
* @name JXG.GeometryElement#highlight<br />
*/<br />
highlight: true,<br />
<br />
/**<br />
* If this is set to true, the element is updated in every update<br />
* call of the board. If set to false, the element is updated only after<br />
* zoom events or more generally, when the bounding box has been changed.<br />
* Examples for the latter behaviour should be axes.<br />
* @type Boolean<br />
* @default true<br />
* @see JXG.GeometryElement#needsRegularUpdate<br />
* @name JXG.GeometryElement#needsRegularUpdate<br />
*/<br />
needsRegularUpdate: true,<br />
<br />
/*draft options */<br />
draft : {<br />
/**<br />
* If true the element will be drawn in grey scale colors to visualize that it's only a draft.<br />
* @type boolean<br />
* @name JXG.GeometryElement#draft<br />
* @default {@link JXG.Options.elements.draft#draft}<br />
*/<br />
draft : false,<br />
strokeColor : '#565656',<br />
fillColor : '#565656',<br />
strokeOpacity : 0.8,<br />
fillOpacity : 0.8,<br />
strokeWidth : 1<br />
}<br />
// close the meta tag<br />
/**#@-*/<br />
},<br />
<br />
ticks : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
/**<br />
* Draw labels yes/no<br />
* @type Boolean<br />
* @name JXG.Ticks#drawLabels<br />
* @default false<br />
*/<br />
drawLabels: false,<br />
<br />
/**<br />
* Draw the zero tick, that lies at line.point1?<br />
* @type Boolean<br />
* @name JXG.Ticks#drawZero<br />
* @default false<br />
*/<br />
drawZero: false,<br />
<br />
/**<br />
* If the distance between two ticks is too big we could insert new ticks. If insertTicks<br />
* is <tt>true</tt>, we'll do so, otherwise we leave the distance as is.<br />
* This option is ignored if equidistant is false.<br />
* @type Boolean<br />
* @name JXG.Ticks#insertTicks<br />
* @see JXG.Ticks#equidistant<br />
* @see JXG.Ticks#maxTicksDistance<br />
* @default false<br />
*/<br />
insertTicks: false,<br />
minTicksDistance: 50,<br />
<br />
/**<br />
* Total height of a minor tick. If negative the full height of the board is taken.<br />
* @type Number<br />
* @name JXG.Ticks#minorHeight<br />
*/<br />
minorHeight: 4,<br />
<br />
/**<br />
* Total height of a major tick. If negative the full height of the board is taken.<br />
* @type Number<br />
* @name JXG.Ticks#majorHeight<br />
*/<br />
majorHeight: 10,<br />
<br />
/**<br />
* The number of minor ticks between two major ticks.<br />
* @type Number<br />
* @name JXG.Ticks#minorTicks<br />
*/<br />
minorTicks: 4,<br />
<br />
/**<br />
* The default distance between two ticks. Please be aware that this value does not have<br />
* to be used if {@link JXG.Ticks#insertTicks} is set to true.<br />
* @type Boolean<br />
* @name JXG.Ticks#ticksDistance<br />
* @see JXG.Ticks#equidistant<br />
* @see JXG.Ticks#insertTicks<br />
* @default 1<br />
*/<br />
ticksDistance: 1,<br />
strokeOpacity: 1,<br />
strokeWidth: 1,<br />
strokeColor: 'black',<br />
highlightStrokeColor: '#888888'<br />
// close the meta tag<br />
/**#@-*/<br />
},<br />
<br />
/* precision options */<br />
precision : {<br />
touch : 30,<br />
mouse : 4,<br />
epsilon : 0.0001,<br />
hasPoint : 4<br />
},<br />
<br />
/* Default ordering of the layers */<br />
layer : {<br />
numlayers: 20, // only important in SVG<br />
text : 9,<br />
point : 9, <br />
arc : 8,<br />
line : 7,<br />
circle: 6, <br />
curve : 5,<br />
turtle : 5,<br />
polygon: 3,<br />
sector: 3,<br />
angle : 3, <br />
integral : 3,<br />
axis : 2,<br />
grid : 1,<br />
image : 0,<br />
trace: 0<br />
},<br />
<br />
/**<br />
* element type specific options <br />
*/ <br />
/* special angle options */<br />
angle : {<br />
withLabel: true,<br />
<br />
/**<br />
* Radius of the sector, displaying the angle.<br />
* @type Number<br />
* @name Angle#radius<br />
*/<br />
radius : 1.0,<br />
type : 'auto', // 'square' or 'sector' or 'auto'<br />
fillColor : '#FF7F00',<br />
highlightFillColor : '#FF7F00',<br />
strokeColor : '#FF7F00',<br />
fillOpacity : 0.3,<br />
highlightFillOpacity : 0.3,<br />
radiuspoint: {<br />
withLabel: false,<br />
visible: false,<br />
name: ''<br />
},<br />
pointsquare: {<br />
withLabel: false,<br />
visible: false,<br />
name: ''<br />
},<br />
dot: {<br />
visible: false,<br />
strokeColor: 'none',<br />
fillColor: 'black',<br />
size: 2,<br />
face: 'o',<br />
withLabel: false,<br />
name: ''<br />
},<br />
label: {<br />
strokeColor: '#0000FF'<br />
}<br />
},<br />
<br />
/* special arc options */<br />
arc : {<br />
firstArrow : false,<br />
lastArrow : false,<br />
fillColor : 'none',<br />
highlightFillColor : 'none',<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
useDirection: false<br />
},<br />
<br />
/* special axis options */<br />
axis: {<br />
needsRegularUpdate : false, // Axes only updated after zooming and moving of the origin.<br />
strokeWidth: 1,<br />
strokeColor : '#666666',<br />
highlightStrokeWidth: 1,<br />
highlightStrokeColor : '#888888',<br />
withTicks: true,<br />
straightFirst : true,<br />
straightLast : true,<br />
lastArrow: true,<br />
withLabel: false, <br />
/* line ticks options */<br />
ticks : {<br />
needsRegularUpdate : false, <br />
strokeWidth: 1,<br />
strokeColor : '#666666',<br />
highlightStrokeColor : '#888888',<br />
drawLabels : true,<br />
drawZero : false,<br />
insertTicks : true,<br />
minTicksDistance : 10,<br />
minorHeight : 4, // if <0: full width and height<br />
majorHeight : -1, // if <0: full width and height<br />
minorTicks : 4,<br />
ticksDistance: 1, // TODO doc<br />
strokeOpacity : 0.25<br />
},<br />
point1 : { // Default values for point1 if created by line<br />
needsRegularUpdate : false<br />
},<br />
point2 : { // Default values for point2 if created by line<br />
needsRegularUpdate : false<br />
}<br />
},<br />
<br />
/* special options for bisector of 3 points */<br />
bisector : {<br />
strokeColor: '#000000', // Bisector line<br />
point : { // Bisector point<br />
visible: false,<br />
fixed: false,<br />
withLabel: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special options for the 2 bisectors of 2 lines */<br />
bisectorlines : {<br />
line1 : { // <br />
strokeColor: 'red'<br />
},<br />
line2 : { // <br />
strokeColor: 'black'<br />
}<br />
},<br />
<br />
/* special chart options */<br />
chart: {<br />
chartStyle: 'line',<br />
colors: ['#B02B2C','#3F4C6B','#C79810','#D15600','#FFFF88','#C3D9FF','#4096EE','#008C00'],<br />
highlightcolors: null,<br />
fillcolor: null,<br />
highlightonsector: false,<br />
highlightbysize: false<br />
},<br />
<br />
/*special circle options */<br />
circle : {<br />
fillColor : 'none',<br />
highlightFillColor : 'none',<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
center: {<br />
visible: false,<br />
withLabel: false,<br />
fixed: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special options for circumcircle of 3 points */<br />
circumcircle : {<br />
fillColor : 'none',<br />
highlightFillColor : 'none',<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
center : { // center point<br />
visible: false,<br />
fixed: false,<br />
withLabel: false,<br />
name: ''<br />
}<br />
},<br />
<br />
circumcirclearc : {<br />
fillColor : 'none',<br />
highlightFillColor : 'none',<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
center: {<br />
visible: false,<br />
withLabel: false,<br />
fixed: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special options for circumcircle sector of 3 points */<br />
circumcirclesector: {<br />
useDirection: true,<br />
fillColor: '#00FF00',<br />
highlightFillColor: '#00FF00',<br />
fillOpacity: 0.3,<br />
highlightFillOpacity: 0.3,<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
point: {<br />
visible: false,<br />
fixed: false,<br />
withLabel: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special conic options */<br />
conic : {<br />
fillColor : 'none',<br />
highlightFillColor : 'none',<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
foci: {<br />
// points<br />
fixed: false,<br />
visible: false,<br />
withLabel: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special curve options */<br />
curve : {<br />
strokeWidth : 1,<br />
strokeColor : '#0000ff',<br />
fillColor: 'none',<br />
<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
/**<br />
* The data points of the curve are not connected with straight lines but with bezier curves.<br />
* @name JXG.Curve#handDrawing<br />
* @type Boolean<br />
* @default false<br />
*/<br />
handDrawing: false,<br />
<br />
/**<br />
* The curveType is set in @see generateTerm and used in {@link JXG.Curve#updateCurve}.<br />
* Possible values are <ul><br />
* <li>'none'</li><br />
* <li>'plot': Data plot</li><br />
* <li>'parameter': we can not distinguish function graphs and parameter curves</li><br />
* <li>'functiongraph': function graph</li><br />
* <li>'polar'</li><br />
* <li>'implicit' (not yet)</li></ul><br />
* Only parameter and plot are set directly. Polar is set with setProperties only.<br />
* @name JXG.Curve#curveType<br />
*/<br />
curveType: null,<br />
RDPsmoothing : false, // Apply the Ramer-Douglas-Peuker algorithm<br />
numberPointsHigh : 1600, // Number of points on curves after mouseUp<br />
numberPointsLow : 400, // Number of points on curves after mousemove<br />
doAdvancedPlot : true // Use the algorithm by Gillam and Hohenwarter<br />
// It is much slower, but the result is better<br />
<br />
/**#@-*/<br />
},<br />
<br />
glider: {},<br />
<br />
/* special grid options */<br />
grid : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
/* grid styles */<br />
needsRegularUpdate : false,<br />
hasGrid : false,<br />
gridX : 1,<br />
gridY : 1,<br />
strokeColor : '#C0C0C0',<br />
strokeOpacity : '0.5',<br />
strokeWidth: 1,<br />
dash : 0, // dashed grids slow down the iPad considerably<br />
/* snap to grid options */<br />
<br />
/**<br />
* @deprecated<br />
*/<br />
snapToGrid : false,<br />
/**<br />
* @deprecated<br />
*/<br />
snapSizeX : 10,<br />
/**<br />
* @deprecated<br />
*/<br />
snapSizeY : 10<br />
<br />
/**#@-*/<br />
},<br />
<br />
/* special grid options */<br />
image: {<br />
imageString : null,<br />
fillOpacity: 1.0<br />
},<br />
<br />
/* special options for incircle of 3 points */<br />
incircle : {<br />
fillColor : 'none',<br />
highlightFillColor : 'none',<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
center : { // center point<br />
visible: false,<br />
fixed: false,<br />
withLabel: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special options for integral */<br />
integral: {<br />
withLabel: true, // Show integral value as text<br />
strokeWidth: 0,<br />
strokeOpacity: 0,<br />
curveLeft: { // Start point<br />
visible: true<br />
},<br />
baseLeft: { // Start point<br />
visible: false,<br />
fixed: false,<br />
withLabel: false,<br />
name: ''<br />
},<br />
curveRight: { // End point<br />
visible: true<br />
},<br />
baseRight: { // End point<br />
visible: false,<br />
fixed: false,<br />
withLabel: false,<br />
name: ''<br />
},<br />
label: {<br />
fontSize: 20<br />
}<br />
},<br />
<br />
/* special legend options */<br />
legend: {<br />
/**<br />
* @visprop<br />
*/<br />
style: 'vertical',<br />
labels: ['1','2','3','4','5','6','7','8'],<br />
colors: ['#B02B2C','#3F4C6B','#C79810','#D15600','#FFFF88','#C3D9FF','#4096EE','#008C00']<br />
},<br />
<br />
/* special line options */<br />
line : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
firstArrow : false,<br />
lastArrow : false,<br />
straightFirst : true,<br />
straightLast : true,<br />
fillColor : 'none', // Important for VML on IE<br />
highlightFillColor : 'none', // Important for VML on IE<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#888888',<br />
withTicks: false,<br />
<br />
/**#@-*/<br />
<br />
point1 : { // Default values for point1 if created by line<br />
visible: false, <br />
withLabel: false, <br />
fixed: false,<br />
name: ''<br />
},<br />
point2 : { // Default values for point2 if created by line<br />
visible: false, <br />
withLabel: false, <br />
fixed: false,<br />
name: ''<br />
},<br />
ticks : {<br />
drawLabels : true,<br />
drawZero : false,<br />
insertTicks : false,<br />
minTicksDistance : 50,<br />
maxTicksDistance : 300,<br />
minorHeight : 4, // if <0: full width and height<br />
majorHeight : -1, // if <0: full width and height<br />
minorTicks : 4,<br />
defaultDistance : 1,<br />
strokeOpacity : 0.3<br />
},<br />
/* absolute label offset from anchor */<br />
labelOffsets: [10,10]<br />
},<br />
<br />
/* special options for locus curves */<br />
locus : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
translateToOrigin: false,<br />
translateTo10: false,<br />
stretch: false,<br />
toOrigin: null,<br />
to10: null<br />
<br />
/**#@-*/<br />
},<br />
<br />
/* special options for parallel lines */<br />
parallel : {<br />
strokeColor: '#000000' // Parallel line<br />
},<br />
<br />
/* special perpendicular options */<br />
perpendicular : {<br />
strokeColor: '#000000', // Perpendicular line<br />
straightFirst: true,<br />
straightLast: true<br />
},<br />
<br />
/* special perpendicular options */<br />
perpendicularsegment : {<br />
strokeColor: '#000000', // Perpendicular segment<br />
straightFirst: false,<br />
straightLast: false,<br />
point : { // Perpendicular point<br />
visible: false,<br />
fixed: true,<br />
withLabel: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special point options */<br />
point : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
withLabel: true,<br />
<br />
/**<br />
* This attribute was used to determined the point layout. It was derived from GEONExT and was<br />
* replaced by {@link JXG.Point#face} and {@link JXG.Point#size}.<br />
* @see JXG.Point#face<br />
* @see JXG.Point#size<br />
* @type Number<br />
* @default JXG.Options.point#style<br />
* @name JXG.Point#style<br />
* @deprecated<br />
*/<br />
style : 5,<br />
<br />
/**<br />
* There are different point styles which differ in appearance.<br />
* Posssible values are<br />
* <table><tr><th>Value</th></tr><br />
* <tr><td>cross</td></tr><br />
* <tr><td>circle</td></tr><br />
* <tr><td>square</td></tr><br />
* <tr><td>plus</td></tr><br />
* <tr><td>diamond</td></tr><br />
* <tr><td>triangleUp</td></tr><br />
* <tr><td>triangleDown</td></tr><br />
* <tr><td>triangleLeft</td></tr><br />
* <tr><td>triangleRight</td></tr><br />
* </table><br />
* @type string<br />
* @see JXG.Point#setStyle<br />
* @default circle<br />
* @name JXG.Point#face<br />
*/<br />
face : 'o',<br />
<br />
/**<br />
* Determines the size of a point.<br />
* Means radius resp. half the width of a point (depending on the face).<br />
* @see JXG.Point#face<br />
* @type number<br />
* @see JXG.Point#setStyle<br />
* @default 3<br />
* @name JXG.Point#size<br />
*/<br />
size : 3,<br />
fillColor : '#ff0000',<br />
highlightFillColor : '#EEEEEE',<br />
strokeWidth: 2,<br />
strokeColor : '#ff0000',<br />
highlightStrokeColor : '#C3D9FF',<br />
zoom: false, // Change the point size on zoom<br />
<br />
/**<br />
* If true, the infobox is shown on mouse over, else not.<br />
* @name JXG.Point#showInfobox<br />
* @type Boolean<br />
* @default true<br />
*/<br />
showInfobox: true,<br />
<br />
draft: false,<br />
<br />
/**<br />
* List of attractor elements. If the distance of the point is less than<br />
* attractorDistance the point is made to glider of this element.<br />
* @type array<br />
* @name JXG.Point#attractors<br />
* @default empty<br />
*/<br />
attractors: [],<br />
<br />
/**<br />
* If the distance of the point to one of its attractors is less <br />
* than this number the point will be a glider on this <br />
* attracting element. <br />
* If set to zero nothing happens.<br />
* @type number<br />
* @name JXG.Point#attractorDistance<br />
* @default 0<br />
*/<br />
attractorDistance: 0.0,<br />
<br />
/**<br />
* If the distance of the point to one of its attractors is at least <br />
* this number the point will be released from being a glider on the<br />
* attracting element. <br />
* If set to zero nothing happens.<br />
* @type number<br />
* @name JXG.Point#snatchDistance<br />
* @default 0<br />
*/<br />
snatchDistance: 0.0,<br />
<br />
/**<br />
* If set to true, the point will snap to a grid defined by<br />
* {@link JXG.Point#snapSizeX} and {@link JXG.Point#snapSizeY}.<br />
* @see JXG.Point#snapSizeX<br />
* @see JXG.Point#snapSizeY<br />
* @type Boolean<br />
* @name JXG.Point#snapToGrid<br />
* @default false<br />
*/<br />
snapToGrid: false,<br />
<br />
/**<br />
* Defines together with {@link JXG.Point#snapSizeY} the grid the point snaps on to.<br />
* The point will only snap on values multiple to snapSizeX in x and snapSizeY in y direction.<br />
* If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks<br />
* of the default ticks of the default x axes of the board.<br />
* @see JXG.Point#snapToGrid<br />
* @see JXG.Point#snapSizeY<br />
* @see JXG.Board#defaultAxes<br />
* @type Number<br />
* @name JXG.Point#snapSizeX<br />
* @default 1<br />
*/<br />
snapSizeX: 1,<br />
<br />
/**<br />
* Defines together with {@link JXG.Point#snapSizeX} the grid the point snaps on to.<br />
* The point will only snap on values multiple to snapSizeX in x and snapSizeY in y direction.<br />
* If this value is equal to or less than <tt>0</tt>, it will use the grid displayed by the major ticks<br />
* of the default ticks of the default y axes of the board.<br />
* @see JXG.Point#snapToGrid<br />
* @see JXG.Point#snapSizeX<br />
* @see JXG.Board#defaultAxes<br />
* @type Number<br />
* @name JXG.Point#snapSizeY<br />
* @default 1<br />
*/<br />
snapSizeY: 1<br />
<br />
/**#@-*/<br />
},<br />
<br />
/* special polygon options */<br />
polygon : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
/**<br />
* If <tt>true</tt>, moving the mouse over inner points triggers hasPoint.<br />
* @see JXG.GeometryElement#hasPoint<br />
* @name JXG.Polygon#hasInnerPoints<br />
* @type Boolean<br />
* @default false<br />
*/<br />
hasInnerPoints: false,<br />
fillColor : '#00FF00',<br />
highlightFillColor : '#00FF00',<br />
fillOpacity : 0.3,<br />
highlightFillOpacity : 0.3,<br />
<br />
/**<br />
* Is the polygon bordered by lines?<br />
* @type Boolean<br />
* @name JXG.Polygon#withLines<br />
* @default true<br />
*/<br />
withLines: true,<br />
<br />
/**#@-*/<br />
<br />
borders: {<br />
withLabel: false,<br />
strokeWidth: 1,<br />
highlightStrokeWidth: 1,<br />
// Polygon layer + 1<br />
layer: 5<br />
},<br />
<br />
/**<br />
* Points for regular polygons<br />
*/ <br />
vertices : {<br />
withLabel: true,<br />
strokeColor: '#ff0000',<br />
fillColor: '#ff0000',<br />
fixed: true<br />
}<br />
},<br />
<br />
/* special options for riemann sums */<br />
riemannsum: {<br />
withLabel:false,<br />
fillOpacity:0.3,<br />
fillColor:'#ffff00'<br />
},<br />
<br />
/* special sector options */<br />
sector : {<br />
fillColor: '#00FF00',<br />
highlightFillColor: '#00FF00',<br />
fillOpacity: 0.3,<br />
highlightFillOpacity: 0.3<br />
},<br />
<br />
semicircle : {<br />
midpoint: {<br />
visible: false,<br />
withLabel: false,<br />
fixed: false,<br />
name: ''<br />
}<br />
},<br />
<br />
/* special slider options */<br />
slider : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
/**<br />
* The slider only returns multiples of this value, e.g. for discrete values set this property to <tt>1</tt>. For<br />
* continuous results set this to <tt>-1</tt>.<br />
* @memberOf Slider.prototype<br />
* @name snapWidth<br />
* @type Number<br />
*/<br />
snapWidth: -1, // -1 = deactivated<br />
<br />
/**<br />
* The precision of the slider value displayed in the optional text.<br />
* @memberOf Slider.prototype<br />
* @name precision<br />
* @type Number<br />
*/<br />
precision: 2,<br />
firstArrow : false,<br />
lastArrow : false,<br />
withTicks: true,<br />
withLabel: true,<br />
<br />
layer: 9,<br />
showInfobox: false,<br />
name : '',<br />
visible: true,<br />
strokeColor : '#000000',<br />
highlightStrokeColor : '#888888',<br />
fillColor : '#ffffff',<br />
highlightFillColor : 'none',<br />
size: 6,<br />
<br />
/**#@-*/<br />
<br />
point1: {<br />
needsRegularUpdate : false,<br />
showInfobox: false,<br />
withLabel: false,<br />
visible: false,<br />
fixed: true,<br />
name: ''<br />
},<br />
point2: {<br />
needsRegularUpdate : false,<br />
showInfobox: false,<br />
withLabel: false,<br />
visible: false,<br />
fixed: true,<br />
name: ''<br />
},<br />
baseline: {<br />
needsRegularUpdate : false,<br />
name : '',<br />
strokeWidth: 1,<br />
strokeColor : '#000000',<br />
highlightStrokeColor : '#888888'<br />
},<br />
/* line ticks options */<br />
ticks : {<br />
needsRegularUpdate : false,<br />
drawLabels : false,<br />
drawZero : true,<br />
insertTicks : true,<br />
minorHeight : 4, // if <0: full width and height<br />
majorHeight : 10, // if <0: full width and height<br />
minorTicks : 0,<br />
defaultDistance : 1,<br />
strokeOpacity : 1,<br />
strokeWidth: 1,<br />
strokeColor : '#000000'<br />
}, <br />
highline: {<br />
strokeWidth: 3,<br />
name : '',<br />
strokeColor : '#000000',<br />
highlightStrokeColor : '#888888'<br />
},<br />
label: {<br />
strokeColor: '#000000'<br />
}<br />
},<br />
<br />
/* special text options */<br />
text : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
<br />
fontSize : 12,<br />
digits: 2,<br />
isLabel: false,<br />
strokeColor : '#000000',<br />
useASCIIMathML : false,<br />
useMathJax : false,<br />
display : 'html', //'html' or 'internal'<br />
cssClass : 'JXGtext',<br />
highlightCssClass : 'JXGtext',<br />
withLabel: false<br />
<br />
/**#@-*/<br />
},<br />
<br />
/* special options for trace curves */<br />
tracecurve : {<br />
/**#@+<br />
* @visprop<br />
*/<br />
strokeColor: '#000000',<br />
fillColor: 'none',<br />
numberPoints: 100<br />
<br />
/**#@-*/<br />
},<br />
<br />
/*special turtle options */<br />
turtle : {<br />
strokeWidth : 1,<br />
fillColor: 'none',<br />
strokeColor: '#000000',<br />
arrow : {<br />
strokeWidth: 2,<br />
withLabel: false,<br />
strokeColor: '#ff0000'<br />
}<br />
},<br />
<br />
<br />
/**<br />
* Abbreviations of properties. Setting the shortcut means setting abbreviated properties<br />
* to the same value.<br />
* It is used in JXG.GeometryElement#setProperty and in<br />
* the constructor JXG.GeometryElement.<br />
* Attention: In Options.js abbreviations are not allowed.<br />
*/<br />
shortcuts : {<br />
color: ['strokeColor', 'fillColor'],<br />
opacity: ['strokeOpacity', 'fillOpacity'],<br />
highlightColor: ['highlightStrokeColor', 'highlightFillColor'],<br />
highlightOpacity: ['highlightStrokeOpacity', 'highlightFillOpacity'],<br />
strokeWidth: ['strokeWidth', 'highlightStrokeWidth']<br />
}<br />
<br />
};<br />
</source></div>
Michael
https://jsxgraph.org/wiki/index.php?title=Lotka-Volterra_equations&diff=6188
Lotka-Volterra equations
2013-11-19T09:26:30Z
<p>Michael: </p>
<hr />
<div>The Lotka-Volterra equations, a.k.a. the predator-prey equations, are a pair of non-linear differential equations mainly used to describe interaction of two biological species, one a predator and one a prey. The equations were developed independently by Alfred J. Lotka and Vito Volterra.<br />
<br />
==Model==<br />
<math>\frac{dN_1}{dt} = N_1(\epsilon_1 - \gamma_1N_2), \quad \frac{dN_2}{dt} = -N_2(\epsilon_2 - \gamma_2N_1)</math><br />
<br />
Meaning of the variables:<br />
::{| border="1" ||<br />
|- <br />
| <math>N_1 = N_1(t)</math> || Number of preys<br />
|-<br />
| <math>\epsilon_1>0</math> || Reproduction rate of prey without distortion and with enough food supply<br />
|-<br />
| <math>N_2 = N_2(t)</math> || Number of predators<br />
|-<br />
| <math>\epsilon_2>0</math> || Death rate of predators if no prey available<br />
|-<br />
| <math>\gamma_1>0</math> || Eating rate of predator per prey (equals death rate of prey per predator)<br />
|-<br />
| <math>\gamma_2>0</math> || Reproduction rate of predator per prey<br />
|}<br />
<br />
<br />
==Plot==<br />
<br />
<jsxgraph width="600" height="600"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1.5, 28.5, 28.5, -1.5], axis: true, grid: false});<br />
<br />
s = board.createElement('slider', [[20.0,26.0],[25.0,26.0],[0.0,0.3,1.0]],{name:'&epsilon;1',strokeColor:'black',fillColor:'black'});<br />
st = board.createElement('text', [20,25, "Birth rate prey"], {fixed:true});<br />
u = board.createElement('slider', [[20.0,24.0],[25.0,24.0],[0.0,0.7,1.0]],{name:'&epsilon;2',strokeColor:'black',fillColor:'black'});<br />
ut = board.createElement('text', [20,23, "Death rate predators"], {fixed:true});<br />
<br />
o = board.createElement('slider', [[10.0,26.0],[15.0,26.0],[0.0,0.1,1.0]],{name:'&gamma;1',strokeColor:'black',fillColor:'black'});<br />
ot = board.createElement('text', [10,25, "Death rate preys/per predator"], {fixed:true});<br />
p = board.createElement('slider', [[10.0,24.0],[15.0,24.0],[0.0,0.3,1.0]],{name:'&gamma;2',strokeColor:'black',fillColor:'black'});<br />
pt = board.createElement('text', [10,23, "Reproduction rate pred./per prey"], {fixed:true});<br />
<br />
startpred = board.createElement('glider', [0, 10, board.defaultAxes.y], {name:'Preys',strokeColor:'red',fillColor:'red'});<br />
startprey = board.createElement('glider', [0, 5, board.defaultAxes.y], {name:'Predators',strokeColor:'blue',fillColor:'blue'});<br />
<br />
var g3 = null;<br />
<br />
function ode() {<br />
var I = [0, 25];<br />
var N = 1000;<br />
<br />
var f = function(t, x) {<br />
var bpred = s.Value();//0.3;<br />
var bprey = u.Value();//0.7;<br />
var dpred = o.Value();//0.1;<br />
var dprey = p.Value();//0.3;<br />
<br />
var y = [];<br />
y[0] = x[0]*(bpred - dpred*x[1]);<br />
y[1] = -x[1]*(bprey - dprey*x[0]);<br />
<br />
return y;<br />
}<br />
<br />
var x0 = [startpred.Y(), startprey.Y()];<br />
<br />
var data = JXG.Math.Numerics.rungeKutta('euler', x0, I, N, f);<br />
<br />
var t = [];<br />
var q = I[0];<br />
var h = (I[1]-I[0])/N;<br />
for(var i=0; i<data.length; i++) {<br />
data[i].push(q);<br />
q += h;<br />
}<br />
<br />
return data;<br />
}<br />
<br />
var data = ode();<br />
var t = [];<br />
var dataprey = [];<br />
var datapred = [];<br />
for(var i=0; i<data.length; i++) {<br />
t[i] = data[i][2];<br />
datapred[i] = data[i][0];<br />
dataprey[i] = data[i][1];<br />
}<br />
<br />
g3 = board.createElement('curve', [t, datapred], {strokeColor:'red', strokeWidth:'2px'});<br />
g3.updateDataArray = function() {<br />
var data = ode();<br />
this.dataX = [];<br />
this.dataY = [];<br />
for(var i=0; i<data.length; i++) {<br />
this.dataX[i] = t[i];<br />
this.dataY[i] = data[i][0];<br />
}<br />
}<br />
g4 = board.createElement('curve', [t, dataprey], {strokeColor:'blue', strokeWidth:'2px'});<br />
g4.updateDataArray = function() {<br />
var data = ode();<br />
this.dataX = [];<br />
this.dataY = [];<br />
for(var i=0; i<data.length; i++) {<br />
this.dataX[i] = t[i];<br />
this.dataY[i] = data[i][1];<br />
}<br />
}<br />
</jsxgraph><br />
<br />
==Source code==<br />
<source lang="javascript"><br />
// Initialise board<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1.5, 28.5, 28.5, -1.5], axis: true, grid: false});<br />
<br />
// Define sliders to dynamically change parameters of the equations and create text elements to describe them<br />
s = board.createElement('slider', [[20.0,26.0],[25.0,26.0],[0.0,0.3,1.0]],{name:'&epsilon;1',strokeColor:'black',fillColor:'black'});<br />
st = board.createElement('text', [20,25, "Birth rate predators"], {fixed:true});<br />
u = board.createElement('slider', [[20.0,24.0],[25.0,24.0],[0.0,0.7,1.0]],{name:'&epsilon;2',strokeColor:'black',fillColor:'black'});<br />
ut = board.createElement('text', [20,23, "Death rate predators"], {fixed:true});<br />
<br />
o = board.createElement('slider', [[10.0,26.0],[15.0,26.0],[0.0,0.1,1.0]],{name:'&gamma;1',strokeColor:'black',fillColor:'black'});<br />
ot = board.createElement('text', [10,25, "Death rate preys/per predator"], {fixed:true});<br />
p = board.createElement('slider', [[10.0,24.0],[15.0,24.0],[0.0,0.3,1.0]],{name:'&gamma;2',strokeColor:'black',fillColor:'black'});<br />
pt = board.createElement('text', [10,23, "Reproduction rate pred./per prey"], {fixed:true});<br />
<br />
// Dynamic initial value as gliders on the y-axis<br />
startpred = board.createElement('glider', [0, 10, board.defaultAxes.y], {name:'Preys',strokeColor:'red',fillColor:'red'});<br />
startprey = board.createElement('glider', [0, 5, board.defaultAxes.y], {name:'Predators',strokeColor:'blue',fillColor:'blue'});<br />
<br />
<br />
// Variables for the JXG.Curves<br />
var g3 = null;<br />
var g4 = null;<br />
<br />
// Initialise ODE and solve it with JXG.Math.Numerics.rungeKutta()<br />
function ode() {<br />
// evaluation interval<br />
var I = [0, 25];<br />
// Number of steps. 1000 should be enough<br />
var N = 1000;<br />
<br />
// Right hand side of the ODE dx/dt = f(t, x)<br />
var f = function(t, x) {<br />
var bpred = s.Value();//0.3;<br />
var bprey = u.Value();//0.7;<br />
var dpred = o.Value();//0.1;<br />
var dprey = p.Value();//0.3;<br />
<br />
var y = [];<br />
y[0] = x[0]*(bpred - dpred*x[1]);<br />
y[1] = -x[1]*(bprey - dprey*x[0]);<br />
<br />
return y;<br />
}<br />
<br />
// Initial value<br />
var x0 = [startpred.Y(), startprey.Y()];<br />
<br />
// Solve ode<br />
var data = JXG.Math.Numerics.rungeKutta('euler', x0, I, N, f);<br />
<br />
// to plot the data against time we need the times where the equations were solved<br />
var t = [];<br />
var q = I[0];<br />
var h = (I[1]-I[0])/N;<br />
for(var i=0; i<data.length; i++) {<br />
data[i].push(q);<br />
q += h;<br />
}<br />
<br />
return data;<br />
}<br />
<br />
// get data points<br />
var data = ode();<br />
<br />
// copy data to arrays so we can plot it using JXG.Curve<br />
var t = [];<br />
var dataprey = [];<br />
var datapred = [];<br />
for(var i=0; i<data.length; i++) {<br />
t[i] = data[i][2];<br />
datapred[i] = data[i][0];<br />
dataprey[i] = data[i][1];<br />
}<br />
<br />
// Plot Predator<br />
g3 = board.createElement('curve', [t, datapred], {strokeColor:'red', strokeWidth:'2px'});<br />
g3.updateDataArray = function() {<br />
var data = ode();<br />
this.dataX = [];<br />
this.dataY = [];<br />
for(var i=0; i<data.length; i++) {<br />
this.dataX[i] = t[i];<br />
this.dataY[i] = data[i][0];<br />
}<br />
}<br />
<br />
// Plot Prey<br />
g4 = board.createElement('curve', [t, dataprey], {strokeColor:'blue', strokeWidth:'2px'});<br />
g4.updateDataArray = function() {<br />
var data = ode();<br />
this.dataX = [];<br />
this.dataY = [];<br />
for(var i=0; i<data.length; i++) {<br />
this.dataX[i] = t[i];<br />
this.dataY[i] = data[i][1];<br />
}<br />
}<br />
</source><br />
<br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Main_Page&diff=6187
Main Page
2013-09-19T11:59:16Z
<p>Michael: </p>
<hr />
<div>== JSXGraph Wiki ==<br />
Welcome to the JSXGraph Wiki. This Wiki provides information and examples about the use of JSXGraph. <br />
* [[Showcases]]<br />
* [[Documentation| First steps]]<br />
* [[Advanced constructions]]<br />
* [[FAQ - Frequently asked questions]]<br />
* [[Contributions]]<br />
* [[Bringing JavaScript to its edge]]<br />
* [[:Category:Examples]] contains a list of all examples<br />
* [[:Category:Text]] Examples featuring the text element<br />
To learn more about creating constructions with JSXGraph from the scratch visit the the examples category: [[:Category:Examples]]<br />
<br />
[http://jsxgraph.org Homepage of the JSXGraph project]<br />
<br />
== Message to all contributors ==<br />
The JSXGraph team appreciates your valuable contributions to the JSXGraph wiki!<br />
<br />
But due to security reasons we had to enforce email based registration. Now, all users have to confirm their email address once. If you have not done so, please press "Confirm email" in [[Special:Preferences]]. Additionally to create new and edit existing wiki pages you have to [http://jsxgraph.uni-bayreuth.de/wp/contact/ contact us].<br />
<br />
<br />
== Development links ==<br />
<br />
* [http://jsxgraph.org Homepage]<br />
* [https://github.com/jsxgraph/jsxgraph GitHub project], [https://sourceforge.net/projects/jsxgraph/ SF project]<br />
* Browse [https://github.com/jsxgraph/jsxgraph our repository]<br />
* [https://github.com/jsxgraph/jsxgraph/issues Issue tracker]<br />
* [https://groups.google.com/forum/#!forum/jsxgraph Discussion group]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Geometric_constructions_with_JessieScript&diff=6183
Geometric constructions with JessieScript
2013-09-16T06:51:15Z
<p>Michael: </p>
<hr />
<div>Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function<br />
<source><br />
board.construct(...);<br />
</source><br />
Possible elements:<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Construction !! Description<br />
|-<br />
| A(1,1) || Point with name 'A' at position (1,1)<br />
|-<br />
| ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at position (0.5,1)<br />
|-<br />
| ]AB[ || straight line through points A and B<br />
|-<br />
| [AB[ || ray through points A and B, stopping at A<br />
|-<br />
| ]AB] || ray through points A and B, stopping at B<br />
|-<br />
| [AB] || segment through points A and B<br />
|-<br />
| g=[AB] || segment through points A and B, named by 'g'<br />
|-<br />
| k(A,1) || circle with midpoint A and radius 1<br />
|-<br />
| k(A,B) || circle with midpoint A through point B on the circle line<br />
|-<br />
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]<br />
|-<br />
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'<br />
|}<br />
The different elements have to be separated by semicolon.<br />
<br />
The function returns an object with all the created elements so that afterwards properties can be set.<br />
The access works by<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Element !! Description<br />
|-<br />
| constr.points[i] || take i-th point of the construction 'constr'<br />
|-<br />
| constr.lines[i] || take i-th line (or rays or segement) of the construction 'constr'<br />
|-<br />
| constr.circles[i] || take i-th circle of the construction 'constr'<br />
|-<br />
| constr.A || take element with name 'A' of the construction 'constr'<br />
|}<br />
===Example===<br />
<jsxgraph width="600" height="450" box="jxgbox" modules="JessieScript"><br />
var board, cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, boundingbox: [-1, 6, 11, -3], axis:true});<br />
<br />
cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");<br />
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="javascript"><br />
var board, cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('box', {grid:true, boundingbox: [-1, 6, 11, -3], axis:true});<br />
<br />
cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");<br />
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Geometric_constructions_with_JessieScript&diff=6182
Geometric constructions with JessieScript
2013-09-16T06:50:33Z
<p>Michael: </p>
<hr />
<div><html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/~michael/jsxgui/JSXGraph/src/parser/jessiescript.js"></script><br />
</html><br />
Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function<br />
<source><br />
board.construct(...);<br />
</source><br />
Possible elements:<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Construction !! Description<br />
|-<br />
| A(1,1) || Point with name 'A' at position (1,1)<br />
|-<br />
| ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at position (0.5,1)<br />
|-<br />
| ]AB[ || straight line through points A and B<br />
|-<br />
| [AB[ || ray through points A and B, stopping at A<br />
|-<br />
| ]AB] || ray through points A and B, stopping at B<br />
|-<br />
| [AB] || segment through points A and B<br />
|-<br />
| g=[AB] || segment through points A and B, named by 'g'<br />
|-<br />
| k(A,1) || circle with midpoint A and radius 1<br />
|-<br />
| k(A,B) || circle with midpoint A through point B on the circle line<br />
|-<br />
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]<br />
|-<br />
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'<br />
|}<br />
The different elements have to be separated by semicolon.<br />
<br />
The function returns an object with all the created elements so that afterwards properties can be set.<br />
The access works by<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Element !! Description<br />
|-<br />
| constr.points[i] || take i-th point of the construction 'constr'<br />
|-<br />
| constr.lines[i] || take i-th line (or rays or segement) of the construction 'constr'<br />
|-<br />
| constr.circles[i] || take i-th circle of the construction 'constr'<br />
|-<br />
| constr.A || take element with name 'A' of the construction 'constr'<br />
|}<br />
===Example===<br />
<jsxgraph width="600" height="450" box="jxgbox" modules="JessieScript"><br />
var board, cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, boundingbox: [-1, 6, 11, -3], axis:true});<br />
<br />
cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");<br />
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="javascript"><br />
var board, cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('box', {grid:true, boundingbox: [-1, 6, 11, -3], axis:true});<br />
<br />
cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");<br />
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Geometric_constructions_with_JessieScript&diff=6181
Geometric constructions with JessieScript
2013-09-16T06:45:11Z
<p>Michael: </p>
<hr />
<div>Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function<br />
<source><br />
board.construct(...);<br />
</source><br />
Possible elements:<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Construction !! Description<br />
|-<br />
| A(1,1) || Point with name 'A' at position (1,1)<br />
|-<br />
| ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at position (0.5,1)<br />
|-<br />
| ]AB[ || straight line through points A and B<br />
|-<br />
| [AB[ || ray through points A and B, stopping at A<br />
|-<br />
| ]AB] || ray through points A and B, stopping at B<br />
|-<br />
| [AB] || segment through points A and B<br />
|-<br />
| g=[AB] || segment through points A and B, named by 'g'<br />
|-<br />
| k(A,1) || circle with midpoint A and radius 1<br />
|-<br />
| k(A,B) || circle with midpoint A through point B on the circle line<br />
|-<br />
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]<br />
|-<br />
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'<br />
|}<br />
The different elements have to be separated by semicolon.<br />
<br />
The function returns an object with all the created elements so that afterwards properties can be set.<br />
The access works by<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Element !! Description<br />
|-<br />
| constr.points[i] || take i-th point of the construction 'constr'<br />
|-<br />
| constr.lines[i] || take i-th line (or rays or segement) of the construction 'constr'<br />
|-<br />
| constr.circles[i] || take i-th circle of the construction 'constr'<br />
|-<br />
| constr.A || take element with name 'A' of the construction 'constr'<br />
|}<br />
===Example===<br />
<jsxgraph width="600" height="450" box="jxgbox" modules="JessieScript"><br />
var board, cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, boundingbox: [-1, 6, 11, -3], axis:true});<br />
<br />
cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");<br />
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="javascript"><br />
var board, cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('box', {grid:true, boundingbox: [-1, 6, 11, -3], axis:true});<br />
<br />
cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");<br />
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Geometric_constructions_with_JessieScript&diff=6180
Geometric constructions with JessieScript
2013-09-16T06:45:00Z
<p>Michael: </p>
<hr />
<div><script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/~michael/jsxgui/JSXGraph/src/parser/jessiescript.js"></script><br />
<br />
Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function<br />
<source><br />
board.construct(...);<br />
</source><br />
Possible elements:<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Construction !! Description<br />
|-<br />
| A(1,1) || Point with name 'A' at position (1,1)<br />
|-<br />
| ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at position (0.5,1)<br />
|-<br />
| ]AB[ || straight line through points A and B<br />
|-<br />
| [AB[ || ray through points A and B, stopping at A<br />
|-<br />
| ]AB] || ray through points A and B, stopping at B<br />
|-<br />
| [AB] || segment through points A and B<br />
|-<br />
| g=[AB] || segment through points A and B, named by 'g'<br />
|-<br />
| k(A,1) || circle with midpoint A and radius 1<br />
|-<br />
| k(A,B) || circle with midpoint A through point B on the circle line<br />
|-<br />
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]<br />
|-<br />
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'<br />
|}<br />
The different elements have to be separated by semicolon.<br />
<br />
The function returns an object with all the created elements so that afterwards properties can be set.<br />
The access works by<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Element !! Description<br />
|-<br />
| constr.points[i] || take i-th point of the construction 'constr'<br />
|-<br />
| constr.lines[i] || take i-th line (or rays or segement) of the construction 'constr'<br />
|-<br />
| constr.circles[i] || take i-th circle of the construction 'constr'<br />
|-<br />
| constr.A || take element with name 'A' of the construction 'constr'<br />
|}<br />
===Example===<br />
<jsxgraph width="600" height="450" box="jxgbox" modules="JessieScript"><br />
var board, cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, boundingbox: [-1, 6, 11, -3], axis:true});<br />
<br />
cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");<br />
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="javascript"><br />
var board, cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('box', {grid:true, boundingbox: [-1, 6, 11, -3], axis:true});<br />
<br />
cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");<br />
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Map_with_German_administrative_districts&diff=6163
Map with German administrative districts
2013-08-07T13:16:10Z
<p>Michael: works in 0.98</p>
<hr />
<div>This map shows the German administrative districts (counties).<br />
<html><br />
<script type="text/javascript" src="/ajax/krs.js"></script><br />
<div id="landkreis">&nbsp;</div><br />
</html><br />
<br />
<jsxgraph width="600" height="800"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:bbox, keepaspectratio:true}),<br />
c = [], <br />
len = paths.length;<br />
<br />
function final() {<br />
brd.unsuspendUpdate();<br />
}<br />
<br />
function createCurve(path) {<br />
var i = c.length,<br />
col = JXG.hsv2rgb(360/len*i,0.7,1.0), // fill color<br />
scol = '#333333', // stroke color<br />
sw = 1, // stroke width<br />
hcol = '#ffff00'; // highlight color<br />
c[i] = brd.create('curve',path,<br />
{name:info[path[2]][2], <br />
fillColor:col,<br />
strokeColor:scol,strokeWidth:sw,highlightFillColor:hcol,fillOpacity:0.3});<br />
JXG.addEvent(c[i].rendNode, 'mouseover', function(){c[i].nohcol = c[i].visProp.fillcolor; c[i].setAttribute({fillColor: 'yellow'});}, c[i]);<br />
JXG.addEvent(c[i].rendNode, 'mouseout', function(){c[i].setAttribute({fillColor: c[i].nohcol});}, c[i]);<br />
c[i].hasPoint = function(){return false;};<br />
};<br />
<br />
brd.suspendUpdate();<br />
JXG.timedChunk(paths, createCurve, null, final);<br />
<br />
</jsxgraph><br />
© Bundesamt für Kartographie und Geodäsie, Frankfurt am Main, 2009<br />
<br />
Vervielfältigung, Verbreitung und öffentliche Zugänglichmachung, auch auszugsweise, mit Quellenangabe gestattet.<br />
===The JavaScript code===<br />
The data has been downloaded in ArcView/shape format from [http://www.geodatenzentrum.de/geodaten/gdz_rahmen.gdz_div?gdz_spr=deu&gdz_akt_zeile=5&gdz_anz_zeile=4&gdz_user_id=0 Bundesamt für Kartographie und Geodäsie]. Then, using [http://shapelib.maptools.org/ shapelib] and [http://ftp.intevation.de/users/bh/pyshapelib/ pyshapelib] the file was converted to JavaScript, see [http://jsxgraph.uni-bayreuth.de/ajax/krs.js krs.js].<br />
The shape data from this file is displayed using the following JSXGraph code.<br />
<source lang="javascript"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:bbox, keepaspectratio:true}),<br />
c = [], <br />
len = paths.length;<br />
<br />
function final() {<br />
brd.unsuspendUpdate();<br />
}<br />
<br />
function createCurve(path) {<br />
var i = c.length,<br />
col = JXG.hsv2rgb(360/len*i,0.7,1.0), // fill color<br />
scol = '#333333', // stroke color<br />
sw = 1, // stroke width<br />
hcol = '#ffff00'; // highlight color<br />
c[i] = brd.create('curve',path,<br />
{name:info[path[2]][2], <br />
fillColor:col,<br />
strokeColor:scol,strokeWidth:sw,highlightFillColor:hcol,fillOpacity:0.3});<br />
JXG.addEvent(c[i].rendNode, 'mouseover', function(){c[i].nohcol = c[i].visProp.fillcolor; c[i].setAttribute({fillColor: 'yellow'});}, c[i]);<br />
JXG.addEvent(c[i].rendNode, 'mouseout', function(){c[i].setAttribute({fillColor: c[i].nohcol});}, c[i]);<br />
c[i].hasPoint = function(){return false;};<br />
};<br />
<br />
brd.suspendUpdate();<br />
JXG.timedChunk(paths, createCurve, null, final);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Charts]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Map_with_German_electoral_districts&diff=6162
Map with German electoral districts
2013-08-07T13:14:58Z
<p>Michael: works in 0.98</p>
<hr />
<div><html><br />
<script type="text/javascript" src="/ajax/germany.js"></script><br />
<div id="wahlkreis">&nbsp;</div><br />
</html><br />
<jsxgraph width="500" height="700"><br />
var minX =-289319.4,<br />
maxY = 6827620,<br />
maxX = 351315.7,<br />
minY = 5960587,<br />
brd,<br />
wahlkreisNode = document.getElementById('wahlkreis').firstChild, <br />
points = [],<br />
len = data.length, // from germany.js<br />
lastWk = null,<br />
i, col = 0;<br />
<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[minX-1000,maxY+1000,maxX+1000,minY-1000],keepaspectratio:true});<br />
<br />
for(i=0;i<len;i++) {<br />
if(i%6==1) {<br />
lastWk = data[i];<br />
}<br />
else if(i%6 == 5) {<br />
points.push([data[i],lastWk]);<br />
}<br />
}<br />
<br />
function createCurve(area) {<br />
var compos = area[0].split(';'), // Connected component<br />
x = [], y = [],<br />
c = [], num, i, a, graph, k, a;<br />
<br />
num = compos.length;<br />
for (k=0;k<num;k++) {<br />
x = []; y = []; c = [];<br />
xy = compos[k].split(',');<br />
len = xy.length;<br />
for(i=0;i<len;i++) {<br />
a = xy[i].split(' ');<br />
c.push(new JXG.Coords(JXG.COORDS_BY_USER, [1*a[0], 1*a[1]], brd));<br />
}<br />
c = JXG.Math.Numerics.RamerDouglasPeuker(c,1.3);<br />
len = c.length;<br />
for (i=0;i<len;i++) {<br />
x.push(c[i].usrCoords[1]);<br />
y.push(c[i].usrCoords[2]);<br />
}<br />
graph = brd.create('curve', [x,y], <br />
{fillColor:JXG.hsv2rgb(0.5*(col++),0.5,0.9),<br />
highlightFillColor:'yellow',<br />
strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'});<br />
if (k==0) {<br />
JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.nohcol = graph.visProp.fillcolor; graph.setAttribute({fillColor: 'yellow'});}, graph);<br />
JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.setAttribute({fillColor: graph.nohcol});}, graph);<br />
}<br />
graph.hasPoint = function(){return false; };<br />
}<br />
}<br />
<br />
function final() {<br />
brd.unsuspendUpdate();<br />
}<br />
<br />
brd.suspendUpdate();<br />
JXG.timedChunk(points, createCurve, null, final);<br />
</jsxgraph><br />
<br />
For a more elaborate version see [http://vis.uell.net/wahlatlas/ http://vis.uell.net/wahlatlas/].<br />
<br />
© Bundeswahlleiter, Statistisches Bundesamt, Wiesbaden 2008, Wahlkreiskarte für die Wahl zum 17. Deutschen Bundestag<br />
<br />
Geoinformationen © Bundesamt für Kartographie und Geodäsie [http://www.bkg.bund.de www.bkg.bund.de]<br />
<br />
<br />
===The underlying JavaScript code===<br />
<source lang="xml"><br />
<script type="text/javascript" src="/ajax/germany.js"></script><br />
<div id="wahlkreis">&nbsp;</div><br />
</source><br />
<source lang="javascript"><br />
var minX =-289319.4,<br />
maxY = 6827620,<br />
maxX = 351315.7,<br />
minY = 5960587,<br />
brd,<br />
wahlkreisNode = document.getElementById('wahlkreis').firstChild, <br />
points = [],<br />
len = data.length, // from germany.js<br />
lastWk = null,<br />
i, col = 0;<br />
<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[minX-1000,maxY+1000,maxX+1000,minY-1000],keepaspectratio:true});<br />
<br />
for(i=0;i<len;i++) {<br />
if(i%6==1) {<br />
lastWk = data[i];<br />
}<br />
else if(i%6 == 5) {<br />
points.push([data[i],lastWk]);<br />
}<br />
}<br />
<br />
function createCurve(area) {<br />
var compos = area[0].split(';'), // Connected component<br />
x = [], y = [],<br />
c = [], num, i, a, graph, k, a;<br />
<br />
num = compos.length;<br />
for (k=0;k<num;k++) {<br />
x = []; y = []; c = [];<br />
xy = compos[k].split(',');<br />
len = xy.length;<br />
for(i=0;i<len;i++) {<br />
a = xy[i].split(' ');<br />
c.push(new JXG.Coords(JXG.COORDS_BY_USER, [1*a[0], 1*a[1]], brd));<br />
}<br />
c = JXG.Math.Numerics.RamerDouglasPeuker(c,1.3);<br />
len = c.length;<br />
for (i=0;i<len;i++) {<br />
x.push(c[i].usrCoords[1]);<br />
y.push(c[i].usrCoords[2]);<br />
}<br />
graph = brd.createElement('curve', [x,y], <br />
{fillColor:JXG.hsv2rgb(0.5*(col++),0.5,0.9),<br />
highlightFillColor:'yellow',<br />
strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'});<br />
if (k==0) {<br />
JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.nohcol = graph.visProp.fillcolor; graph.setAttribute({fillColor: 'yellow'});}, graph);<br />
JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.setAttribute({fillColor: graph.nohcol});}, graph);<br />
}<br />
graph.hasPoint = function(){return false; };<br />
}<br />
}<br />
<br />
brd.suspendUpdate();<br />
JXG.timedChunk(points, createCurve, null, final);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Charts]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Cannonball&diff=6159
Cannonball
2013-08-07T12:44:54Z
<p>Michael: works in 0.98</p>
<hr />
<div><jsxgraph width="800" height="400"><br />
(function () {<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),<br />
bottom = board.create('image', ['http://jsxgraph.uni-bayreuth.de/wiki/images/1/13/Cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),<br />
muzzle = board.create('image', ['http://jsxgraph.uni-bayreuth.de/wiki/images/e/e4/Cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),<br />
shoot = board.create('text', [9, 9.5, '<button id="shoot">Shoot</button>']),<br />
reset = board.create('text', [11, 9.5, '<button id="reset">Reset</button>']),<br />
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,<br />
<br />
animTime = function () {<br />
return 3000;<br />
},<br />
<br />
fAngle = function () {<br />
return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X());<br />
},<br />
<br />
fSolution = function (x) {<br />
var b = fAngle(),<br />
g = 9.81/2;<br />
<br />
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();<br />
},<br />
<br />
fAnim = function (t) {<br />
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,<br />
s = NaN;<br />
<br />
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {<br />
s = solution.points[i].usrCoords.slice(1);<br />
}<br />
<br />
return s;<br />
};<br />
<br />
board.options.animationDelay = 50;<br />
<br />
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});<br />
<br />
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});<br />
cc = board.create('circle', [cp, 1.25], {visible: false});<br />
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});<br />
<br />
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});<br />
rot.bindTo(muzzle);<br />
<br />
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});<br />
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});<br />
rot.bindTo(cannonball);<br />
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});<br />
<br />
<br />
JXG.addEvent(document.getElementById('shoot'), 'mouseup', function () {<br />
cannonball.setProperty({<br />
visible: false<br />
});<br />
cbanim.setProperty({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
}, this);<br />
<br />
JXG.addEvent(document.getElementById('reset'), 'mouseup', function () {<br />
board.stopAllAnimation();<br />
cbanim.setProperty({visible: false});<br />
cannonball.setProperty({visible: true});<br />
}, this);<br />
<br />
})();<br />
</jsxgraph><br />
<br />
<source lang="javascript"><br />
(function () {<br />
var board = JXG.JSXGraph.initBoard('cannon', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),<br />
bottom = board.create('image', ['img/cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),<br />
muzzle = board.create('image', ['img/cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),<br />
shoot = board.create('text', [9, 9.5, '<button id="shoot">Shoot</button>']),<br />
reset = board.create('text', [11, 9.5, '<button id="reset">Reset</button>']),<br />
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,<br />
<br />
animTime = function () {<br />
return 3000;<br />
},<br />
<br />
fAngle = function () {<br />
return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X());<br />
},<br />
<br />
fSolution = function (x) {<br />
var b = fAngle(),<br />
g = 9.81/2;<br />
<br />
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();<br />
},<br />
<br />
fAnim = function (t) {<br />
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,<br />
s = NaN;<br />
<br />
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {<br />
s = solution.points[i].usrCoords.slice(1);<br />
}<br />
<br />
return s;<br />
};<br />
<br />
board.options.animationDelay = 50;<br />
<br />
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});<br />
<br />
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});<br />
cc = board.create('circle', [cp, 1.25], {visible: false});<br />
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});<br />
<br />
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});<br />
rot.bindTo(muzzle);<br />
<br />
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});<br />
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});<br />
rot.bindTo(cannonball);<br />
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});<br />
<br />
<br />
JXG.addEvent(document.getElementById('shoot'), 'mouseup', function () {<br />
cannonball.setProperty({<br />
visible: false<br />
});<br />
cbanim.setProperty({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
}, this);<br />
<br />
JXG.addEvent(document.getElementById('reset'), 'mouseup', function () {<br />
board.stopAllAnimation();<br />
cbanim.setProperty({visible: false});<br />
cannonball.setProperty({visible: true});<br />
}, this);<br />
<br />
})();<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Physics]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Browser_event_and_coordinates&diff=6091
Browser event and coordinates
2013-08-06T08:05:01Z
<p>Michael: </p>
<hr />
<div>This example shows how to add a point whenever the user clicks on the board. The function getMouseCoords extracts the click coordinates from the event object and returns a JXG.Coords object with the point's coordinates on the board. The for loop in the event listener is to check if there is already a point as we don't want to create a point in this case.<br />
<br />
<jsxgraph width="400" height="400"><br />
var getMouseCoords = function(e, i) {<br />
var cPos = board.getCoordsTopLeftCorner(e, i),<br />
absPos = JXG.getPosition(e, i),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
down = function(e) {<br />
var canCreate = true, i, coords, el;<br />
<br />
if (e[JXG.touchProperty]) {<br />
// index of the finger that is used to extract the coordinates<br />
i = 0;<br />
}<br />
coords = getMouseCoords(e, i);<br />
<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('down', down);<br />
</jsxgraph><br />
<br />
==The JavaScript Code==<br />
<br />
<source lang="javascript"><br />
var getMouseCoords = function(e, i) {<br />
var cPos = board.getCoordsTopLeftCorner(e, i),<br />
absPos = JXG.getPosition(e, i),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
down = function(e) {<br />
var canCreate = true, i, coords, el;<br />
<br />
if (e[JXG.touchProperty]) {<br />
// index of the finger that is used to extract the coordinates<br />
i = 0;<br />
}<br />
coords = getMouseCoords(e, i);<br />
<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('down', down);<br />
</source><br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Browser_event_and_coordinates&diff=6090
Browser event and coordinates
2013-08-06T08:04:04Z
<p>Michael: </p>
<hr />
<div>This example shows how to add a point whenever the user clicks on the board. The function getMouseCoords extracts the click coordinates from the event object and returns a JXG.Coords object with the point's coordinates on the board. The for loop in the event listener is to check if there is already a point as we don't want to create a point in this case.<br />
<br />
<jsxgraph width="400" height="400"><br />
var getMouseCoords = function(e, i) {<br />
var cPos = board.getCoordsTopLeftCorner(e, i),<br />
absPos = JXG.getPosition(e, i),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
down = function(e) {<br />
var canCreate = true, i, coords, el;<br />
<br />
if (e[JXG.touchProperty]) {<br />
// index of the finger that is used to extract the coordinates<br />
i = 0;<br />
}<br />
coords = getMouseCoords(e, i);<br />
<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('down', down);<br />
</jsxgraph><br />
<br />
==The JavaScript Code==<br />
<br />
<source lang="javascript"><br />
var getMouseCoords = function(e, i) {<br />
var cPos = board.getCoordsTopLeftCorner(e, i),<br />
absPos = JXG.getPosition(e, i),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
up = function(e) {<br />
var canCreate = true, i, coords, el;<br />
<br />
if (e[JXG.touchProperty]) {<br />
// index of the finger that is used to extract the coordinates<br />
i = 0;<br />
}<br />
coords = getMouseCoords(e, i);<br />
<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('up', up);<br />
</source><br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Browser_event_and_coordinates&diff=6089
Browser event and coordinates
2013-08-06T07:56:58Z
<p>Michael: </p>
<hr />
<div>This example shows how to add a point whenever the user clicks on the board. The function getMouseCoords extracts the click coordinates from the event object and returns a JXG.Coords object with the point's coordinates on the board. The for loop in the event listener is to check if there is already a point as we don't want to create a point in this case.<br />
<br />
<jsxgraph width="400" height="400"><br />
var getMouseCoords = function(e, i) {<br />
var cPos = board.getCoordsTopLeftCorner(e, i),<br />
absPos = JXG.getPosition(e, i),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
up = function(e) {<br />
var canCreate = true, i, coords, el;<br />
<br />
if (e[JXG.touchProperty]) {<br />
// index of the finger that is used to extract the coordinates<br />
i = 0;<br />
}<br />
coords = getMouseCoords(e, i);<br />
alert(i);<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('up', up);<br />
</jsxgraph><br />
<br />
==The JavaScript Code==<br />
<br />
<source lang="javascript"><br />
var getMouseCoords = function(e, i) {<br />
var cPos = board.getCoordsTopLeftCorner(e, i),<br />
absPos = JXG.getPosition(e, i),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
up = function(e) {<br />
var canCreate = true, i, coords, el;<br />
<br />
if (e[JXG.touchProperty]) {<br />
// index of the finger that is used to extract the coordinates<br />
i = 0;<br />
}<br />
coords = getMouseCoords(e, i);<br />
<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('up', up);<br />
</source><br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Browser_event_and_coordinates&diff=6088
Browser event and coordinates
2013-08-06T07:56:49Z
<p>Michael: </p>
<hr />
<div>This example shows how to add a point whenever the user clicks on the board. The function getMouseCoords extracts the click coordinates from the event object and returns a JXG.Coords object with the point's coordinates on the board. The for loop in the event listener is to check if there is already a point as we don't want to create a point in this case.<br />
<br />
<jsxgraph width="400" height="400"><br />
var getMouseCoords = function(e, i) {<br />
var cPos = board.getCoordsTopLeftCorner(e, i),<br />
absPos = JXG.getPosition(e, i),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
up = function(e) {<br />
var canCreate = true, i, coords, el;<br />
<br />
if (e[JXG.touchProperty]) {<br />
// index of the finger that is used to extract the coordinates<br />
i = 0;<br />
}<br />
coords = getMouseCoords(e, i);<br />
alert(i, e);<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('up', up);<br />
</jsxgraph><br />
<br />
==The JavaScript Code==<br />
<br />
<source lang="javascript"><br />
var getMouseCoords = function(e, i) {<br />
var cPos = board.getCoordsTopLeftCorner(e, i),<br />
absPos = JXG.getPosition(e, i),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
up = function(e) {<br />
var canCreate = true, i, coords, el;<br />
<br />
if (e[JXG.touchProperty]) {<br />
// index of the finger that is used to extract the coordinates<br />
i = 0;<br />
}<br />
coords = getMouseCoords(e, i);<br />
<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('up', up);<br />
</source><br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Browser_event_and_coordinates&diff=6087
Browser event and coordinates
2013-08-06T07:56:28Z
<p>Michael: </p>
<hr />
<div>This example shows how to add a point whenever the user clicks on the board. The function getMouseCoords extracts the click coordinates from the event object and returns a JXG.Coords object with the point's coordinates on the board. The for loop in the event listener is to check if there is already a point as we don't want to create a point in this case.<br />
<br />
<jsxgraph width="400" height="400"><br />
var getMouseCoords = function(e, i) {<br />
var cPos = board.getCoordsTopLeftCorner(e, i),<br />
absPos = JXG.getPosition(e, i),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
up = function(e) {<br />
var canCreate = true, i, coords, el;<br />
<br />
if (e[JXG.touchProperty]) {<br />
// index of the finger that is used to extract the coordinates<br />
i = 0;<br />
}<br />
coords = getMouseCoords(e, i);<br />
console.log(i, e);<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('up', up);<br />
</jsxgraph><br />
<br />
==The JavaScript Code==<br />
<br />
<source lang="javascript"><br />
var getMouseCoords = function(e, i) {<br />
var cPos = board.getCoordsTopLeftCorner(e, i),<br />
absPos = JXG.getPosition(e, i),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
up = function(e) {<br />
var canCreate = true, i, coords, el;<br />
<br />
if (e[JXG.touchProperty]) {<br />
// index of the finger that is used to extract the coordinates<br />
i = 0;<br />
}<br />
coords = getMouseCoords(e, i);<br />
<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('up', up);<br />
</source><br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Browser_event_and_coordinates&diff=6086
Browser event and coordinates
2013-08-06T07:55:37Z
<p>Michael: </p>
<hr />
<div>This example shows how to add a point whenever the user clicks on the board. The function getMouseCoords extracts the click coordinates from the event object and returns a JXG.Coords object with the point's coordinates on the board. The for loop in the event listener is to check if there is already a point as we don't want to create a point in this case.<br />
<br />
<jsxgraph width="400" height="400"><br />
var getMouseCoords = function(e, i) {<br />
var cPos = board.getCoordsTopLeftCorner(e, i),<br />
absPos = JXG.getPosition(e, i),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
up = function(e) {<br />
var canCreate = true, i, coords, el;<br />
<br />
if (e[JXG.touchProperty]) {<br />
// index of the finger that is used to extract the coordinates<br />
i = 0;<br />
}<br />
coords = getMouseCoords(e, i);<br />
<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('up', up);<br />
</jsxgraph><br />
<br />
==The JavaScript Code==<br />
<br />
<source lang="javascript"><br />
var getMouseCoords = function(e, i) {<br />
var cPos = board.getCoordsTopLeftCorner(e, i),<br />
absPos = JXG.getPosition(e, i),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
up = function(e) {<br />
var canCreate = true, i, coords, el;<br />
<br />
if (e[JXG.touchProperty]) {<br />
// index of the finger that is used to extract the coordinates<br />
i = 0;<br />
}<br />
coords = getMouseCoords(e, i);<br />
<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('up', up);<br />
</source><br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Browser_event_and_coordinates&diff=6085
Browser event and coordinates
2013-08-06T07:53:01Z
<p>Michael: </p>
<hr />
<div>This example shows how to add a point whenever the user clicks on the board. The function getMouseCoords extracts the click coordinates from the event object and returns a JXG.Coords object with the point's coordinates on the board. The for loop in the event listener is to check if there is already a point as we don't want to create a point in this case.<br />
<br />
<jsxgraph width="400" height="400"><br />
var getMouseCoords = function(e, i) {<br />
var cPos = board.getCoordsTopLeftCorner(e, i),<br />
absPos = JXG.getPosition(e, i),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
up = function(e) {<br />
var canCreate = true, i, coords, el;<br />
<br />
if (e[JXG.touchProperty]) {<br />
// index of the finger that is used to extract the coordinates<br />
i = 0;<br />
}<br />
coords = getMouseCoords(e, i);<br />
<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('up', up);<br />
</jsxgraph><br />
<br />
==The JavaScript Code==<br />
<br />
<source lang="javascript"><br />
var getMouseCoords = function(e) {<br />
var cPos = board.getCoordsTopLeftCorner(e),<br />
absPos = JXG.getPosition(e),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
up = function(e) {<br />
var canCreate = true,<br />
coords = getMouseCoords(e),<br />
el;<br />
<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('up', up);<br />
</source><br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Riemann_sums&diff=6084
Riemann sums
2013-08-06T07:09:45Z
<p>Michael: </p>
<hr />
<div><html><br />
<script type="text/javascript" src="http://korpelainen.net/js/AM1.js"></script> <br />
</html><br />
<html><br />
<form>Riemann sum type: <select id="sumtype"><br />
<option value='left' selected> left<br />
<option value='right'> right<br />
<option value='middle'> middle<br />
<option value='trapezoidal'> trapezoidal<br />
<option value='lower'> lower<br />
<option value='upper'> upper<br />
<option value='simpson'> simpson<br />
</select></form><br />
</html><br />
<br />
<jsxgraph width="800" height="400" box="box"><br />
var brd = JXG.JSXGraph.initBoard('box', {axis:true, boundingbox: [-8, 4, 8, -4]});<br />
var s = brd.create('slider',[[1,3],[5,3],[1,10,50]],{name:'n',snapWidth:1});<br />
var a = brd.create('slider',[[1,2],[5,2],[-10,-3,0]],{name:'start'});<br />
var b = brd.create('slider',[[1,1],[5,1],[0,Math.PI,10]],{name:'end'});<br />
var f = function(x){ return Math.sin(x); };<br />
var plot = brd.create('functiongraph',[f,function(){return a.Value();}, function(){return b.Value();}]);<br />
<br />
var os = brd.create('riemannsum',[f, <br />
function(){ return s.Value();}, function(){ return document.getElementById('sumtype').value;},<br />
function(){return a.Value();}, <br />
function(){return b.Value();}<br />
], <br />
{fillColor:'#ffff00', fillOpacity:0.3});<br />
<br />
brd.create('text',[-6,-3,function(){ return 'Sum='+(JXG.Math.Numerics.riemannsum(f,s.Value(),document.getElementById('sumtype').value,a.Value(),b.Value())).toFixed(4); }]);<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<source lang="javascript"><br />
var brd = JXG.JSXGraph.initBoard('box', {axis:true, boundingbox: [-8, 4, 8, -4]});<br />
var s = brd.create('slider',[[1,3],[5,3],[1,10,50]],{name:'n',snapWidth:1});<br />
var a = brd.create('slider',[[1,2],[5,2],[-10,-3,0]],{name:'start'});<br />
var b = brd.create('slider',[[1,1],[5,1],[0,Math.PI,10]],{name:'end'});<br />
var f = function(x){ return Math.sin(x); };<br />
var plot = brd.create('functiongraph',[f,function(){return a.Value();}, function(){return b.Value();}]);<br />
<br />
var os = brd.create('riemannsum',[f, <br />
function(){ return s.Value();}, function(){ return document.getElementById('sumtype').value;},<br />
function(){return a.Value();}, <br />
function(){return b.Value();}<br />
], <br />
{fillColor:'#ffff00', fillOpacity:0.3});<br />
<br />
brd.create('text',[-6,-3,function(){ return 'Sum='+(JXG.Math.Numerics.riemannsum(f,s.Value(),document.getElementById('sumtype').value,a.Value(),b.Value())).toFixed(4); }]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Hypotrochoid&diff=6046
Hypotrochoid
2013-02-21T14:42:13Z
<p>Michael: </p>
<hr />
<div><jsxgraph box="jxgbox" width="500" height="500"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});<br />
var g1 = board.create('point', [1, -1], {size:4});<br />
var g2 = board.create('point', [2.5, -2], {size:4});<br />
var g3 = board.create('point', [1, -3], {size:3});<br />
var g4 = board.create('point', [2.5, -4], {size:3});<br />
var g5 = board.create('point', [-4, 1], {size:3,name:''});<br />
<br />
var c1 = board.create('curve', [<br />
function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },<br />
function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },<br />
0,function(){ return Math.PI*7*Math.abs(g4.X());}],{<br />
strokeWidth:function(){return g5.Y()*3;},<br />
strokeOpacity:function(){return g5.Y()*0.6;}<br />
});<br />
<br />
var t = board.create('text', [function() { return g5.X()+0.2; },function() { return g5.Y()+0.25; }, 'X(B)=<value>X(B)</value>'], <br />
{ <br />
digits:3, <br />
fontSize:function(){return Math.abs(g5.Y())*10+1;} <br />
});<br />
</jsxgraph> <br />
<br />
===The JavaScript code to produce this picture===<br />
<source lang="javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});<br />
var g1 = board.create('point', [1, -1], {size:4});<br />
var g2 = board.create('point', [2.5, -2], {size:4});<br />
var g3 = board.create('point', [1, -3], {size:3});<br />
var g4 = board.create('point', [2.5, -4], {size:3});<br />
var g5 = board.create('point', [-4, 1], {size:3,name:''});<br />
<br />
var c1 = board.create('curve', [<br />
function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },<br />
function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },<br />
0,function(){ return Math.PI*7*Math.abs(g4.X());}],{<br />
strokeWidth:function(){return g5.Y()*3;},<br />
strokeOpacity:function(){return g5.Y()*0.6;}<br />
});<br />
<br />
var t = board.create('text', [function() { return g5.X()+0.2; },function() { return g5.Y()+0.25; },'X(B)=<value>X(B)</value>'], <br />
{ <br />
digits:3, <br />
fontSize:function(){return Math.abs(g5.Y())*10+1;}<br />
});<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Curves]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Hypotrochoid&diff=6045
Hypotrochoid
2013-02-21T13:44:28Z
<p>Michael: </p>
<hr />
<div><jsxgraph box="jxgbox" width="500" height="500"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});<br />
var g1 = board.create('point', [1, -1], {size:4});<br />
var g2 = board.create('point', [2.5, -2], {size:4});<br />
var g3 = board.create('point', [1, -3], {size:3});<br />
var g4 = board.create('point', [2.5, -4], {size:3});<br />
var g5 = board.create('point', [-4, 1], {size:3,name:''});<br />
<br />
var c1 = board.create('curve', [<br />
function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },<br />
function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },<br />
0,function(){ return Math.PI*7*Math.abs(g4.X());}],{<br />
strokeWidth:function(){return g5.Y()*3;},<br />
strokeOpacity:function(){return g5.Y()*0.6;}<br />
});<br />
<br />
var t = board.create('text', [function() { return g5.X()+0.2; },function() { return g5.Y()+0.25; }, function () { return 'X(B) = ' + g2.X(); }], <br />
{ <br />
digits:3, <br />
fontSize:function(){return Math.abs(g5.Y())*10+1;} <br />
});<br />
</jsxgraph> <br />
<br />
===The JavaScript code to produce this picture===<br />
<source lang="javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});<br />
var g1 = board.create('point', [1, -1], {size:4});<br />
var g2 = board.create('point', [2.5, -2], {size:4});<br />
var g3 = board.create('point', [1, -3], {size:3});<br />
var g4 = board.create('point', [2.5, -4], {size:3});<br />
var g5 = board.create('point', [-4, 1], {size:3,name:''});<br />
<br />
var c1 = board.create('curve', [<br />
function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },<br />
function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },<br />
0,function(){ return Math.PI*7*Math.abs(g4.X());}],{<br />
strokeWidth:function(){return g5.Y()*3;},<br />
strokeOpacity:function(){return g5.Y()*0.6;}<br />
});<br />
<br />
var t = board.create('text', [function() { return g5.X()+0.2; },function() { return g5.Y()+0.25; },'X(B)=<value>X(B)</value>'], <br />
{ <br />
digits:3, <br />
fontSize:function(){return Math.abs(g5.Y())*10+1;}<br />
});<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Curves]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Hypotrochoid&diff=6044
Hypotrochoid
2013-02-21T13:43:42Z
<p>Michael: </p>
<hr />
<div><jsxgraph box="jxgbox" width="500" height="500"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});<br />
var g1 = board.create('point', [1, -1], {size:4});<br />
var g2 = board.create('point', [2.5, -2], {size:4});<br />
var g3 = board.create('point', [1, -3], {size:3});<br />
var g4 = board.create('point', [2.5, -4], {size:3});<br />
var g5 = board.create('point', [-4, 1], {size:3,name:''});<br />
<br />
var c1 = board.create('curve', [<br />
function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },<br />
function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },<br />
0,function(){ return Math.PI*7*Math.abs(g4.X());}],{<br />
strokeWidth:function(){return g5.Y()*3;},<br />
strokeOpacity:function(){return g5.Y()*0.6;}<br />
});<br />
<br />
var t = board.create('text', [function() { return g5.X()+0.2; },function() { return g5.Y()+0.25; },'\'X(B) = \' + X(B)'], <br />
{ <br />
digits:3, <br />
fontSize:function(){return Math.abs(g5.Y())*10+1;} <br />
});<br />
</jsxgraph> <br />
<br />
===The JavaScript code to produce this picture===<br />
<source lang="javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});<br />
var g1 = board.create('point', [1, -1], {size:4});<br />
var g2 = board.create('point', [2.5, -2], {size:4});<br />
var g3 = board.create('point', [1, -3], {size:3});<br />
var g4 = board.create('point', [2.5, -4], {size:3});<br />
var g5 = board.create('point', [-4, 1], {size:3,name:''});<br />
<br />
var c1 = board.create('curve', [<br />
function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },<br />
function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },<br />
0,function(){ return Math.PI*7*Math.abs(g4.X());}],{<br />
strokeWidth:function(){return g5.Y()*3;},<br />
strokeOpacity:function(){return g5.Y()*0.6;}<br />
});<br />
<br />
var t = board.create('text', [function() { return g5.X()+0.2; },function() { return g5.Y()+0.25; },'X(B)=<value>X(B)</value>'], <br />
{ <br />
digits:3, <br />
fontSize:function(){return Math.abs(g5.Y())*10+1;}<br />
});<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Curves]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=The_underlying_JavaScript_and_PHP_code&diff=6043
The underlying JavaScript and PHP code
2013-02-21T10:36:07Z
<p>Michael: </p>
<hr />
<div>Beware that in order to simplify the handling of AJAX we use the additional library [http://www.prototypejs.org/ prototype.js] in this example.<br />
<br />
=== The JavaScript code on the client ===<br />
<source lang="javascript"><br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1.15, 60, 11.15, -20], axis:true});<br />
var graph1,graph2,graph3,graph4,graph5,graph6,graph7,graph8,graph9;<br />
<br />
var x = [];<br />
var y = [];<br />
var p = [];<br />
var r1,r2,rad,phi,z1,z2;<br />
for (var i=0;i<6;i++) {<br />
x[i] = i;<br />
// Box-Muller-Method for standard normal random numbers<br />
r1 = Math.random();<br />
r2 = Math.random();<br />
rad = Math.sqrt(-2*Math.log(1-r1));<br />
phi = 2*Math.PI*r2;<br />
z1 = rad*Math.cos(phi);<br />
z2 = rad*Math.sin(phi);<br />
if(i < 5){<br />
y[i] = 10+z1*3;<br />
y[6+i] = 10+z2*3;<br />
x[6+i] = 6+i;<br />
p[i] = brd.create('point', [x[i],y[i]],{name:' ',fixed:true,size:2,face:'[]'}); <br />
p[6+i] = brd.create('point', [x[6+i],y[6+i]],{name:' ',fixed:true,size:2,face:'[]'});<br />
}else{<br />
y[i] = 10+z1*3;<br />
p[i] = brd.create('point', [x[i],y[i]],{name:' ',fixed:true,size:2,face:'[]'}); <br />
}<br />
}<br />
var hlow = [];<br />
var hup = [];<br />
var l = [];<br />
hlow[0] = brd.create('point', [x[0],0],{name:' ',visible:false}); <br />
hlow[1] = brd.create('point', [x[10],0],{name:' ',visible:false}); <br />
hlow[2] = brd.create('point', [x[8],0],{name:' ',visible:false}); <br />
hlow[3] = brd.create('point', [x[9],0],{name:' ',visible:false}); <br />
hup[0] = brd.create('point', [x[0],20],{name:' ',visible:false}); <br />
hup[1] = brd.create('point', [x[10],20],{name:' ',visible:false}); <br />
hup[2] = brd.create('point', [x[8],20],{name:' ',visible:false}); <br />
hup[3] = brd.create('point', [x[9],20],{name:' ',visible:false}); <br />
l[0] = brd.create('line', [hlow[0],hup[0]],{visible:false}); <br />
l[1] = brd.create('line', [hlow[1],hup[1]],{visible:false}); <br />
l[2] = brd.create('line', [hlow[2],hup[2]],{visible:false}); <br />
l[3] = brd.create('line', [hlow[3],hup[3]],{visible:false}); <br />
<br />
brd.removeObject(p[0]);<br />
brd.removeObject(p[10]);<br />
brd.removeObject(p[8]);<br />
brd.removeObject(p[9]);<br />
<br />
p[0] = brd.create('glider', [x[0],y[0],l[0]],{name:' ',size:4,face:'o'}); <br />
p[10] = brd.create('glider', [x[10],y[10],l[1]],{name:' ',size:4,face:'o'}); <br />
p[8] = brd.create('glider', [x[8],y[8],l[2]],{name:' ',size:4,face:'o'}); <br />
p[9] = brd.create('glider', [x[9],y[9],l[3]],{name:' ',size:4,face:'o'}); <br />
<br />
doIt();<br />
<br />
function doIt() {<br />
brd.update();<br />
// Generate a ";"-separated list<br />
var t = '';<br />
for (var i=0;i<p.length;i++) {<br />
t += p[i].Y() + ';';<br />
}<br />
new Ajax.Request('/~mkohl/rserv.php', {<br />
method:'post',<br />
parameters:'input='+escape(t),<br />
onComplete: function(transport) {<br />
if (200 == transport.status) {<br />
var t = transport.responseText;<br />
var res = t.match(/"(.*)"/gi);<br />
res = RegExp.$1;<br />
var a = res.split(";");<br />
var m = a[0]*1.0;<br />
var sd = a[1]*1.0;<br />
var med = a[2]*1.0;<br />
var mad = a[3]*1.0;<br />
var mad = a[3]*1.0;<br />
var est1 = a[4]*1.0;<br />
var est2 = a[5]*1.0;<br />
if (!graph2) { <br />
graph2 = brd.create('curve', [[x[0],x[x.length-1]],[m,m]], {strokecolor:'red'}); <br />
graph3 = brd.create('curve', [[x[0],x[x.length-1]],[m+sd,m+sd]], {strokecolor:'red',dash:2}); <br />
graph4 = brd.create('curve', [[x[0],x[x.length-1]],[m-sd,m-sd]], {strokecolor:'red',dash:2}); <br />
graph5 = brd.create('curve', [[x[0],x[x.length-1]],[med,med]], {strokecolor:'black'}); <br />
graph1 = brd.create('curve', [[x[0],x[x.length-1]],[med-mad,med-mad]], {strokecolor:'black',dash:3}); <br />
graph6 = brd.create('curve', [[x[0],x[x.length-1]],[med+mad,med+mad]], {strokecolor:'black',dash:3}); <br />
graph8 = brd.create('curve', [[x[0],x[x.length-1]],[est1,est1]], {strokecolor:'green'}); <br />
graph7 = brd.create('curve', [[x[0],x[x.length-1]],[est1-est2,est1-est2]], {strokecolor:'green',dash:4}); <br />
graph9 = brd.create('curve', [[x[0],x[x.length-1]],[est1+est2,est1+est2]], {strokecolor:'green',dash:4}); <br />
} else {<br />
graph2.dataY = [m,m];<br />
graph3.dataY = [m+sd,m+sd];<br />
graph4.dataY = [m-sd,m-sd];<br />
graph5.dataY = [med,med];<br />
graph1.dataY = [med-mad,med-mad];<br />
graph6.dataY = [med+mad,med+mad];<br />
graph8.dataY = [est1,est1];<br />
graph7.dataY = [est1-est2,est1-est2];<br />
graph9.dataY = [est1+est2,est1+est2];<br />
}<br />
<br />
$('output').innerHTML = '<b><font size="+1">Normal location and scale:</font></b><br /><br />'+ <br />
'<b>Estimates for location (true value = 10):</b><br />' +<br />
'Mean = ' + Math.round(m,2) + '<br />' +<br />
'Median = ' + Math.round(med,2) + '<br />' +<br />
'Radius-minimax estimator = ' + Math.round(est1,2) + '<br /><br />' +<br />
'<b>Estimates for scale (true value = 3):</b><br />' +<br />
'Standard deviation = ' + Math.round(sd,2) + '<br />' +<br />
'MAD = ' + Math.round(mad,2) + '<br />' + <br />
'Radius-minimax estimator = ' + Math.round(est2,2) + '<br />';<br />
brd.update();<br />
};<br />
}});<br />
}<br />
brd.addHook(doIt, 'mouseup');<br />
</source><br />
<br />
=== The PHP code of the server (rserv.php) ===<br />
<source lang="php"><br />
<?php<br />
$input = $_POST["input"];<br />
if (!get_magic_quotes_gpc()) {<br />
$input = addslashes($input);<br />
}<br />
$cmd = "/usr/bin/Rscript LokSkala.R '" . $input ."'";<br />
passthru($cmd);<br />
?><br />
</source><br />
<br />
Back to the example page: [[Analyze data with the Statistics software R]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Analyze_data_with_the_Statistics_software_R&diff=6042
Analyze data with the Statistics software R
2013-02-21T10:35:29Z
<p>Michael: </p>
<hr />
<div><h1>Normal Location and Scale</h1><br />
This litte application sends the y-coordinates of the points which are normal distributed (pseudo-)random numbers to the server.<br /> <br />
There, location and scale of the sample are estimated using the [http://www.r-project.org Statistics software R].<br /><br />
The return values are plotted and displayed.<br /><br /><br />
<b>The computed estimates are:</b><br /> <br />
* mean, standard deviation: red (non-robust!)<br /><br />
* median and MAD: black (most-robust!)<br /> <br />
* radius-minimax estimator: green (optimally robust; cf. Rieder et al. (2008))<br /><br /><br />
By changing the y-position of the four movable points you should recognize the instability (non-robustness) of mean and standard deviation in contrast to the robust estimates; e.g., move one of the four movable points to the top of the plot.<br /><br /><br />
===Online results:===<br />
<html><script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script></html><br />
<pre id='output'>Statistics:<br></pre><br />
<jsxgraph width="700" height="400"><br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-0.15, 60, 11.15, -20],axis:true});<br />
brd.suspendUpdate();<br />
var graph1,graph2,graph3,graph4,graph5,graph6,graph7,graph8,graph9;<br />
<br />
var x = [];<br />
var y = [];<br />
var p = [];<br />
var r1,r2,rad,phi,z1,z2;<br />
for (var i=0;i<6;i++) {<br />
x[i] = i;<br />
// Box-Muller-Method for standard normal random numbers<br />
r1 = Math.random();<br />
r2 = Math.random();<br />
rad = Math.sqrt(-2*Math.log(1-r1));<br />
phi = 2*Math.PI*r2;<br />
z1 = rad*Math.cos(phi);<br />
z2 = rad*Math.sin(phi);<br />
if(i < 5){<br />
y[i] = 10+z1*3;<br />
y[6+i] = 10+z2*3;<br />
x[6+i] = 6+i;<br />
p[i] = brd.createElement('point', [x[i],y[i]],{name:' ',fixed:true,size:2,face:'[]'}); <br />
p[6+i] = brd.createElement('point', [x[6+i],y[6+i]],{name:' ',fixed:true,size:2,face:'[]'});<br />
}else{<br />
y[i] = 10+z1*3;<br />
p[i] = brd.createElement('point', [x[i],y[i]],{name:' ',fixed:true,size:2,face:'[]'}); <br />
}<br />
}<br />
var hlow = [];<br />
var hup = [];<br />
var l = [];<br />
hlow[0] = brd.createElement('point', [x[0],0],{name:' ',visible:false}); <br />
hlow[1] = brd.createElement('point', [x[10],0],{name:' ',visible:false}); <br />
hlow[2] = brd.createElement('point', [x[8],0],{name:' ',visible:false}); <br />
hlow[3] = brd.createElement('point', [x[9],0],{name:' ',visible:false}); <br />
hup[0] = brd.createElement('point', [x[0],20],{name:' ',visible:false}); <br />
hup[1] = brd.createElement('point', [x[10],20],{name:' ',visible:false}); <br />
hup[2] = brd.createElement('point', [x[8],20],{name:' ',visible:false}); <br />
hup[3] = brd.createElement('point', [x[9],20],{name:' ',visible:false}); <br />
l[0] = brd.createElement('line', [hlow[0],hup[0]],{visible:false}); <br />
l[1] = brd.createElement('line', [hlow[1],hup[1]],{visible:false}); <br />
l[2] = brd.createElement('line', [hlow[2],hup[2]],{visible:false}); <br />
l[3] = brd.createElement('line', [hlow[3],hup[3]],{visible:false}); <br />
<br />
brd.removeObject(p[0]);<br />
brd.removeObject(p[10]);<br />
brd.removeObject(p[8]);<br />
brd.removeObject(p[9]);<br />
<br />
p[0] = brd.createElement('glider', [x[0],y[0],l[0]],{name:' ',size:4,face:'o'}); <br />
p[10] = brd.createElement('glider', [x[10],y[10],l[1]],{name:' ',size:4,face:'o'}); <br />
p[8] = brd.createElement('glider', [x[8],y[8],l[2]],{name:' ',size:4,face:'o'}); <br />
p[9] = brd.createElement('glider', [x[9],y[9],l[3]],{name:' ',size:4,face:'o'}); <br />
brd.unsuspendUpdate();<br />
<br />
doIt();<br />
<br />
function doIt() {<br />
brd.update();<br />
// Generate a ";"-separated list<br />
var t = '';<br />
for (var i=0;i<p.length;i++) {<br />
t += p[i].Y() + ';';<br />
}<br />
new Ajax.Request('/~alfred/jsxgraph/examples/rserv.php', {<br />
method:'post',<br />
parameters:'input='+escape(t),<br />
onComplete: function(transport) {<br />
if (200 == transport.status) {<br />
var t = transport.responseText;<br />
var res = t.match(/"(.*)"/gi);<br />
res = RegExp.$1;<br />
var a = res.split(";");<br />
var m = a[0]*1.0;<br />
var sd = a[1]*1.0;<br />
var med = a[2]*1.0;<br />
var mad = a[3]*1.0;<br />
var est1 = a[4]*1.0;<br />
var est2 = a[5]*1.0;<br />
<br />
if (!graph2) { <br />
graph2 = brd.createElement('curve', [[x[0],x[x.length-1]],[m,m]], {strokecolor:'red'}); <br />
graph3 = brd.createElement('curve', [[x[0],x[x.length-1]],[m+sd,m+sd]], {strokecolor:'red',dash:2}); <br />
graph4 = brd.createElement('curve', [[x[0],x[x.length-1]],[m-sd,m-sd]], {strokecolor:'red',dash:2}); <br />
graph5 = brd.createElement('curve', [[x[0],x[x.length-1]],[med,med]], {strokecolor:'black'}); <br />
graph1 = brd.createElement('curve', [[x[0],x[x.length-1]],[med-mad,med-mad]], {strokecolor:'black',dash:3}); <br />
graph6 = brd.createElement('curve', [[x[0],x[x.length-1]],[med+mad,med+mad]], {strokecolor:'black',dash:3}); <br />
graph8 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1,est1]], {strokecolor:'green'}); <br />
graph7 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1-est2,est1-est2]], {strokecolor:'green',dash:4}); <br />
graph9 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1+est2,est1+est2]], {strokecolor:'green',dash:4}); <br />
} else {<br />
graph2.dataY = [m,m];<br />
graph3.dataY = [m+sd,m+sd];<br />
graph4.dataY = [m-sd,m-sd];<br />
graph5.dataY = [med,med];<br />
graph1.dataY = [med-mad,med-mad];<br />
graph6.dataY = [med+mad,med+mad];<br />
graph8.dataY = [est1,est1];<br />
graph7.dataY = [est1-est2,est1-est2];<br />
graph9.dataY = [est1+est2,est1+est2];<br />
}<br />
<br />
document.getElementById('output').innerHTML = '<b><font size="+1">Normal location and scale:</font></b><br /><br />'+ <br />
'<b>Estimates for location (true value = 10):</b><br />' +<br />
'Mean = ' + Math.round(m,2) + '<br />' +<br />
'Median = ' + Math.round(med,2) + '<br />' +<br />
'Radius-minimax estimator = ' + Math.round(est1,2) + '<br /><br />' +<br />
'<b>Estimates for scale (true value = 3):</b><br />' +<br />
'Standard deviation = ' + Math.round(sd,2) + '<br />' +<br />
'MAD = ' + Math.round(mad,2) + '<br />' + <br />
'Radius-minimax estimator = ' + Math.round(est2,2) + '<br />';<br />
brd.update();<br />
};<br />
}});<br />
}<br />
brd.addHook(doIt, 'mouseup');<br />
</jsxgraph><br />
<br />
=== The underlying source code ===<br />
[[The underlying JavaScript and PHP code]]<br />
<br />
The R script can be [http://jsxgraph.uni-bayreuth.de/~alfred/jsxgraph/branches/0.70/examples/LokSkala.R downloaded here].<br />
<br />
=== References ===<br />
* ''The Costs of not Knowing the Radius'', Helmut Rieder, Matthias Kohl and Peter Ruckdeschel, Statistical Methods and Application 2008 Feb; 17(1): p.13-40; cf. also [http://www.stamats.de/RRlong.pdf] for an extended version.<br />
* ''Robust Asymptotic Statistics'', Helmut Rieder, Springer, 1994.<br />
* ''Numerical Contributions to the Asymptotic Theory of Robustness'', Matthias Kohl, PhD-Thesis, University of Bayreuth, 2005; cf. also [http://www.stamats.de/ThesisMKohl.pdf].<br />
<br />
=== External links ===<br />
* [http://www.r-project.org The R Project for statistical computing.]<br />
* [https://r-forge.r-project.org/projects/robast/ RobASt project on R-Forge]<br />
* [http://en.wikipedia.org/wiki/Robust_statistics Wikipedia on Robust Statistics]<br />
<br />
[[Category:Examples]]<br />
[[Category:Statistics]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Analyze_data_with_the_Statistics_software_R&diff=6041
Analyze data with the Statistics software R
2013-02-21T10:35:06Z
<p>Michael: </p>
<hr />
<div><h1>Normal Location and Scale</h1><br />
This litte application sends the y-coordinates of the points which are normal distributed (pseudo-)random numbers to the server.<br /> <br />
There, location and scale of the sample are estimated using the [http://www.r-project.org Statistics software R].<br /><br />
The return values are plotted and displayed.<br /><br /><br />
<b>The computed estimates are:</b><br /> <br />
* mean, standard deviation: red (non-robust!)<br /><br />
* median and MAD: black (most-robust!)<br /> <br />
* radius-minimax estimator: green (optimally robust; cf. Rieder et al. (2008))<br /><br /><br />
By changing the y-position of the four movable points you should recognize the instability (non-robustness) of mean and standard deviation in contrast to the robust estimates; e.g., move one of the four movable points to the top of the plot.<br /><br /><br />
===Online results:===<br />
<html><script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script></html><br />
<pre id='output'>Statistics:<br></pre><br />
<jsxgraph width="700" height="400"><br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-0.15, 60, 11.15, -20],axis:true});<br />
brd.suspendUpdate();<br />
var graph1,graph2,graph3,graph4,graph5,graph6,graph7,graph8,graph9;<br />
<br />
var x = [];<br />
var y = [];<br />
var p = [];<br />
var r1,r2,rad,phi,z1,z2;<br />
for (var i=0;i<6;i++) {<br />
x[i] = i;<br />
// Box-Muller-Method for standard normal random numbers<br />
r1 = Math.random();<br />
r2 = Math.random();<br />
rad = Math.sqrt(-2*Math.log(1-r1));<br />
phi = 2*Math.PI*r2;<br />
z1 = rad*Math.cos(phi);<br />
z2 = rad*Math.sin(phi);<br />
if(i < 5){<br />
y[i] = 10+z1*3;<br />
y[6+i] = 10+z2*3;<br />
x[6+i] = 6+i;<br />
p[i] = brd.createElement('point', [x[i],y[i]],{name:' ',fixed:true,size:2,face:'[]'}); <br />
p[6+i] = brd.createElement('point', [x[6+i],y[6+i]],{name:' ',fixed:true,size:2,face:'[]'});<br />
}else{<br />
y[i] = 10+z1*3;<br />
p[i] = brd.createElement('point', [x[i],y[i]],{name:' ',fixed:true,size:2,face:'[]'}); <br />
}<br />
}<br />
var hlow = [];<br />
var hup = [];<br />
var l = [];<br />
hlow[0] = brd.createElement('point', [x[0],0],{name:' ',visible:false}); <br />
hlow[1] = brd.createElement('point', [x[10],0],{name:' ',visible:false}); <br />
hlow[2] = brd.createElement('point', [x[8],0],{name:' ',visible:false}); <br />
hlow[3] = brd.createElement('point', [x[9],0],{name:' ',visible:false}); <br />
hup[0] = brd.createElement('point', [x[0],20],{name:' ',visible:false}); <br />
hup[1] = brd.createElement('point', [x[10],20],{name:' ',visible:false}); <br />
hup[2] = brd.createElement('point', [x[8],20],{name:' ',visible:false}); <br />
hup[3] = brd.createElement('point', [x[9],20],{name:' ',visible:false}); <br />
l[0] = brd.createElement('line', [hlow[0],hup[0]],{visible:false}); <br />
l[1] = brd.createElement('line', [hlow[1],hup[1]],{visible:false}); <br />
l[2] = brd.createElement('line', [hlow[2],hup[2]],{visible:false}); <br />
l[3] = brd.createElement('line', [hlow[3],hup[3]],{visible:false}); <br />
<br />
brd.removeObject(p[0]);<br />
brd.removeObject(p[10]);<br />
brd.removeObject(p[8]);<br />
brd.removeObject(p[9]);<br />
<br />
p[0] = brd.createElement('glider', [x[0],y[0],l[0]],{name:' ',size:4,face:'o'}); <br />
p[10] = brd.createElement('glider', [x[10],y[10],l[1]],{name:' ',size:4,face:'o'}); <br />
p[8] = brd.createElement('glider', [x[8],y[8],l[2]],{name:' ',size:4,face:'o'}); <br />
p[9] = brd.createElement('glider', [x[9],y[9],l[3]],{name:' ',size:4,face:'o'}); <br />
brd.unsuspendUpdate();<br />
<br />
doIt();<br />
<br />
function doIt() {<br />
brd.update();<br />
// Generate a ";"-separated list<br />
var t = '';<br />
for (var i=0;i<p.length;i++) {<br />
t += p[i].Y() + ';';<br />
}<br />
new Ajax.Request('/~alfred/jsxgraph/examples/rserv.php', {<br />
method:'post',<br />
parameters:'input='+escape(t),<br />
onComplete: function(transport) {<br />
if (200 == transport.status) {<br />
var t = transport.responseText;<br />
var res = t.match(/"(.*)"/gi);<br />
res = RegExp.$1;<br />
var a = res.split(";");<br />
var m = a[0]*1.0;<br />
var sd = a[1]*1.0;<br />
var med = a[2]*1.0;<br />
var mad = a[3]*1.0;<br />
var est1 = a[4]*1.0;<br />
var est2 = a[5]*1.0;<br />
<br />
console.log(t, res, m, sd, med, mad, est1, est2);<br />
if (!graph2) { <br />
graph2 = brd.createElement('curve', [[x[0],x[x.length-1]],[m,m]], {strokecolor:'red'}); <br />
graph3 = brd.createElement('curve', [[x[0],x[x.length-1]],[m+sd,m+sd]], {strokecolor:'red',dash:2}); <br />
graph4 = brd.createElement('curve', [[x[0],x[x.length-1]],[m-sd,m-sd]], {strokecolor:'red',dash:2}); <br />
graph5 = brd.createElement('curve', [[x[0],x[x.length-1]],[med,med]], {strokecolor:'black'}); <br />
graph1 = brd.createElement('curve', [[x[0],x[x.length-1]],[med-mad,med-mad]], {strokecolor:'black',dash:3}); <br />
graph6 = brd.createElement('curve', [[x[0],x[x.length-1]],[med+mad,med+mad]], {strokecolor:'black',dash:3}); <br />
graph8 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1,est1]], {strokecolor:'green'}); <br />
graph7 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1-est2,est1-est2]], {strokecolor:'green',dash:4}); <br />
graph9 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1+est2,est1+est2]], {strokecolor:'green',dash:4}); <br />
} else {<br />
graph2.dataY = [m,m];<br />
graph3.dataY = [m+sd,m+sd];<br />
graph4.dataY = [m-sd,m-sd];<br />
graph5.dataY = [med,med];<br />
graph1.dataY = [med-mad,med-mad];<br />
graph6.dataY = [med+mad,med+mad];<br />
graph8.dataY = [est1,est1];<br />
graph7.dataY = [est1-est2,est1-est2];<br />
graph9.dataY = [est1+est2,est1+est2];<br />
}<br />
<br />
document.getElementById('output').innerHTML = '<b><font size="+1">Normal location and scale:</font></b><br /><br />'+ <br />
'<b>Estimates for location (true value = 10):</b><br />' +<br />
'Mean = ' + Math.round(m,2) + '<br />' +<br />
'Median = ' + Math.round(med,2) + '<br />' +<br />
'Radius-minimax estimator = ' + Math.round(est1,2) + '<br /><br />' +<br />
'<b>Estimates for scale (true value = 3):</b><br />' +<br />
'Standard deviation = ' + Math.round(sd,2) + '<br />' +<br />
'MAD = ' + Math.round(mad,2) + '<br />' + <br />
'Radius-minimax estimator = ' + Math.round(est2,2) + '<br />';<br />
brd.update();<br />
};<br />
}});<br />
}<br />
brd.addHook(doIt, 'mouseup');<br />
</jsxgraph><br />
<br />
=== The underlying source code ===<br />
[[The underlying JavaScript and PHP code]]<br />
<br />
The R script can be [http://jsxgraph.uni-bayreuth.de/~alfred/jsxgraph/branches/0.70/examples/LokSkala.R downloaded here].<br />
<br />
=== References ===<br />
* ''The Costs of not Knowing the Radius'', Helmut Rieder, Matthias Kohl and Peter Ruckdeschel, Statistical Methods and Application 2008 Feb; 17(1): p.13-40; cf. also [http://www.stamats.de/RRlong.pdf] for an extended version.<br />
* ''Robust Asymptotic Statistics'', Helmut Rieder, Springer, 1994.<br />
* ''Numerical Contributions to the Asymptotic Theory of Robustness'', Matthias Kohl, PhD-Thesis, University of Bayreuth, 2005; cf. also [http://www.stamats.de/ThesisMKohl.pdf].<br />
<br />
=== External links ===<br />
* [http://www.r-project.org The R Project for statistical computing.]<br />
* [https://r-forge.r-project.org/projects/robast/ RobASt project on R-Forge]<br />
* [http://en.wikipedia.org/wiki/Robust_statistics Wikipedia on Robust Statistics]<br />
<br />
[[Category:Examples]]<br />
[[Category:Statistics]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Analyze_data_with_the_Statistics_software_R&diff=6040
Analyze data with the Statistics software R
2013-02-21T10:33:57Z
<p>Michael: </p>
<hr />
<div><h1>Normal Location and Scale</h1><br />
This litte application sends the y-coordinates of the points which are normal distributed (pseudo-)random numbers to the server.<br /> <br />
There, location and scale of the sample are estimated using the [http://www.r-project.org Statistics software R].<br /><br />
The return values are plotted and displayed.<br /><br /><br />
<b>The computed estimates are:</b><br /> <br />
* mean, standard deviation: red (non-robust!)<br /><br />
* median and MAD: black (most-robust!)<br /> <br />
* radius-minimax estimator: green (optimally robust; cf. Rieder et al. (2008))<br /><br /><br />
By changing the y-position of the four movable points you should recognize the instability (non-robustness) of mean and standard deviation in contrast to the robust estimates; e.g., move one of the four movable points to the top of the plot.<br /><br /><br />
===Online results:===<br />
<html><script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script></html><br />
<pre id='output'>Statistics:<br></pre><br />
<jsxgraph width="700" height="400"><br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-0.15, 60, 11.15, -20],axis:true});<br />
brd.suspendUpdate();<br />
var graph1,graph2,graph3,graph4,graph5,graph6,graph7,graph8,graph9;<br />
<br />
var x = [];<br />
var y = [];<br />
var p = [];<br />
var r1,r2,rad,phi,z1,z2;<br />
for (var i=0;i<6;i++) {<br />
x[i] = i;<br />
// Box-Muller-Method for standard normal random numbers<br />
r1 = Math.random();<br />
r2 = Math.random();<br />
rad = Math.sqrt(-2*Math.log(1-r1));<br />
phi = 2*Math.PI*r2;<br />
z1 = rad*Math.cos(phi);<br />
z2 = rad*Math.sin(phi);<br />
if(i < 5){<br />
y[i] = 10+z1*3;<br />
y[6+i] = 10+z2*3;<br />
x[6+i] = 6+i;<br />
p[i] = brd.createElement('point', [x[i],y[i]],{name:' ',fixed:true,size:2,face:'[]'}); <br />
p[6+i] = brd.createElement('point', [x[6+i],y[6+i]],{name:' ',fixed:true,size:2,face:'[]'});<br />
}else{<br />
y[i] = 10+z1*3;<br />
p[i] = brd.createElement('point', [x[i],y[i]],{name:' ',fixed:true,size:2,face:'[]'}); <br />
}<br />
}<br />
var hlow = [];<br />
var hup = [];<br />
var l = [];<br />
hlow[0] = brd.createElement('point', [x[0],0],{name:' ',visible:false}); <br />
hlow[1] = brd.createElement('point', [x[10],0],{name:' ',visible:false}); <br />
hlow[2] = brd.createElement('point', [x[8],0],{name:' ',visible:false}); <br />
hlow[3] = brd.createElement('point', [x[9],0],{name:' ',visible:false}); <br />
hup[0] = brd.createElement('point', [x[0],20],{name:' ',visible:false}); <br />
hup[1] = brd.createElement('point', [x[10],20],{name:' ',visible:false}); <br />
hup[2] = brd.createElement('point', [x[8],20],{name:' ',visible:false}); <br />
hup[3] = brd.createElement('point', [x[9],20],{name:' ',visible:false}); <br />
l[0] = brd.createElement('line', [hlow[0],hup[0]],{visible:false}); <br />
l[1] = brd.createElement('line', [hlow[1],hup[1]],{visible:false}); <br />
l[2] = brd.createElement('line', [hlow[2],hup[2]],{visible:false}); <br />
l[3] = brd.createElement('line', [hlow[3],hup[3]],{visible:false}); <br />
<br />
brd.removeObject(p[0]);<br />
brd.removeObject(p[10]);<br />
brd.removeObject(p[8]);<br />
brd.removeObject(p[9]);<br />
<br />
p[0] = brd.createElement('glider', [x[0],y[0],l[0]],{name:' ',size:4,face:'o'}); <br />
p[10] = brd.createElement('glider', [x[10],y[10],l[1]],{name:' ',size:4,face:'o'}); <br />
p[8] = brd.createElement('glider', [x[8],y[8],l[2]],{name:' ',size:4,face:'o'}); <br />
p[9] = brd.createElement('glider', [x[9],y[9],l[3]],{name:' ',size:4,face:'o'}); <br />
brd.unsuspendUpdate();<br />
<br />
doIt();<br />
<br />
function doIt() {<br />
brd.update();<br />
// Generate a ";"-separated list<br />
var t = '';<br />
for (var i=0;i<p.length;i++) {<br />
t += p[i].Y() + ';';<br />
}<br />
new Ajax.Request('/~alfred/jsxgraph/examples/rserv.php', {<br />
method:'post',<br />
parameters:'input='+escape(t),<br />
onComplete: function(transport) {<br />
if (200 == transport.status) {<br />
var t = transport.responseText;<br />
var res = t.match(/"(.*)"/gi);<br />
res = RegExp.$1;<br />
var a = res.split(";");<br />
var m = a[0]*1.0;<br />
var sd = a[1]*1.0;<br />
var med = a[2]*1.0;<br />
var mad = a[3]*1.0;<br />
var est1 = a[4]*1.0;<br />
var est2 = a[5]*1.0;<br />
<br />
console.log(t, res, m, sd, med, mad, est1, est2);<br />
if (!graph2) { <br />
graph2 = brd.createElement('curve', [[x[0],x[x.length-1]],[m,m]], {strokecolor:'red'}); <br />
graph3 = brd.createElement('curve', [[x[0],x[x.length-1]],[m+sd,m+sd]], {strokecolor:'red',dash:2}); <br />
graph4 = brd.createElement('curve', [[x[0],x[x.length-1]],[m-sd,m-sd]], {strokecolor:'red',dash:2}); <br />
graph5 = brd.createElement('curve', [[x[0],x[x.length-1]],[med,med]], {strokecolor:'black'}); <br />
graph1 = brd.createElement('curve', [[x[0],x[x.length-1]],[med-mad,med-mad]], {strokecolor:'black',dash:3}); <br />
graph6 = brd.createElement('curve', [[x[0],x[x.length-1]],[med+mad,med+mad]], {strokecolor:'black',dash:3}); <br />
graph8 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1,est1]], {strokecolor:'green'}); <br />
graph7 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1-est2,est1-est2]], {strokecolor:'green',dash:4}); <br />
graph9 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1+est2,est1+est2]], {strokecolor:'green',dash:4}); <br />
} else {<br />
graph2.dataY = [m,m];<br />
graph3.dataY = [m+sd,m+sd];<br />
graph4.dataY = [m-sd,m-sd];<br />
graph5.dataY = [med,med];<br />
graph1.dataY = [med-mad,med-mad];<br />
graph6.dataY = [med+mad,med+mad];<br />
graph8.dataY = [est1,est1];<br />
graph7.dataY = [est1-est2,est1-est2];<br />
graph9.dataY = [est1+est2,est1+est2];<br />
}<br />
<br />
$('output').innerHTML = '<b><font size="+1">Normal location and scale:</font></b><br /><br />'+ <br />
'<b>Estimates for location (true value = 10):</b><br />' +<br />
'Mean = ' + brd.round(m,2) + '<br />' +<br />
'Median = ' + brd.round(med,2) + '<br />' +<br />
'Radius-minimax estimator = ' + brd.round(est1,2) + '<br /><br />' +<br />
'<b>Estimates for scale (true value = 3):</b><br />' +<br />
'Standard deviation = ' + brd.round(sd,2) + '<br />' +<br />
'MAD = ' + brd.round(mad,2) + '<br />' + <br />
'Radius-minimax estimator = ' + brd.round(est2,2) + '<br />';<br />
brd.update();<br />
};<br />
}});<br />
}<br />
brd.addHook(doIt, 'mouseup');<br />
</jsxgraph><br />
<br />
=== The underlying source code ===<br />
[[The underlying JavaScript and PHP code]]<br />
<br />
The R script can be [http://jsxgraph.uni-bayreuth.de/~alfred/jsxgraph/branches/0.70/examples/LokSkala.R downloaded here].<br />
<br />
=== References ===<br />
* ''The Costs of not Knowing the Radius'', Helmut Rieder, Matthias Kohl and Peter Ruckdeschel, Statistical Methods and Application 2008 Feb; 17(1): p.13-40; cf. also [http://www.stamats.de/RRlong.pdf] for an extended version.<br />
* ''Robust Asymptotic Statistics'', Helmut Rieder, Springer, 1994.<br />
* ''Numerical Contributions to the Asymptotic Theory of Robustness'', Matthias Kohl, PhD-Thesis, University of Bayreuth, 2005; cf. also [http://www.stamats.de/ThesisMKohl.pdf].<br />
<br />
=== External links ===<br />
* [http://www.r-project.org The R Project for statistical computing.]<br />
* [https://r-forge.r-project.org/projects/robast/ RobASt project on R-Forge]<br />
* [http://en.wikipedia.org/wiki/Robust_statistics Wikipedia on Robust Statistics]<br />
<br />
[[Category:Examples]]<br />
[[Category:Statistics]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Analyze_data_with_the_Statistics_software_R&diff=6039
Analyze data with the Statistics software R
2013-02-21T10:32:56Z
<p>Michael: </p>
<hr />
<div><h1>Normal Location and Scale</h1><br />
This litte application sends the y-coordinates of the points which are normal distributed (pseudo-)random numbers to the server.<br /> <br />
There, location and scale of the sample are estimated using the [http://www.r-project.org Statistics software R].<br /><br />
The return values are plotted and displayed.<br /><br /><br />
<b>The computed estimates are:</b><br /> <br />
* mean, standard deviation: red (non-robust!)<br /><br />
* median and MAD: black (most-robust!)<br /> <br />
* radius-minimax estimator: green (optimally robust; cf. Rieder et al. (2008))<br /><br /><br />
By changing the y-position of the four movable points you should recognize the instability (non-robustness) of mean and standard deviation in contrast to the robust estimates; e.g., move one of the four movable points to the top of the plot.<br /><br /><br />
===Online results:===<br />
<html><script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script></html><br />
<pre id='output'>Statistics:<br></pre><br />
<jsxgraph width="700" height="400"><br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-0.15, 60, 11.15, -20],axis:true});<br />
brd.suspendUpdate();<br />
var graph1,graph2,graph3,graph4,graph5,graph6,graph7,graph8,graph9;<br />
<br />
var x = [];<br />
var y = [];<br />
var p = [];<br />
var r1,r2,rad,phi,z1,z2;<br />
for (var i=0;i<6;i++) {<br />
x[i] = i;<br />
// Box-Muller-Method for standard normal random numbers<br />
r1 = Math.random();<br />
r2 = Math.random();<br />
rad = Math.sqrt(-2*Math.log(1-r1));<br />
phi = 2*Math.PI*r2;<br />
z1 = rad*Math.cos(phi);<br />
z2 = rad*Math.sin(phi);<br />
if(i < 5){<br />
y[i] = 10+z1*3;<br />
y[6+i] = 10+z2*3;<br />
x[6+i] = 6+i;<br />
p[i] = brd.createElement('point', [x[i],y[i]],{name:' ',fixed:true,size:2,face:'[]'}); <br />
p[6+i] = brd.createElement('point', [x[6+i],y[6+i]],{name:' ',fixed:true,size:2,face:'[]'});<br />
}else{<br />
y[i] = 10+z1*3;<br />
p[i] = brd.createElement('point', [x[i],y[i]],{name:' ',fixed:true,size:2,face:'[]'}); <br />
}<br />
}<br />
var hlow = [];<br />
var hup = [];<br />
var l = [];<br />
hlow[0] = brd.createElement('point', [x[0],0],{name:' ',visible:false}); <br />
hlow[1] = brd.createElement('point', [x[10],0],{name:' ',visible:false}); <br />
hlow[2] = brd.createElement('point', [x[8],0],{name:' ',visible:false}); <br />
hlow[3] = brd.createElement('point', [x[9],0],{name:' ',visible:false}); <br />
hup[0] = brd.createElement('point', [x[0],20],{name:' ',visible:false}); <br />
hup[1] = brd.createElement('point', [x[10],20],{name:' ',visible:false}); <br />
hup[2] = brd.createElement('point', [x[8],20],{name:' ',visible:false}); <br />
hup[3] = brd.createElement('point', [x[9],20],{name:' ',visible:false}); <br />
l[0] = brd.createElement('line', [hlow[0],hup[0]],{visible:false}); <br />
l[1] = brd.createElement('line', [hlow[1],hup[1]],{visible:false}); <br />
l[2] = brd.createElement('line', [hlow[2],hup[2]],{visible:false}); <br />
l[3] = brd.createElement('line', [hlow[3],hup[3]],{visible:false}); <br />
<br />
brd.removeObject(p[0]);<br />
brd.removeObject(p[10]);<br />
brd.removeObject(p[8]);<br />
brd.removeObject(p[9]);<br />
<br />
p[0] = brd.createElement('glider', [x[0],y[0],l[0]],{name:' ',size:4,face:'o'}); <br />
p[10] = brd.createElement('glider', [x[10],y[10],l[1]],{name:' ',size:4,face:'o'}); <br />
p[8] = brd.createElement('glider', [x[8],y[8],l[2]],{name:' ',size:4,face:'o'}); <br />
p[9] = brd.createElement('glider', [x[9],y[9],l[3]],{name:' ',size:4,face:'o'}); <br />
brd.unsuspendUpdate();<br />
<br />
doIt();<br />
<br />
function doIt() {<br />
brd.update();<br />
// Generate a ";"-separated list<br />
var t = '';<br />
for (var i=0;i<p.length;i++) {<br />
t += p[i].Y() + ';';<br />
}<br />
new Ajax.Request('/~alfred/jsxgraph/examples/rserv.php', {<br />
method:'post',<br />
parameters:'input='+escape(t),<br />
onComplete: function(transport) {<br />
if (200 == transport.status) {<br />
var t = transport.responseText;<br />
var res = t.match(/"(.*)"/gi);<br />
res = RegExp.$1;<br />
var a = res.split(";");<br />
var m = a[0]*1.0;<br />
var sd = a[1]*1.0;<br />
var med = a[2]*1.0;<br />
var mad = a[3]*1.0;<br />
var mad = a[3]*1.0;<br />
var est1 = a[4]*1.0;<br />
var est2 = a[5]*1.0;<br />
<br />
console.log(t);<br />
if (!graph2) { <br />
graph2 = brd.createElement('curve', [[x[0],x[x.length-1]],[m,m]], {strokecolor:'red'}); <br />
graph3 = brd.createElement('curve', [[x[0],x[x.length-1]],[m+sd,m+sd]], {strokecolor:'red',dash:2}); <br />
graph4 = brd.createElement('curve', [[x[0],x[x.length-1]],[m-sd,m-sd]], {strokecolor:'red',dash:2}); <br />
graph5 = brd.createElement('curve', [[x[0],x[x.length-1]],[med,med]], {strokecolor:'black'}); <br />
graph1 = brd.createElement('curve', [[x[0],x[x.length-1]],[med-mad,med-mad]], {strokecolor:'black',dash:3}); <br />
graph6 = brd.createElement('curve', [[x[0],x[x.length-1]],[med+mad,med+mad]], {strokecolor:'black',dash:3}); <br />
graph8 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1,est1]], {strokecolor:'green'}); <br />
graph7 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1-est2,est1-est2]], {strokecolor:'green',dash:4}); <br />
graph9 = brd.createElement('curve', [[x[0],x[x.length-1]],[est1+est2,est1+est2]], {strokecolor:'green',dash:4}); <br />
} else {<br />
graph2.dataY = [m,m];<br />
graph3.dataY = [m+sd,m+sd];<br />
graph4.dataY = [m-sd,m-sd];<br />
graph5.dataY = [med,med];<br />
graph1.dataY = [med-mad,med-mad];<br />
graph6.dataY = [med+mad,med+mad];<br />
graph8.dataY = [est1,est1];<br />
graph7.dataY = [est1-est2,est1-est2];<br />
graph9.dataY = [est1+est2,est1+est2];<br />
}<br />
<br />
$('output').innerHTML = '<b><font size="+1">Normal location and scale:</font></b><br /><br />'+ <br />
'<b>Estimates for location (true value = 10):</b><br />' +<br />
'Mean = ' + brd.round(m,2) + '<br />' +<br />
'Median = ' + brd.round(med,2) + '<br />' +<br />
'Radius-minimax estimator = ' + brd.round(est1,2) + '<br /><br />' +<br />
'<b>Estimates for scale (true value = 3):</b><br />' +<br />
'Standard deviation = ' + brd.round(sd,2) + '<br />' +<br />
'MAD = ' + brd.round(mad,2) + '<br />' + <br />
'Radius-minimax estimator = ' + brd.round(est2,2) + '<br />';<br />
brd.update();<br />
};<br />
}});<br />
}<br />
brd.addHook(doIt, 'mouseup');<br />
</jsxgraph><br />
<br />
=== The underlying source code ===<br />
[[The underlying JavaScript and PHP code]]<br />
<br />
The R script can be [http://jsxgraph.uni-bayreuth.de/~alfred/jsxgraph/branches/0.70/examples/LokSkala.R downloaded here].<br />
<br />
=== References ===<br />
* ''The Costs of not Knowing the Radius'', Helmut Rieder, Matthias Kohl and Peter Ruckdeschel, Statistical Methods and Application 2008 Feb; 17(1): p.13-40; cf. also [http://www.stamats.de/RRlong.pdf] for an extended version.<br />
* ''Robust Asymptotic Statistics'', Helmut Rieder, Springer, 1994.<br />
* ''Numerical Contributions to the Asymptotic Theory of Robustness'', Matthias Kohl, PhD-Thesis, University of Bayreuth, 2005; cf. also [http://www.stamats.de/ThesisMKohl.pdf].<br />
<br />
=== External links ===<br />
* [http://www.r-project.org The R Project for statistical computing.]<br />
* [https://r-forge.r-project.org/projects/robast/ RobASt project on R-Forge]<br />
* [http://en.wikipedia.org/wiki/Robust_statistics Wikipedia on Robust Statistics]<br />
<br />
[[Category:Examples]]<br />
[[Category:Statistics]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Point_%27fixed%27_in_one_direction&diff=6038
Point 'fixed' in one direction
2013-02-21T10:09:55Z
<p>Michael: </p>
<hr />
<div>''A'' and ''B'' are free points. Whenever the board is updated, e.g.<br />
after a drag event, the x-coordinate of ''A'' is set to 1 and<br />
the y-coordinate of ''B'' is set to 1. Therefore, ''A'' moves <br />
on the vertical line through x=1, ''B'' moves on the horizontal line through y=1.<br />
<jsxgraph width="600" height="600"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,boundingbox:[-1,2,2,-1]});<br />
<br />
var A = brd.create('point', [1,0]);<br />
var B = brd.create('point', [0,1]);<br />
<br />
brd.on('move', function(){<br />
A.moveTo([1, A.Y()]);<br />
B.moveTo([B.X(), 1]);<br />
});<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<source lang="javascript"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,boundingbox:[-1,2,2,-1]});<br />
<br />
var A = brd.create('point', [1,0]);<br />
var B = brd.create('point', [0,1]);<br />
<br />
brd.on('move', function(){<br />
A.moveTo([1, A.Y()]);<br />
B.moveTo([B.X(), 1]);<br />
});<br />
</source><br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Point_%27fixed%27_in_one_direction&diff=6036
Point 'fixed' in one direction
2013-02-21T09:26:11Z
<p>Michael: </p>
<hr />
<div>''A'' and ''B'' are free points. Whenever the board is updated, e.g.<br />
after a drag event, the x-coordinate of ''A'' is set to 1 and<br />
the y-coordinate of ''B'' is set to 1. Therefore, ''A'' moves <br />
on the vertical line through x=1, ''B'' moves on the horizontal line through y=1.<br />
<jsxgraph width="600" height="600"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,boundingbox:[-1,2,2,-1]});<br />
<br />
var A = brd.create('point', [1,0]);<br />
var B = brd.create('point', [0,1]);<br />
<br />
brd.on('update', function(){<br />
A.moveTo([1, A.Y()]);<br />
B.moveTo([B.X(), 1]);<br />
});<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<source lang="javascript"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,boundingbox:[-1,2,2,-1]});<br />
<br />
var A = brd.create('point', [1,0]);<br />
var B = brd.create('point', [0,1]);<br />
<br />
brd.on('move', function(){<br />
A.moveTo([1, A.Y()]);<br />
B.moveTo([B.X(), 1]);<br />
});<br />
</source><br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Charts_from_HTML_tables_-_tutorial&diff=6035
Charts from HTML tables - tutorial
2013-02-21T08:54:47Z
<p>Michael: </p>
<hr />
<div>JSXGraph is able to read data from HTML tables and display charts. Here it is explained how to do it.<br />
First, there is an HTML table showing the results of the German Bundestag elections for some parties from 1949 to 2009.<br />
<html><br />
<table id="mytable" style="border: 1px solid gray;"><br />
<tr><br />
<td>Wahljahr</td><br />
<td>1949</td><br />
<td>1953</td><br />
<td>1957</td><br />
<td>1961</td><br />
<td>1965</td><br />
<td>1969</td><br />
<td>1972</td><br />
<td>1976</td><br />
<td>1980</td><br />
<td>1983</td><br />
<td>1987</td><br />
<td>1990</td><br />
<td>1994</td><br />
<td>1998</td><br />
<td>2002</td><br />
<td>2005</td><br />
<td>2009</td><br />
</tr><br />
<tr><br />
<td>CDU</td><br />
<td>25.2</td><br />
<td>36.4</td><br />
<td>39.7</td><br />
<td>35.8</td><br />
<td>39.3</td><br />
<td>36.6</td><br />
<td>35.2</td> <br />
<td>38.0</td><br />
<td>34.2</td><br />
<td>38.2</td><br />
<td>34.5</td><br />
<td>36.7</td><br />
<td>34.2</td><br />
<td>28.4</td><br />
<td>29.5</td><br />
<td>27.8</td><br />
<td>27.3</td> <br />
</tr><br />
<tr><br />
<td>CSU</td><br />
<td>5.8</td><br />
<td>8.8</td><br />
<td>10.5</td><br />
<td>9.6</td><br />
<td>9.6</td><br />
<td>9.5</td><br />
<td>9.7</td> <br />
<td>10.6</td><br />
<td>10.3</td><br />
<td>10.6</td><br />
<td>9.8</td><br />
<td>7.1</td><br />
<td>7.3</td><br />
<td>6.7</td><br />
<td>9.0</td><br />
<td>7.4</td><br />
<td>6.5</td> <br />
</tr><br />
<tr><br />
<td>SPD</td><br />
<td>29.2</td><br />
<td>28.8</td><br />
<td>31.8</td><br />
<td>36.2</td><br />
<td>39.3</td><br />
<td>42.7</td><br />
<td>45.8</td> <br />
<td>42.6</td><br />
<td>42.9</td><br />
<td>38.2</td><br />
<td>37.0</td><br />
<td>33.5</td><br />
<td>36.4</td><br />
<td>40.9</td><br />
<td>38.5</td><br />
<td>34.2</td><br />
<td>23.0</td><br />
</tr><br />
<tr><br />
<td>FDP</td><br />
<td>11.9</td><br />
<td>9.5</td><br />
<td>7.7</td><br />
<td>12.8</td><br />
<td>9.5</td><br />
<td>5.8</td><br />
<td>8.4</td><br />
<td>7.9</td><br />
<td>10.6</td><br />
<td>7.0</td><br />
<td>9.1</td><br />
<td>11.0</td><br />
<td>6.9</td><br />
<td>6.2</td><br />
<td>7.4</td><br />
<td>9.8</td><br />
<td>14.6</td><br />
</tr><br />
<tr><br />
<td>B&uuml;ndnis 90/Die Gr&uuml;nen</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td> <br />
<td>-</td><br />
<td>1.5</td><br />
<td>5.6</td><br />
<td>8.3</td><br />
<td>5</td><br />
<td>7.3</td><br />
<td>6.7</td><br />
<td>8.6</td><br />
<td>8.1</td><br />
<td>10.7</td><br />
</tr><br />
</table><br />
</html><br />
<br />
Then, with some keystrokes the JSXGraph chart from this tables is created.<br />
<jsxgraph width="600" height="450"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),<br />
colors = ['black', '#333333', 'red', 'yellow', 'green'],<br />
years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],<br />
chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line', <br />
withHeaders: true, colorArray: colors, strokeColor: colors, <br />
fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});<br />
<br />
brd.highlightInfobox = function(x,y,el) {<br />
this.infobox.setText('<span style="color:black;font-weight:bold">' + years[Math.round(x)-1] + ': ' + y + ' %</span>');<br />
this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';<br />
this.infobox.rendNode.style.padding = '5px';<br />
this.infobox.rendNode.style.backgroundColor = 'white';<br />
}<br />
</jsxgraph><br />
<br />
===The code to produce this page===<br />
<source lang="javascript"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),<br />
colors = ['black', '#333333', 'red', 'yellow', 'green'],<br />
years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],<br />
chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line', <br />
withHeaders: true, colorArray: colors, strokeColor: colors, <br />
fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors}),<br />
<br />
<br />
brd.highlightInfobox = function(x,y,el) {<br />
this.infobox.setText('<span style="color:black;font-weight:bold">' + years[Math.round(x)-1] + ': ' + y + ' %</span>');<br />
this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';<br />
this.infobox.rendNode.style.padding = '5px';<br />
this.infobox.rendNode.style.backgroundColor = 'white';<br />
}<br />
</source><br />
<br />
The HTML table ''mytable'' is generated by this code:<br />
<source lang="html4strict"><br />
<table id="mytable" style="border: 1px solid gray;"><br />
<tr><br />
<td>Wahljahr</td><br />
<td>1949</td><br />
<td>1953</td><br />
<td>1957</td><br />
<td>1961</td><br />
<td>1965</td><br />
<td>1969</td><br />
<td>1972</td><br />
<td>1976</td><br />
<td>1980</td><br />
<td>1983</td><br />
<td>1987</td><br />
<td>1990</td><br />
<td>1994</td><br />
<td>1998</td><br />
<td>2002</td><br />
<td>2005</td><br />
<td>2009</td><br />
</tr><br />
<tr><br />
<td>CDU</td><br />
<td>25.2</td><br />
<td>36.4</td><br />
<td>39.7</td><br />
<td>35.8</td><br />
<td>39.3</td><br />
<td>36.6</td><br />
<td>35.2</td> <br />
<td>38.0</td><br />
<td>34.2</td><br />
<td>38.2</td><br />
<td>34.5</td><br />
<td>36.7</td><br />
<td>34.2</td><br />
<td>28.4</td><br />
<td>29.5</td><br />
<td>27.8</td><br />
<td>27.3</td> <br />
</tr><br />
<tr><br />
<td>CSU</td><br />
<td>5.8</td><br />
<td>8.8</td><br />
<td>10.5</td><br />
<td>9.6</td><br />
<td>9.6</td><br />
<td>9.5</td><br />
<td>9.7</td> <br />
<td>10.6</td><br />
<td>10.3</td><br />
<td>10.6</td><br />
<td>9.8</td><br />
<td>7.1</td><br />
<td>7.3</td><br />
<td>6.7</td><br />
<td>9.0</td><br />
<td>7.4</td><br />
<td>6.5</td> <br />
</tr><br />
<tr><br />
<td>SPD</td><br />
<td>29.2</td><br />
<td>28.8</td><br />
<td>31.8</td><br />
<td>36.2</td><br />
<td>39.3</td><br />
<td>42.7</td><br />
<td>45.8</td> <br />
<td>42.6</td><br />
<td>42.9</td><br />
<td>38.2</td><br />
<td>37.0</td><br />
<td>33.5</td><br />
<td>36.4</td><br />
<td>40.9</td><br />
<td>38.5</td><br />
<td>34.2</td><br />
<td>23.0</td><br />
</tr><br />
<tr><br />
<td>FDP</td><br />
<td>11.9</td><br />
<td>9.5</td><br />
<td>7.7</td><br />
<td>12.8</td><br />
<td>9.5</td><br />
<td>5.8</td><br />
<td>8.4</td><br />
<td>7.9</td><br />
<td>10.6</td><br />
<td>7.0</td><br />
<td>9.1</td><br />
<td>11.0</td><br />
<td>6.9</td><br />
<td>6.2</td><br />
<td>7.4</td><br />
<td>9.8</td><br />
<td>14.6</td><br />
</tr><br />
<tr><br />
<td>B&uuml;ndnis 90/Die Gr&uuml;nen</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td> <br />
<td>-</td><br />
<td>1.5</td><br />
<td>5.6</td><br />
<td>8.3</td><br />
<td>5</td><br />
<td>7.3</td><br />
<td>6.7</td><br />
<td>8.6</td><br />
<td>8.1</td><br />
<td>10.7</td><br />
</tr><br />
</table><br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Charts]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Charts_from_HTML_tables_-_tutorial&diff=6034
Charts from HTML tables - tutorial
2013-02-21T08:54:23Z
<p>Michael: </p>
<hr />
<div>JSXGraph is able to read data from HTML tables and display charts. Here it is explained how to do it.<br />
First, there is an HTML table showing the results of the German Bundestag elections for some parties from 1949 to 2009.<br />
<html><br />
<table id="mytable" style="border: 1px solid gray;"><br />
<tr><br />
<td>Wahljahr</td><br />
<td>1949</td><br />
<td>1953</td><br />
<td>1957</td><br />
<td>1961</td><br />
<td>1965</td><br />
<td>1969</td><br />
<td>1972</td><br />
<td>1976</td><br />
<td>1980</td><br />
<td>1983</td><br />
<td>1987</td><br />
<td>1990</td><br />
<td>1994</td><br />
<td>1998</td><br />
<td>2002</td><br />
<td>2005</td><br />
<td>2009</td><br />
</tr><br />
<tr><br />
<td>CDU</td><br />
<td>25.2</td><br />
<td>36.4</td><br />
<td>39.7</td><br />
<td>35.8</td><br />
<td>39.3</td><br />
<td>36.6</td><br />
<td>35.2</td> <br />
<td>38.0</td><br />
<td>34.2</td><br />
<td>38.2</td><br />
<td>34.5</td><br />
<td>36.7</td><br />
<td>34.2</td><br />
<td>28.4</td><br />
<td>29.5</td><br />
<td>27.8</td><br />
<td>27.3</td> <br />
</tr><br />
<tr><br />
<td>CSU</td><br />
<td>5.8</td><br />
<td>8.8</td><br />
<td>10.5</td><br />
<td>9.6</td><br />
<td>9.6</td><br />
<td>9.5</td><br />
<td>9.7</td> <br />
<td>10.6</td><br />
<td>10.3</td><br />
<td>10.6</td><br />
<td>9.8</td><br />
<td>7.1</td><br />
<td>7.3</td><br />
<td>6.7</td><br />
<td>9.0</td><br />
<td>7.4</td><br />
<td>6.5</td> <br />
</tr><br />
<tr><br />
<td>SPD</td><br />
<td>29.2</td><br />
<td>28.8</td><br />
<td>31.8</td><br />
<td>36.2</td><br />
<td>39.3</td><br />
<td>42.7</td><br />
<td>45.8</td> <br />
<td>42.6</td><br />
<td>42.9</td><br />
<td>38.2</td><br />
<td>37.0</td><br />
<td>33.5</td><br />
<td>36.4</td><br />
<td>40.9</td><br />
<td>38.5</td><br />
<td>34.2</td><br />
<td>23.0</td><br />
</tr><br />
<tr><br />
<td>FDP</td><br />
<td>11.9</td><br />
<td>9.5</td><br />
<td>7.7</td><br />
<td>12.8</td><br />
<td>9.5</td><br />
<td>5.8</td><br />
<td>8.4</td><br />
<td>7.9</td><br />
<td>10.6</td><br />
<td>7.0</td><br />
<td>9.1</td><br />
<td>11.0</td><br />
<td>6.9</td><br />
<td>6.2</td><br />
<td>7.4</td><br />
<td>9.8</td><br />
<td>14.6</td><br />
</tr><br />
<tr><br />
<td>B&uuml;ndnis 90/Die Gr&uuml;nen</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td> <br />
<td>-</td><br />
<td>1.5</td><br />
<td>5.6</td><br />
<td>8.3</td><br />
<td>5</td><br />
<td>7.3</td><br />
<td>6.7</td><br />
<td>8.6</td><br />
<td>8.1</td><br />
<td>10.7</td><br />
</tr><br />
</table><br />
</html><br />
<br />
Then, with some keystrokes the JSXGraph chart from this tables is created.<br />
<jsxgraph width="600" height="450"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),<br />
colors = ['black', '#333333', 'red', 'yellow', 'green'],<br />
years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],<br />
chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line', <br />
withHeaders: false, colorArray: colors, strokeColor: colors, <br />
fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors});<br />
<br />
brd.defaultAxes.x.defaultTicks.labels[9].setText("1965");<br />
brd.defaultAxes.x.defaultTicks.labels[9].updateRenderer();<br />
brd.defaultAxes.x.defaultTicks.labels[14].setText("1983");<br />
brd.defaultAxes.x.defaultTicks.labels[14].updateRenderer();<br />
brd.defaultAxes.x.defaultTicks.labels[19].setText("2002");<br />
brd.defaultAxes.x.defaultTicks.labels[19].updateRenderer();<br />
<br />
brd.highlightInfobox = function(x,y,el) {<br />
this.infobox.setText('<span style="color:black;font-weight:bold">' + years[Math.round(x)-1] + ': ' + y + ' %</span>');<br />
this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';<br />
this.infobox.rendNode.style.padding = '5px';<br />
this.infobox.rendNode.style.backgroundColor = 'white';<br />
}<br />
</jsxgraph><br />
<br />
===The code to produce this page===<br />
<source lang="javascript"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 50, 18, -5], axis: true, grid: false}),<br />
colors = ['black', '#333333', 'red', 'yellow', 'green'],<br />
years = [1949, 1953, 1957, 1961, 1965, 1969, 1972, 1976, 1980, 1983, 1987, 1990, 1994, 1998, 2002, 2005, 2009],<br />
chart = brd.create('chart', ['mytable'], {chartStyle: 'point,line', <br />
withHeaders: true, colorArray: colors, strokeColor: colors, <br />
fillColor: colors, highlightFillColor: colors, highlightStrokeColor: colors}),<br />
<br />
<br />
brd.highlightInfobox = function(x,y,el) {<br />
this.infobox.setText('<span style="color:black;font-weight:bold">' + years[Math.round(x)-1] + ': ' + y + ' %</span>');<br />
this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';<br />
this.infobox.rendNode.style.padding = '5px';<br />
this.infobox.rendNode.style.backgroundColor = 'white';<br />
}<br />
</source><br />
<br />
The HTML table ''mytable'' is generated by this code:<br />
<source lang="html4strict"><br />
<table id="mytable" style="border: 1px solid gray;"><br />
<tr><br />
<td>Wahljahr</td><br />
<td>1949</td><br />
<td>1953</td><br />
<td>1957</td><br />
<td>1961</td><br />
<td>1965</td><br />
<td>1969</td><br />
<td>1972</td><br />
<td>1976</td><br />
<td>1980</td><br />
<td>1983</td><br />
<td>1987</td><br />
<td>1990</td><br />
<td>1994</td><br />
<td>1998</td><br />
<td>2002</td><br />
<td>2005</td><br />
<td>2009</td><br />
</tr><br />
<tr><br />
<td>CDU</td><br />
<td>25.2</td><br />
<td>36.4</td><br />
<td>39.7</td><br />
<td>35.8</td><br />
<td>39.3</td><br />
<td>36.6</td><br />
<td>35.2</td> <br />
<td>38.0</td><br />
<td>34.2</td><br />
<td>38.2</td><br />
<td>34.5</td><br />
<td>36.7</td><br />
<td>34.2</td><br />
<td>28.4</td><br />
<td>29.5</td><br />
<td>27.8</td><br />
<td>27.3</td> <br />
</tr><br />
<tr><br />
<td>CSU</td><br />
<td>5.8</td><br />
<td>8.8</td><br />
<td>10.5</td><br />
<td>9.6</td><br />
<td>9.6</td><br />
<td>9.5</td><br />
<td>9.7</td> <br />
<td>10.6</td><br />
<td>10.3</td><br />
<td>10.6</td><br />
<td>9.8</td><br />
<td>7.1</td><br />
<td>7.3</td><br />
<td>6.7</td><br />
<td>9.0</td><br />
<td>7.4</td><br />
<td>6.5</td> <br />
</tr><br />
<tr><br />
<td>SPD</td><br />
<td>29.2</td><br />
<td>28.8</td><br />
<td>31.8</td><br />
<td>36.2</td><br />
<td>39.3</td><br />
<td>42.7</td><br />
<td>45.8</td> <br />
<td>42.6</td><br />
<td>42.9</td><br />
<td>38.2</td><br />
<td>37.0</td><br />
<td>33.5</td><br />
<td>36.4</td><br />
<td>40.9</td><br />
<td>38.5</td><br />
<td>34.2</td><br />
<td>23.0</td><br />
</tr><br />
<tr><br />
<td>FDP</td><br />
<td>11.9</td><br />
<td>9.5</td><br />
<td>7.7</td><br />
<td>12.8</td><br />
<td>9.5</td><br />
<td>5.8</td><br />
<td>8.4</td><br />
<td>7.9</td><br />
<td>10.6</td><br />
<td>7.0</td><br />
<td>9.1</td><br />
<td>11.0</td><br />
<td>6.9</td><br />
<td>6.2</td><br />
<td>7.4</td><br />
<td>9.8</td><br />
<td>14.6</td><br />
</tr><br />
<tr><br />
<td>B&uuml;ndnis 90/Die Gr&uuml;nen</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td><br />
<td>-</td> <br />
<td>-</td><br />
<td>1.5</td><br />
<td>5.6</td><br />
<td>8.3</td><br />
<td>5</td><br />
<td>7.3</td><br />
<td>6.7</td><br />
<td>8.6</td><br />
<td>8.1</td><br />
<td>10.7</td><br />
</tr><br />
</table><br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Charts]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Change_Equation_of_a_Graph&diff=6033
Change Equation of a Graph
2013-02-21T08:40:31Z
<p>Michael: </p>
<hr />
<div>This example shows how you can change the equation of a graph without creating the whole construction again. Dependent elements are updated automatically.<br />
<html><br /><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()" style='margin:1em'> <br />
</html><br />
<jsxgraph width="600" height="400" box="jxgbox"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-6, 12, 8, -6], axis: true});<br />
<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
var graph = board.create('functiongraph', [function(x){ return f(x); }, -10, 10]),<br />
p1 = board.create('glider', [0,0,graph], {style:6, name:'P'}),<br />
p2 = board.create('point', [function() { return p1.X()+1;}, function() {return p1.Y()+JXG.Math.Numerics.D(graph.Y)(p1.X());}], {style:1, name:''}),<br />
l1 = board.create('line', [p1,p2],{}),<br />
p3 = board.create('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''}),<br />
pol = board.create('polygon', [p1,p2,p3], {}),<br />
t = board.create('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(Math.round(p2.Y()-p3.Y(),2));}]);<br />
<br />
function doIt(){<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
graph.Y = function(x){ return f(x); };<br />
graph.updateCurve();<br />
board.update();<br />
} <br />
</jsxgraph><br />
<br />
<br />
== How to Create this Construction ==<br />
<br />
=== HTML Part ===<br />
'''Adding a text input field somewhere on the page together with a button'''<br />
<br />
<source lang="xml"><br />
<input type="text" id="eingabe" value="Math.sin(x)*Math.cos(x)"><br />
<input type="button" value="set" onClick="doIt()"> <br />
</source><br />
<br />
=== JavaScript Part ===<br />
Setting up the board<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-6, 12, 8, -6], axis: true});<br />
</source><br />
<br />
Create a JavaScript Function f(x) From the Text Field<br />
<source lang="javascript"><br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
</source><br />
<br />
Use f(x) for defining the Graph<br />
<source lang="javascript"><br />
graph = board.create('functiongraph', [function(x){ return f(x); },-10, 10]); <br />
</source><br />
<br />
The slope triangle<br />
<source lang="javascript"><br />
//glider on the curve<br />
p1 = board.create('glider', [0,0,graph], {style:6, name:'P'});<br />
//define the derivative of f<br />
g = JXG.Math.Numerics.D(f);<br />
//a point on the tangent<br />
// variable x coordinate variable y coordinate depending on the derivative of f at point p1.X()<br />
p2 = board.create('point', [function() { return p1.X()+1;}, function() {return p1.Y()+JXG.Math.Numerics.D(graph.Y)(p1.X());}], {style:1, name:''});<br />
//the tangent <br />
l1 = board.create('line', [p1,p2],{}); <br />
//a third point fpr the slope triangle<br />
p3 = board.create('point', [function() { return p2.X();}, function() {return p1.Y();}],{style:1, name:''});<br />
//the slope triangle<br />
pol = board.create('polygon', [p1,p2,p3], {});<br />
//a text for displaying slope's value<br />
// variable x coordinate variable y coordinate variable value<br />
t = board.create('text', [function(){return p1.X()+1.1;},function(){return p1.Y()+(p2.Y()-p3.Y())/2;},function(){ return "m="+(Math.round(p2.Y()-p3.Y(),2));}],{color:ff0000}); <br />
</source><br />
<br />
Change the plotted function<br />
<source lang="javascript"><br />
function doIt(){<br />
//redefine function f according to the current text field value<br />
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");<br />
//change the Y attribute of the graph to the new function <br />
graph.Y = function(x){ return f(x); };<br />
//update the graph<br />
graph.updateCurve();<br />
//update the whole board<br />
board.update();<br />
} <br />
</source><br />
<br />
== Remarks ==<br />
The doIt() function is only responsible for updating the graph. All other dependend objects are self-updating, especially the object p2 which depends on the derivative of function f. This is all done by anonymous functions of JavaScript.<br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Even_simpler_function_plotter&diff=5988
Even simpler function plotter
2013-02-20T15:21:03Z
<p>Michael: </p>
<hr />
<div><html><br />
<input type="text" id="input" value="sin(x)*x"><br />
<input type="button" value="plot" onClick="plotter()"><br />
<input type="button" value="clear all" onClick="clearAll()"><br />
<input type="button" value="add tangent" onClick="addTangent()"><br />
<input type="button" value="add Derivative" onClick="addDerivative()"><br />
</form><br />
</html><br />
<jsxgraph width="600" height="400"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,8,8,-5], axis:true});<br />
var f, curve; // global objects<br />
<br />
function plotter() {<br />
var txtraw = document.getElementById('input').value;<br />
f = board.jc.snippet(txtraw, true, 'x', true);<br />
curve = board.create('functiongraph',[f,<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);<br />
return c.usrCoords[1];<br />
},<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);<br />
return c.usrCoords[1];<br />
}<br />
],{name:txtraw, withLabel:true});<br />
var q = board.create('glider', [2, 1, curve], {withLabel:false});<br />
var t = board.create('text', [<br />
function(){ return q.X()+0.1; },<br />
function(){ return q.Y()+0.1; },<br />
function(){ return "The slope of the function f(x)=" + txtraw + "<br>at x=" + q.X().toFixed(2) + " is equal to " + (JXG.Math.Numerics.D(f))(q.X()).toFixed(2); }<br />
], <br />
{fontSize:15});<br />
}<br />
<br />
function clearAll() {<br />
JXG.JSXGraph.freeBoard(board);<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,8,8,-5], axis:true});<br />
f = null;<br />
curve = null;<br />
}<br />
<br />
function addTangent() {<br />
if (JXG.isFunction(f)) {<br />
board.suspendUpdate();<br />
var p = board.create('glider',[1,0,curve], {name:'drag me'});<br />
board.create('tangent',[p], {name:'drag me'});<br />
board.unsuspendUpdate();<br />
}<br />
}<br />
<br />
function addDerivative() {<br />
if (JXG.isFunction(f)) {<br />
board.create('functiongraph',[JXG.Math.Numerics.D(f),<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);<br />
return c.usrCoords[1];<br />
},<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);<br />
return c.usrCoords[1];<br />
}], {dash:2});<br />
}<br />
}<br />
</jsxgraph><br />
===The underlying JavaScript code===<br />
<source lang="html4strict"><br />
<input type="text" id="input" value="sin(x)*x"><br />
<input type="button" value="plot" onClick="plotter()"><br />
<input type="button" value="clear all" onClick="clearAll()"> <br />
<input type="button" value="add tangent" onClick="addTangent()"><br />
<input type="button" value="add Derivative" onClick="addDerivative()"><br />
</source><br />
<source lang="javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,8,8,-5], axis:true});<br />
var f, curve; // global objects<br />
<br />
function plotter() {<br />
var txtraw = document.getElementById('input').value;<br />
f = board.jc.snippet(txtraw, true, 'x', true);<br />
curve = board.create('functiongraph',[f,<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);<br />
return c.usrCoords[1];<br />
},<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);<br />
return c.usrCoords[1];<br />
}<br />
],{name:txtraw, withLabel:true});<br />
var q = board.create('glider', [2, 1, curve], {withLabel:false});<br />
var t = board.create('text', [<br />
function(){ return q.X()+0.1; },<br />
function(){ return q.Y()+0.1; },<br />
function(){ return "The slope of the function f(x)=" + txtraw + "<br>at x=" + q.X().toFixed(2) + " is equal to " + (JXG.Math.Numerics.D(f))(q.X()).toFixed(2); }<br />
], <br />
{fontSize:15});<br />
}<br />
<br />
function clearAll() {<br />
JXG.JSXGraph.freeBoard(board);<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,8,8,-5], axis:true});<br />
f = null;<br />
curve = null;<br />
}<br />
<br />
function addTangent() {<br />
if (JXG.isFunction(f)) {<br />
board.suspendUpdate();<br />
var p = board.create('glider',[1,0,curve], {name:'drag me'});<br />
board.create('tangent',[p], {name:'drag me'});<br />
board.unsuspendUpdate();<br />
}<br />
}<br />
<br />
function addDerivative() {<br />
if (JXG.isFunction(f)) {<br />
board.create('functiongraph',[JXG.Math.Numerics.D(f),<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);<br />
return c.usrCoords[1];<br />
},<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);<br />
return c.usrCoords[1];<br />
}], {dash:2});<br />
}<br />
}<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Even_simpler_function_plotter&diff=5987
Even simpler function plotter
2013-02-20T15:20:40Z
<p>Michael: </p>
<hr />
<div><html><br />
<input type="text" id="input" value="sin(x)*x"><br />
<input type="button" value="plot" onClick="plotter()"><br />
<input type="button" value="clear all" onClick="clearAll()"><br />
<input type="button" value="add tangent" onClick="addTangent()"><br />
<input type="button" value="add Derivative" onClick="addDerivative()"><br />
</form><br />
</html><br />
<jsxgraph width="600" height="400"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,8,8,-5], axis:true});<br />
var f, curve; // global objects<br />
<br />
function plotter() {<br />
var txtraw = document.getElementById('input').value;<br />
// var txt = JXG.GeonextParser.geonext2JS(txtraw);<br />
// f = new Function('x','var y = '+txt+'; return y;');<br />
f = board.jc.snippet(txtraw, true, 'x', true);<br />
curve = board.create('functiongraph',[f,<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);<br />
return c.usrCoords[1];<br />
},<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);<br />
return c.usrCoords[1];<br />
}<br />
],{name:txtraw, withLabel:true});<br />
var q = board.create('glider', [2, 1, curve], {withLabel:false});<br />
var t = board.create('text', [<br />
function(){ return q.X()+0.1; },<br />
function(){ return q.Y()+0.1; },<br />
function(){ return "The slope of the function f(x)=" + txtraw + "<br>at x=" + q.X().toFixed(2) + " is equal to " + (JXG.Math.Numerics.D(f))(q.X()).toFixed(2); }<br />
], <br />
{fontSize:15});<br />
}<br />
<br />
function clearAll() {<br />
JXG.JSXGraph.freeBoard(board);<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,8,8,-5], axis:true});<br />
f = null;<br />
curve = null;<br />
}<br />
<br />
function addTangent() {<br />
if (JXG.isFunction(f)) {<br />
board.suspendUpdate();<br />
var p = board.create('glider',[1,0,curve], {name:'drag me'});<br />
board.create('tangent',[p], {name:'drag me'});<br />
board.unsuspendUpdate();<br />
}<br />
}<br />
<br />
function addDerivative() {<br />
if (JXG.isFunction(f)) {<br />
board.create('functiongraph',[JXG.Math.Numerics.D(f),<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);<br />
return c.usrCoords[1];<br />
},<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);<br />
return c.usrCoords[1];<br />
}], {dash:2});<br />
}<br />
}<br />
</jsxgraph><br />
===The underlying JavaScript code===<br />
<source lang="html4strict"><br />
<input type="text" id="input" value="sin(x)*x"><br />
<input type="button" value="plot" onClick="plotter()"><br />
<input type="button" value="clear all" onClick="clearAll()"> <br />
<input type="button" value="add tangent" onClick="addTangent()"><br />
<input type="button" value="add Derivative" onClick="addDerivative()"><br />
</source><br />
<source lang="javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,8,8,-5], axis:true});<br />
var f, curve; // global objects<br />
<br />
function plotter() {<br />
var txtraw = document.getElementById('input').value;<br />
// var txt = JXG.GeonextParser.geonext2JS(txtraw);<br />
// f = new Function('x','var y = '+txt+'; return y;');<br />
f = board.jc.snippet(txtraw, true, 'x', true);<br />
curve = board.create('functiongraph',[f,<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);<br />
return c.usrCoords[1];<br />
},<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);<br />
return c.usrCoords[1];<br />
}<br />
],{name:txtraw, withLabel:true});<br />
var q = board.create('glider', [2, 1, curve], {withLabel:false});<br />
var t = board.create('text', [<br />
function(){ return q.X()+0.1; },<br />
function(){ return q.Y()+0.1; },<br />
function(){ return "The slope of the function f(x)=" + txtraw + "<br>at x=" + q.X().toFixed(2) + " is equal to " + (JXG.Math.Numerics.D(f))(q.X()).toFixed(2); }<br />
], <br />
{fontSize:15});<br />
}<br />
<br />
function clearAll() {<br />
JXG.JSXGraph.freeBoard(board);<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,8,8,-5], axis:true});<br />
f = null;<br />
curve = null;<br />
}<br />
<br />
function addTangent() {<br />
if (JXG.isFunction(f)) {<br />
board.suspendUpdate();<br />
var p = board.create('glider',[1,0,curve], {name:'drag me'});<br />
board.create('tangent',[p], {name:'drag me'});<br />
board.unsuspendUpdate();<br />
}<br />
}<br />
<br />
function addDerivative() {<br />
if (JXG.isFunction(f)) {<br />
board.create('functiongraph',[JXG.Math.Numerics.D(f),<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);<br />
return c.usrCoords[1];<br />
},<br />
function(){ <br />
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);<br />
return c.usrCoords[1];<br />
}], {dash:2});<br />
}<br />
}<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Simple_function_plotter&diff=5983
Simple function plotter
2013-02-20T15:17:25Z
<p>Michael: </p>
<hr />
<div>Plots a function together with its derivative.<br />
First, change the function term int this text box. Second, click on "plot".<br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<form><textarea id="input" rows=7 cols=35 wrap="off" ><br />
function f(x) {<br />
return Math.cos(x)*p.Y();<br />
}<br />
c = plot(f);<br />
// Derivative:<br />
g = JXG.Math.Numerics.D(f);<br />
plot(g,{strokecolor:'black', dash:1});<br />
</textarea> <br><br />
<input type="button" value="plot" onClick="doIt()" style='margin-right:1em'> <br />
<input type="button" value="clear all" onClick="board=clearAll(board)"> <br />
</form><br />
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div><br />
<script language="JavaScript"><br />
var board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], axis:true});<br />
<br />
// Macro function plotter<br />
function addCurve(board, func, atts) {<br />
var f = board.create('functiongraph', [func], atts);<br />
return f;<br />
}<br />
<br />
// Simplified plotting of function<br />
function plot(func, atts) {<br />
if (atts==null) {<br />
return addCurve(board, func, {strokewidth:2});<br />
} else {<br />
return addCurve(board, func, atts);<br />
} <br />
}<br />
<br />
// Free point<br />
var p = board.create('point', [1,1], {style:6, name:'p'}); <br />
<br />
// Usage of the macro<br />
function doIt() {<br />
eval(document.getElementById('input').value); <br />
}<br />
<br />
function clearAll(board) {<br />
JXG.JSXGraph.freeBoard(board);<br />
board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], axis:true});<br />
p = board.create('point', [3,-4], {style:6, name:'p'}); <br />
return board;<br />
}<br />
</script><br />
</html><br />
<br />
<source lang="html4strict"><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div><br />
</source><br />
<br />
<source lang="html4strict"><br />
<form><textarea id="input" rows=7 cols=35 wrap="off" ><br />
function f(x) {<br />
return Math.cos(x)*p.Y();<br />
}<br />
c = plot(f);<br />
// Derivative:<br />
g = JXG.Math.Numerics.D(f);<br />
plot(g,{strokecolor:'black', dash:1});<br />
</textarea> <br><br />
<input type="button" value="plot" onClick="doIt()"> <br />
<input type="button" value="clear all" onClick="board=clearAll(board)"> <br />
</form><br />
</source><br />
<br />
<source lang="javascript"><br />
var board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], axis:true});<br />
<br />
// Macro function plotter<br />
function addCurve(board, func, atts) {<br />
var f = board.create('functiongraph', [func], atts);<br />
return f;<br />
}<br />
<br />
// Simplified plotting of function<br />
function plot(func, atts) {<br />
if (atts==null) {<br />
return addCurve(board, func, {strokewidth:2});<br />
} else {<br />
return addCurve(board, func, atts);<br />
} <br />
}<br />
<br />
// Free point<br />
var p = board.create('point', [1,1], {style:6, name:'p'}); <br />
<br />
// Usage of the macro<br />
function doIt() {<br />
eval(document.getElementById('input').value); <br />
}<br />
<br />
function clearAll(board) {<br />
JXG.JSXGraph.freeBoard(board);<br />
board = JXG.JSXGraph.initBoard('box', {boundingbox:[-5,8,8,-5], axis:true});<br />
p = board.create('point', [3,-4], {style:6, name:'p'}); <br />
return board;<br />
}<br />
</source><br />
<br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Browser_event_and_coordinates&diff=5966
Browser event and coordinates
2013-02-20T14:44:56Z
<p>Michael: </p>
<hr />
<div>This example shows how to add a point whenever the user clicks on the board. The function getMouseCoords extracts the click coordinates from the event object and returns a JXG.Coords object with the point's coordinates on the board. The for loop in the event listener is to check if there is already a point as we don't want to create a point in this case.<br />
<br />
<jsxgraph width="400" height="400"><br />
var getMouseCoords = function(e) {<br />
var cPos = board.getCoordsTopLeftCorner(e),<br />
absPos = JXG.getPosition(e),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
up = function(e) {<br />
var canCreate = true,<br />
coords = getMouseCoords(e),<br />
el;<br />
<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('up', up);<br />
</jsxgraph><br />
<br />
==The JavaScript Code==<br />
<br />
<source lang="javascript"><br />
var getMouseCoords = function(e) {<br />
var cPos = board.getCoordsTopLeftCorner(e),<br />
absPos = JXG.getPosition(e),<br />
dx = absPos[0]-cPos[0],<br />
dy = absPos[1]-cPos[1];<br />
<br />
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);<br />
},<br />
up = function(e) {<br />
var canCreate = true,<br />
coords = getMouseCoords(e),<br />
el;<br />
<br />
for (el in board.objects) {<br />
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {<br />
canCreate = false;<br />
break;<br />
}<br />
}<br />
<br />
if (canCreate) {<br />
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);<br />
}<br />
},<br />
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});<br />
<br />
board.on('up', up);<br />
</source><br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Antiderivative&diff=5965
Antiderivative
2013-02-20T14:39:17Z
<p>Michael: </p>
<hr />
<div><jsxgraph width="800" height="400" box="box"><br />
var brd = JXG.JSXGraph.initBoard('box', {boundingbox:[-3,10,3,-3],axis:true});<br />
var p = [];<br />
p.push(brd.create('point',[-2,(Math.random()-0.2)*5],{name:''}));<br />
p.push(brd.create('point',[0,(Math.random()-0.2)*5],{name:''}));<br />
p.push(brd.create('point',[2.2,(Math.random()-0.2)*5],{name:''}));<br />
<br />
var f = JXG.Math.Numerics.lagrangePolynomial(p);<br />
var plot = brd.create('functiongraph',[f,-3,3]);<br />
var s = brd.create('glider',[-2,0,plot],{name:'drag me'});<br />
var int = brd.create('integral',[[function(){return p[0].X();},function(){return s.X();}],plot],{fillOpacity:0.2});<br />
<br />
var F = brd.create('point',[function(){return s.X();}, function(){return JXG.Math.Numerics.I([p[0].X(),s.X()],f);}],<br />
{trace:true,name:'F',fillColor:'#0000aa',strokeColor:'#0000aa',face:'[]'});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<source lang="javascript"><br />
var brd = JXG.JSXGraph.initBoard('box', {boundingbox:[-3,10,3,-3],axis:true});<br />
var p = [];<br />
p.push(brd.create('point',[-2,(Math.random()-0.2)*5],{name:''}));<br />
p.push(brd.create('point',[0,(Math.random()-0.2)*5],{name:''}));<br />
p.push(brd.create('point',[2.2,(Math.random()-0.2)*5],{name:''}));<br />
<br />
var f = JXG.Math.Numerics.lagrangePolynomial(p);<br />
var plot = brd.create('functiongraph',[f,-3,3]);<br />
var s = brd.create('glider',[-2,0,plot],{name:'drag me'});<br />
var int = brd.create('integral',[[function(){return p[0].X();},function(){return s.X();}],plot],{fillOpacity:0.2});<br />
<br />
var F = brd.create('point',[function(){return s.X();}, function(){return JXG.Math.Numerics.I([p[0].X(),s.X()],f);}],<br />
{trace:true,name:'F',fillColor:'#0000aa',strokeColor:'#0000aa',face:'[]'});<br />
</source><br />
<br />
[[Category:Calculus]]<br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Antiderivative&diff=5964
Antiderivative
2013-02-20T14:38:43Z
<p>Michael: </p>
<hr />
<div><jsxgraph width="800" height="400" box="box"><br />
var brd = JXG.JSXGraph.initBoard('box', {boundingbox:[-3,10,3,-3],axis:true});<br />
var p = [];<br />
p.push(brd.create('point',[-2,(Math.random()-0.2)*5],{name:''}));<br />
p.push(brd.create('point',[0,(Math.random()-0.2)*5],{name:''}));<br />
p.push(brd.create('point',[2.2,(Math.random()-0.2)*5],{name:''}));<br />
<br />
var f = JXG.Math.Numerics.lagrangePolynomial(p);<br />
var plot = brd.create('functiongraph',[f,-3,3]);<br />
var s = brd.create('glider',[-2,0,plot],{name:'drag me'});<br />
var int = brd.create('integral',[[function(){return p[0].X();},function(){return s.X();}],plot],{fillOpacity:0.2});<br />
<br />
var F = brd.create('point',[function(){return s.X();}, function(){return brd.I([p[0].X(),s.X()],f);}],<br />
{trace:true,name:'F',fillColor:'#0000aa',strokeColor:'#0000aa',face:'[]'});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<source lang="javascript"><br />
var brd = JXG.JSXGraph.initBoard('box', {boundingbox:[-3,10,3,-3],axis:true});<br />
var p = [];<br />
p.push(brd.create('point',[-2,(Math.random()-0.2)*5],{name:''}));<br />
p.push(brd.create('point',[0,(Math.random()-0.2)*5],{name:''}));<br />
p.push(brd.create('point',[2.2,(Math.random()-0.2)*5],{name:''}));<br />
<br />
var f = brd.lagrangePolynomial(p);<br />
var plot = brd.create('functiongraph',[f,-3,3]);<br />
var s = brd.create('glider',[-2,0,plot],{name:'drag me'});<br />
var int = brd.create('integral',[[function(){return p[0].X();},function(){return s.X();}],plot],{fillOpacity:0.2});<br />
<br />
var F = brd.create('point',[function(){return s.X();}, function(){return brd.I([p[0].X(),s.X()],f);}],<br />
{trace:true,name:'F',fillColor:'#0000aa',strokeColor:'#0000aa',face:'[]'});<br />
</source><br />
<br />
[[Category:Calculus]]<br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Adapt_highlighting_of_objects&diff=5963
Adapt highlighting of objects
2013-02-20T14:36:16Z
<p>Michael: </p>
<hr />
<div><html><br />
<div id="myinfobox" <br />
style="<br />
z-Index:99;<br />
display:none;<br />
position:absolute; <br />
left:0px;<br />
top:0px;<br />
width:50px;<br />
background-color:#ffff88;<br />
padding:5px;<br />
text-align:center;<br />
/* Cross-browser opacity:*/<br />
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)'; <br />
filter: alpha(opacity=70);<br />
opacity:.7;<br />
"<br />
></div> <br />
</html><br />
<jsxgraph width="600" height="600"><br />
// A simple construction, consisting of three points , two lines, one circle.<br />
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5], grid: false});<br />
var p1 = brd.create('point',[3,0]);<br />
var p2 = brd.create('point',[-1,0]);<br />
var p3 = brd.create('point',[0,4]);<br />
var l1 = brd.create('line',[p1,p2]);<br />
var l2 = brd.create('line',[p1,p3]);<br />
<br />
var c = brd.create('circle',[p2,p3]);<br />
<br />
// First, we overwrite the highling method for ALL lines<br />
var infobox = document.getElementById('myinfobox');<br />
JXG.Line.prototype.highlight = function(){<br />
infobox.innerHTML = this.board.mousePosRel.toString()+'<hr noshade>'+this.name;<br />
infobox.style.left = (this.board.mousePosRel[0]+0)+'px';<br />
infobox.style.top = (this.board.mousePosRel[1]+0)+'px';<br />
infobox.style.display = 'block';<br />
this.board.renderer.highlight(this); // highlight the line<br />
<br />
}<br />
JXG.Line.prototype.noHighlight = function(){<br />
infobox.style.display = 'none';<br />
this.board.renderer.noHighlight(this); // dehighlight the line<br />
}<br />
<br />
//Second, we overwrite the highlighting method just for the circle c.<br />
c.highlight = function(){<br />
infobox.innerHTML = this.board.mousePosRel.toString();<br />
infobox.style.left = (this.board.mousePosRel[0]+0)+'px';<br />
infobox.style.top = (this.board.mousePosRel[1]+0)+'px';<br />
infobox.style.display = 'block';<br />
}<br />
c.noHighlight = function(){<br />
infobox.style.display = 'none';<br />
}<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
Create an invisible divsion:<br />
<source lang="html4strict"><br />
<div id="myinfobox" <br />
style="<br />
z-Index:99;<br />
display:none;<br />
position:absolute; <br />
left:0px;<br />
top:0px;<br />
width:50px;<br />
background-color:#ffff88;<br />
padding:5px;<br />
text-align:center;<br />
/* Cross-browser opacity:*/<br />
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)'; <br />
filter: alpha(opacity=70);<br />
opacity:.7;<br />
"<br />
></div> <br />
</source><br />
<source lang="javascript"><br />
// A simple construction, consisting of three points , two lines, one circle.<br />
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5], grid: false});<br />
var p1 = brd.create('point',[3,0]);<br />
var p2 = brd.create('point',[-1,0]);<br />
var p3 = brd.create('point',[0,4]);<br />
var l1 = brd.create('line',[p1,p2]);<br />
var l2 = brd.create('line',[p1,p3]);<br />
<br />
var c = brd.create('circle',[p2,p3]);<br />
<br />
// First, we overwrite the highling method for ALL lines<br />
var infobox = document.getElementById('myinfobox');<br />
JXG.Line.prototype.highlight = function(){<br />
infobox.innerHTML = this.board.mousePosRel.toString()+'<hr noshade>'+this.name;<br />
infobox.style.left = (this.board.mousePosRel[0]+0)+'px';<br />
infobox.style.top = (this.board.mousePosRel[1]+0)+'px';<br />
infobox.style.display = 'block';<br />
this.board.renderer.highlight(this); // highlight the line<br />
<br />
}<br />
JXG.Line.prototype.noHighlight = function(){<br />
infobox.style.display = 'none';<br />
this.board.renderer.noHighlight(this); // dehighlight the line<br />
}<br />
<br />
//Second, we overwrite the highlighting method just for the circle c.<br />
c.highlight = function(){<br />
infobox.innerHTML = this.board.mousePosRel.toString();<br />
infobox.style.left = (this.board.mousePosRel[0]+0)+'px';<br />
infobox.style.top = (this.board.mousePosRel[1]+0)+'px';<br />
infobox.style.display = 'block';<br />
}<br />
c.noHighlight = function(){<br />
infobox.style.display = 'none';<br />
}<br />
</source><br />
<br />
[[Category:Austragungsstueberl]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Bounding_box&diff=5938
Bounding box
2013-01-31T15:16:28Z
<p>Michael: </p>
<hr />
<div>The bounding box defines the viewport of the board, i.e. the portion of the <math>\mathbb{R}^2</math> that is shown. The JavaScript code <br />
<source lang="javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], keepaspectratio: true, axis:true});<br />
</source><br />
sets the vertical and horizontal units and the position of the origin such that<br />
the upper left corner of the drawing panel has position (-5,10) and the lower right<br />
corner of the drawing panel has position (5,-2).<br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:500px; height:600px;"></div><br />
<script type="text/javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], keepaspectratio: true, axis:true});<br />
</script><br />
</html><br />
The source code of the page looks like this:<br />
<source lang="xml"><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:500px; height:600px;"></div><br />
<script type="text/javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], axis:true});<br />
</script><br />
</source><br />
<br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Slider&diff=5937
Slider
2013-01-31T11:38:10Z
<p>Michael: </p>
<hr />
<div>Sliders enable a convenient way to experiment with mathematical constructions.<br />
In the example below there is a slider ''s'' which takes values between 1 and 5.<br />
The value of the slider can be accessed via ''s.Value()''.<br />
The ''x''-coordinate and the ''y''-coordinate of the point ''A'' depend on this value<br />
''s.Value()'':<br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-3, 5, 7, -5], axis:true}); <br />
var s = b.create('slider',[[0,-3],[4,-3],[1,1,5]]);<br />
var s2 = b.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});<br />
var a = b.create('point',[<br />
function(){return s.Value();},<br />
function(){return 3/s2.Value();}<br />
],{trace:true});<br />
</script><br />
</html><br />
The slider needs the following input parameters:<br />
* [[x1,y1],[x2,y2],[min,start,max]]<br />
* [x1,y1]: first point of the ruler<br />
* [x2,y2]: last point of the ruler<br />
* min: minimum value of the slider<br />
* start: initial value of the slider <br />
* max: maximum value of the slider<br />
Properties:<br />
* snapWidth: distance between two values. (snapWidth:1: slider with integer values)<br />
<br />
JavaScript code:<br />
<source lang="html4strict"><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
</source><br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-3, 5, 7, -5], axis:true}); <br />
var s = b.create('slider',[[0,-3],[4,-3],[1,1,5]]);<br />
var s2 = b.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});<br />
var a = b.create('point',[<br />
function(){return s.Value();},<br />
function(){return 3/s.Value();}<br />
],{trace:true});<br />
</source></div>
Michael
https://jsxgraph.org/wiki/index.php?title=Slider&diff=5936
Slider
2013-01-31T11:37:58Z
<p>Michael: </p>
<hr />
<div>Sliders enable a convenient way to experiment with mathematical constructions.<br />
In the example below there is a slider ''s'' which takes values between 1 and 5.<br />
The value of the slider can be accessed via ''s.Value()''.<br />
The ''x''-coordinate and the ''y''-coordinate of the point ''A'' depend on this value<br />
''s.Value()'':<br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script type="text/javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-3, 5, 7, -5], axis:true}); <br />
var s = b.create('slider',[[0,-3],[4,-3],[1,1,5]]);<br />
var s2 = b.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});<br />
var a = b.create('point',[<br />
function(){return s.Value();},<br />
function(){return 3/s.Value();}<br />
],{trace:true});<br />
</script><br />
</html><br />
The slider needs the following input parameters:<br />
* [[x1,y1],[x2,y2],[min,start,max]]<br />
* [x1,y1]: first point of the ruler<br />
* [x2,y2]: last point of the ruler<br />
* min: minimum value of the slider<br />
* start: initial value of the slider <br />
* max: maximum value of the slider<br />
Properties:<br />
* snapWidth: distance between two values. (snapWidth:1: slider with integer values)<br />
<br />
JavaScript code:<br />
<source lang="html4strict"><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div><br />
</source><br />
<source lang="javascript"><br />
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-3, 5, 7, -5], axis:true}); <br />
var s = b.create('slider',[[0,-3],[4,-3],[1,1,5]]);<br />
var s2 = b.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});<br />
var a = b.create('point',[<br />
function(){return s.Value();},<br />
function(){return 3/s.Value();}<br />
],{trace:true});<br />
</source></div>
Michael
https://jsxgraph.org/wiki/index.php?title=Include_JSXGraph&diff=5935
Include JSXGraph
2013-01-31T11:36:39Z
<p>Michael: </p>
<hr />
<div>== Including JSXGraph into HTML ==<br />
<br />
For including JSXGraph into HTML, two files are necessary:<br />
* jsxgraphcore.js from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js]<br />
* jsxgraph.css from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]<br />
You can either download these three files and use the local copy or you can use the online version.<br />
<br />
=== Usage of a local copy ===<br />
If you want to include a local copy of JSXGraph in your HTML file then you have to write the following lines into the document head:<br />
<source lang="xml"><br />
<head><br />
<link rel="stylesheet" type="text/css" href="jsxgraph.css" /><br />
<script type="text/javascript" src="jsxgraphcore.js"></script><br />
</head><br />
</source><br />
<br />
=== Usage of the online copy ===<br />
If you want to include the online of JSXGraph in your HTML file then you have to write the following lines into the document head:<br />
<source lang="xml"><br />
<head><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
</head><br />
</source><br />
<br />
=== Include a drawing panel into the HTML ===<br />
The geometric construction which is displayed by JSXGraph resides in an HTML element. Usually, a div-element is taken.<br />
This division needs an ID. Using this ID, we declare this element to be a drawing panel of JSXGraph.<br />
<br />
The following code has to be placed into the body part of an HTML file:<br />
<source lang="xml"><br />
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 5, -5]});<br />
</script><br />
</source><br />
We can use as many different drawing panels as we like in one HTML file.<br />
<br />
===Example===<br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script language="JavaScript"> <br />
board = JXG.JSXGraph.initBoard('jsxgbox', {boundingbox: [-5, 5, 5, -5]});<br />
g1 = board.createElement('point', [1, -1], {style:6});<br />
g2 = board.createElement('point', [2.5, -2], {style:6});<br />
g3 = board.createElement('point', [1, -3], {style:5});<br />
g4 = board.createElement('point', [2.5, -4], {style:5});<br />
g5 = board.createElement('point', [-4, 1], {style:5,name:''});<br />
<br />
c1 = board.createElement('curve', [<br />
function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },<br />
function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },<br />
0,function(){ return Math.PI*7*Math.abs(g4.X());}],{<br />
strokeWidth:function(){return g5.Y()*3;},<br />
strokeOpacity:function(){return g5.Y()*0.6;}<br />
});<br />
</script><br />
</html><br />
<source lang="xml"><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script language="JavaScript"> <br />
board = JXG.JSXGraph.initBoard('jsxgbox', {boundingbox: [-5, 5, 5, -5]});<br />
g1 = board.createElement('point', [1, -1], {style:6});<br />
g2 = board.createElement('point', [2.5, -2], {style:6});<br />
g3 = board.createElement('point', [1, -3], {style:5});<br />
g4 = board.createElement('point', [2.5, -4], {style:5});<br />
g5 = board.createElement('point', [-4, 1], {style:5,name:''});<br />
<br />
c1 = board.createElement('curve', [<br />
function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },<br />
function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },<br />
0,function(){ return Math.PI*7*Math.abs(g4.X());}],{<br />
strokeWidth:function(){return g5.Y()*3;},<br />
strokeOpacity:function(){return g5.Y()*0.6;}<br />
});<br />
</script><br />
</source><br />
<br />
===Further examples===<br />
[[Circles on circles]] contains an advanced example using the excellent package of widgets [http://jqueryui.com jQuery UI].<br />
<br />
[[Category:Austragungsstueberl]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Snake_-_the_game&diff=5934
Snake - the game
2013-01-31T11:35:44Z
<p>Michael: </p>
<hr />
<div>This simple version of the old C64 game "snake" is realized completely in JavaScript with [http://jsxgraph.org JSXGraph]. <br />
After starting the game the "snake" can be controlled with the arrow up/down/left/right keys.<br />
<html><br />
<form><input type="button" onClick="startGame()" value="start game"></form><br />
</html><br />
<br />
<jsxgraph box="box" width="600" height="600"><br />
var board = JXG.JSXGraph.initBoard('box',{boundingbox: [0, 20, 20, 0]});<br />
var snake = {<br />
points : [[10,11],[10,10]],<br />
dir : [1,0],<br />
size: 2,<br />
newSize: 2,<br />
speed: 300,<br />
hitSelf: function(x,y) {<br />
for (var i=0;i<this.size-1;i++) {<br />
if (x==this.points[0][i]) if (y==this.points[1][i]) { return true; }<br />
}<br />
return false;<br />
}<br />
}<br />
var curve = board.create('curve', snake.points , {strokeColor:'#B71313',strokeWidth:20,strokeOpacity:0.7});<br />
var point = board.create('point', [<br />
Math.round(Math.random()*18)+1,Math.round(Math.random()*18)+1], <br />
{strokeColor:'#4CADD4',fillColor:'#4CADD4',strokeWidth:10,name:' '});<br />
var t = board.create('text', [2,1,function() { return snake.size; }], {fontSize:28});<br />
<br />
var setRandomPosition = function() {<br />
point.setPositionDirectly(JXG.COORDS_BY_USER,<br />
Math.round(Math.random()*18)+1,<br />
Math.round(Math.random()*18)+1);<br />
}<br />
var keyDown = function (Evt) {<br />
var code;<br />
if (!Evt) Evt = window.event;<br />
if (Evt.which) {<br />
code = Evt.which;<br />
} else if (Evt.keyCode) {<br />
code = Evt.keyCode;<br />
}<br />
// 37: left, 38: up, 39: right, 40: down<br />
if (code==37) { snake.dir = [-1,0]; return false;}<br />
else if (code==38) { snake.dir = [0,1]; return false;}<br />
else if (code==39) { snake.dir = [1,0]; return false;}<br />
else if (code==40) { snake.dir = [0,-1]; return false;}<br />
return true;<br />
}<br />
document.onkeydown = keyDown;<br />
<br />
var crawl = function() {<br />
if (snake.size>=snake.newSize) {<br />
snake.points[0].shift();<br />
snake.points[1].shift();<br />
}<br />
var x = snake.points[0][snake.points[0].length-1]+snake.dir[0];<br />
snake.points[0].push(x);<br />
var y = snake.points[1][snake.points[1].length-1]+snake.dir[1];<br />
snake.points[1].push(y);<br />
snake.size = snake.points[0].length;<br />
board.update();<br />
if (x>=20 || x<=0 || y>=20 || y<=0 || snake.hitSelf(x,y)) {<br />
alert('Game over');<br />
} else {<br />
if (x==point.X()) if (y==point.Y()) {<br />
snake.newSize += 5;<br />
snake.speed -= 10;<br />
setRandomPosition();<br />
board.update();<br />
}<br />
setTimeout(crawl,snake.speed);<br />
}<br />
}<br />
<br />
var startGame = function () {<br />
snake.points[0].splice(0,snake.size,10,11);<br />
snake.points[1].splice(0,snake.size,10,10);<br />
snake.dir = [1,0];<br />
snake.size = 2;<br />
snake.newSize = 2;<br />
snake.speed = 300;<br />
setRandomPosition();<br />
crawl();<br />
}<br />
</jsxgraph><br />
<br />
<source lang="xml"><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<form><input type="button" onClick="startGame()" value="start game"></form><br />
<div id="box" class="jxgbox" style="width:600px; height:600px; overflow:hidden; "></div><br />
</source><br />
<br />
<source lang="javascript"><br />
var board = JXG.JSXGraph.initBoard('box',{boundingbox: [0, 20, 20, 0],grid:true});<br />
var snake = {<br />
points : [[10,11],[10,10]],<br />
dir : [1,0],<br />
size: 2,<br />
newSize: 2,<br />
speed: 300,<br />
hitSelf: function(x,y) {<br />
for (var i=0;i<this.size-1;i++) {<br />
if (x==this.points[0][i]) if (y==this.points[1][i]) { return true; }<br />
}<br />
return false;<br />
}<br />
}<br />
var curve = board.create('curve', snake.points , {strokeWidth:20,strokeOpacity:0.5});<br />
var point = board.create('point', [<br />
Math.round(Math.random()*18)+1,Math.round(Math.random()*18)+1], <br />
{strokeColor:'#4CADD4',fillColor:'#4CADD4',strokeWidth:10,name:' '});<br />
var t = board.create('text', [2,1,function() { return snake.size; }], {fontSize:28});<br />
<br />
var setRandomPosition = function() {<br />
point.setPositionDirectly(JXG.COORDS_BY_USER,<br />
Math.round(Math.random()*18)+1,<br />
Math.round(Math.random()*18)+1);<br />
}<br />
var keyDown = function (Evt) {<br />
var code;<br />
if (!Evt) Evt = window.event;<br />
if (Evt.which) {<br />
code = Evt.which;<br />
} else if (Evt.keyCode) {<br />
code = Evt.keyCode;<br />
}<br />
// 37: left, 38: up, 39: right, 40: down<br />
if (code==37) { snake.dir = [-1,0]; return false;}<br />
else if (code==38) { snake.dir = [0,1]; return false;}<br />
else if (code==39) { snake.dir = [1,0]; return false;}<br />
else if (code==40) { snake.dir = [0,-1]; return false;}<br />
return true;<br />
}<br />
document.onkeydown = keyDown;<br />
<br />
var crawl = function() {<br />
if (snake.size>=snake.newSize) {<br />
snake.points[0].shift();<br />
snake.points[1].shift();<br />
}<br />
var x = snake.points[0][snake.points[0].length-1]+snake.dir[0];<br />
snake.points[0].push(x);<br />
var y = snake.points[1][snake.points[1].length-1]+snake.dir[1];<br />
snake.points[1].push(y);<br />
snake.size = snake.points[0].length;<br />
board.update();<br />
if (x>=20 || x<=0 || y>=20 || y<=0 || snake.hitSelf(x,y)) {<br />
alert('Game over');<br />
} else {<br />
if (x==point.X()) if (y==point.Y()) {<br />
snake.newSize += 5;<br />
snake.speed -= 10;<br />
setRandomPosition();<br />
board.update();<br />
}<br />
setTimeout(crawl,snake.speed);<br />
}<br />
}<br />
<br />
var startGame = function () {<br />
snake.points[0].splice(0,snake.size,10,11);<br />
snake.points[1].splice(0,snake.size,10,10);<br />
snake.dir = [1,0];<br />
snake.size = 2;<br />
snake.newSize = 2;<br />
snake.speed = 300;<br />
setRandomPosition();<br />
crawl();<br />
}<br />
</source><br />
<br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Introduction&diff=5933
Introduction
2013-01-31T11:33:33Z
<p>Michael: </p>
<hr />
<div>JSXGraph is a browser based library for interactive geometry, function plotting, graphs, and data visualization. It is completely written in JavaScript and everybody with a little experience with JavaScript shouldn't have problems using JSXGraph. Thanks to the dynamics of JavaScript JSXGraph is also very easy to extend and thanks to AJAX many other softwarepackages can be integrated.<br />
<br />
If you have any question about JSXGraph or this documentation feel free to [http://jsxgraph.uni-bayreuth.de/wp/contact/ contact us].<br />
<br />
=Embed JSXGraph in a webpage=<br />
<br />
You need the following files:<br />
* jsxgraphcore.js from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js]<br />
* jsxgraph.css from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]<br />
You can either download these files and use the local copy or you can use the online version.<br />
<br />
== Usage of a local copy ==<br />
If you want to include a local copy of JSXGraph in your HTML file then you have to write the following lines into the document head:<br />
<source lang="xml"><br />
<head><br />
<link rel="stylesheet" type="text/css" href="jsxgraph.css" /><br />
<script type="text/javascript" src="jsxgraphcore.js"></script><br />
</head><br />
</source><br />
<br />
== Usage of the online copy ==<br />
If you want to include the online of JSXGraph in your HTML file then you have to write the following lines into the document head:<br />
<source lang="xml"><br />
<head><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
</head><br />
</source><br />
<br />
<br />
= Include a drawing panel into the HTML =<br />
==General creation of a JSXGraph board==<br />
Before anything can be drawn, you'll have to create a board JSXGraph can draw on. To create a board we need a HTML element - usually a div-element is taken - with an ID attribute. Using this ID, we declare this element to be a drawing panel of JSXGraph:<br />
<br />
<source lang="javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 10, 5, -2], axis:true});<br />
</source><br />
<br />
The bounding box determines the portion of the plane that is visible to the user. In the above example the horizontal and vertical viewport both go from -2 to 2. The syntax of this option is pretty easy to understand: It takes an array with 4 numbers defining the most left, top, right, bottom point available on screen in user coordinates.<br />
The axis option just draws a standard x- and y-axis on the board and is used to visualize the bounding box:<br />
<br />
<jsxgraph height="500" width="500" box="jxgbox2"><br />
var board = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 10, 5, -2], axis:true});<br />
</jsxgraph><br />
<br />
==Various options to affect the initialisation of the board==<br />
Here are the other options explained together with the already mentioned in a small table:<br />
<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Option !! Type !! Default value !! Explanation<br />
|-<br />
| boundingbox || Array || [-5, 5, 5, -5] || The viewport of the board.<br />
|-<br />
| axis || bool || false || If ''true'', default axes are drawn on the board. To draw axes with special options set this to false and create them manually. See also [[Ticks]].<br />
|-<br />
| grid || bool || false || If ''true'', a grid is drawn on the board.<br />
|-<br />
| showNavigation || bool || true || If ''false'', removes navigation menu from board.<br />
|-<br />
| showCopyright || bool || true || If ''false'', removes copyright message from board.<br />
|-<br />
| zoomfactor || positive float || 1.0 || Sets zoom factor on the board.<br />
|-<br />
| zoomX || positive float || 1.0 || Sets zoom factor in horizontal direction. The final zoom factor in this direction is this value multiplied with zoomfactor.<br />
|-<br />
| zoomY || positive float || 1.0 || Sets zoom factor in vertical direction. The final zoom factor in this direction is this value multiplied with zoomfactor.<br />
|}</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Introduction&diff=5932
Introduction
2013-01-31T11:30:15Z
<p>Michael: </p>
<hr />
<div>JSXGraph is a browser based library for interactive geometry, function plotting, graphs, and data visualization. It is completely written in JavaScript and everybody with a little experience with JavaScript shouldn't have problems using JSXGraph. Thanks to the dynamics of JavaScript JSXGraph is also very easy to extend and thanks to AJAX many other softwarepackages can be integrated.<br />
<br />
If you have any question about JSXGraph or this documentation feel free to [http://jsxgraph.uni-bayreuth.de/wp/contact/ contact us].<br />
<br />
=Embed JSXGraph in a webpage=<br />
<br />
You need the following files:<br />
* jsxgraphcore.js from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js]<br />
* jsxgraph.css from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]<br />
You can either download these files and use the local copy or you can use the online version.<br />
<br />
== Usage of a local copy ==<br />
If you want to include a local copy of JSXGraph in your HTML file then you have to write the following lines into the document head:<br />
<source lang="xml"><br />
<head><br />
<link rel="stylesheet" type="text/css" href="jsxgraph.css" /><br />
<script type="text/javascript" src="jsxgraphcore.js"></script><br />
</head><br />
</source><br />
<br />
== Usage of the online copy ==<br />
If you want to include the online of JSXGraph in your HTML file then you have to write the following lines into the document head:<br />
<source lang="xml"><br />
<head><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
</head><br />
</source><br />
<br />
<br />
= Include a drawing panel into the HTML =<br />
==General creation of a JSXGraph board==<br />
If you want to use JSXGraph in most cases you want to draw something on a web page (although some algorithms that don't depend on visual elements are implemented they're by now not so numerous...). Before anything can be drawn, you'll have to create a board JSXGraph can draw on. To create a board we need a HTML element - usually a div-element is taken - with an ID attribute. Using this ID, we declare this element to be a drawing panel of JSXGraph:<br />
<br />
<source lang="xml"><br />
<body><br />
[...]<br />
<div id="box" class="jxgbox" style="width:200px; height:200px;"></div><br />
<script type="text/javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-2, 2, 2, -2]});<br />
</script><br />
[...]<br />
</source><br />
This creates an empty drawing panel sized 200x200 pixels with the origin in the center of the box.<br />
<jsxgraph height="200" width="200" box="jxgbox"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-2, 2, 2, -2]});<br />
</jsxgraph><br />
<br />
As already mentioned, ''originX'' and ''originY'' determine the origins position in screen coordinates relative to the upper left corner of the drawing box. In the above example the origin is in the center of the board with screen coordinates <tt>(250, 250)</tt> but has user coordinates - as origins should have - <tt>(0, 0)</tt>. This is the only coordinate you give in screen coordinates - all the other data (e.g. coordinates when constructing a point, parameters when plotting a curve) should be given in user coordinate system. The options ''unitX'' and ''unitY'' determine the amount of pixels representing one unit in user coordinates. For the beginning these two numbers should be equal otherwise you'd get different zoom factors in x and y direction resulting in circles appearing as ellipses.<br />
<br />
Instead of supplying values for originX, originY, unitX, unitY, you can define the user coordinate region shown on the drawing panel directly. The option for that is called <tt>boundingbox</tt> and is used like that:<br />
<source lang="javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 10, 5, -2], axis:true});<br />
</source><br />
<br />
The axis option just draws a standard x- and y-axis on the board and is used to visualize the bounding box:<br />
<br />
<jsxgraph height="500" width="500" box="jxgbox2"><br />
var board = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 10, 5, -2], axis:true});<br />
</jsxgraph><br />
<br />
The syntax of this option is pretty easy to understand: It takes an array with 4 numbers defining the most left, top, right, bottom point available on screen in user coordinates.<br />
<br />
==Various options to affect the initialisation of the board==<br />
Here are the other options explained together with the already mentioned in a small table:<br />
<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Option !! Type !! Default value !! Explanation<br />
|-<br />
| boundingbox || Array || [-5, 5, 5, -5] || The viewport of the board.<br />
|-<br />
| axis || bool || false || If ''true'', default axes are drawn on the board. To draw axes with special options set this to false and create them manually. See also [[Ticks]].<br />
|-<br />
| grid || bool || false || If ''true'', a grid is drawn on the board.<br />
|-<br />
| showNavigation || bool || true || If ''false'', removes navigation menu from board.<br />
|-<br />
| showCopyright || bool || true || If ''false'', removes copyright message from board.<br />
|-<br />
| zoomfactor || positive float || 1.0 || Sets zoom factor on the board.<br />
|-<br />
| zoomX || positive float || 1.0 || Sets zoom factor in horizontal direction. The final zoom factor in this direction is this value multiplied with zoomfactor.<br />
|-<br />
| zoomY || positive float || 1.0 || Sets zoom factor in vertical direction. The final zoom factor in this direction is this value multiplied with zoomfactor.<br />
|}</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Trigonometric_functions&diff=5931
Trigonometric functions
2013-01-31T11:27:45Z
<p>Michael: </p>
<hr />
<div>The well known trigonometric functions can be visualized on the circle<br />
of radius 1. See [http://en.wikipedia.org/wiki/Trigonometric_functions http://en.wikipedia.org/wiki/Trigonometric_functions] for the definitions.<br />
* '''Tangent''': <math>\tan x = \frac{\sin x}{\cos x}</math><br />
* '''Cotangent''': <math>\cot x = \frac{\cos x}{\sin x}</math><br />
* '''Secant''': <math>\sec x = \frac{1}{\cos x}</math><br />
* '''Cosecant''': <math>\csc x = \frac{1}{\sin x}</math><br />
<br />
<jsxgraph width="600" height="600" box="box"><br />
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-3, 3, 3, -3]});<br />
var ax = brd.createElement('line',[[0,0],[1,0]],{visible:false});<br />
var ay = brd.createElement('line',[[0,0],[0,1]],{visible:false});<br />
<br />
var p0 = brd.createElement('point',[0,0],{fixed:true,visible:false});<br />
var p1 = brd.createElement('point',[1,0],{name:'',visible:false,fixed:true});<br />
var c = brd.createElement('circle',[p0,p1],{dash:2,strokeWidth:1,strokeOpacity:0.6});<br />
var p2 = brd.createElement('glider',[0.4,1.0,c],{name:'',withLabel:false});<br />
var p3 = brd.createElement('point',[function(){return p2.X();},0.0],{visible:false,name:'',withLabel:false});<br />
var p4 = brd.createElement('point',[0.0,function(){return p2.Y();}],{visible:false,name:'',withLabel:false});<br />
<br />
brd.createElement('line',[p0,p2],{straightFirst:false,straightLast:false,strokeColor:'black'}); // Hypotenuse<br />
brd.createElement('line',[p2,p3],{straightFirst:false,straightLast:false,strokeColor:'red'}); // sin<br />
brd.createElement('line',[p2,p4],{straightFirst:false,straightLast:false,strokeColor:'red'}); // cos<br />
<br />
var t = brd.createElement('tangent',[p2],{visible:false});<br />
var p5 = brd.createElement('point',[brd.intersectionFunc(t,ax,0)],{visible:false,name:'',withLabel:false});<br />
var p6 = brd.createElement('point',[brd.intersectionFunc(t,ay,0)],{visible:false,name:'',withLabel:false});<br />
brd.createElement('line',[p5,p6],{straightFirst:false,straightLast:false}); // tan + cot<br />
brd.createElement('line',[p0,p6],{straightFirst:false,straightLast:false,strokeColor:'green'}); // csc<br />
brd.createElement('line',[p0,p5],{straightFirst:false,straightLast:false,strokeColor:'green'}); // sec<br />
<br />
brd.createElement('text',[<br />
function(){return (p0.X()+p2.X())*0.5;},<br />
function(){return (p0.Y()+p2.Y())*0.5;},<br />
'1'],{});<br />
<br />
brd.createElement('text',[<br />
function(){return (p2.X()+p4.X())*0.3;},<br />
function(){return (p2.Y()+p4.Y())*0.5;},<br />
'cos'],{});<br />
<br />
brd.createElement('text',[<br />
function(){return (p2.X()+p3.X())*0.5;},<br />
function(){return (p2.Y()+p3.Y())*0.5;},<br />
'sin'],{});<br />
<br />
brd.createElement('text',[<br />
function(){return 0.1+(p2.X()+p5.X())*0.5;},<br />
function(){return 0.1+(p2.Y()+p5.Y())*0.5;},<br />
'tan'],{});<br />
<br />
brd.createElement('text',[<br />
function(){return 0.1+(p2.X()+p6.X())*0.5;},<br />
function(){return 0.1+(p2.Y()+p6.Y())*0.5;},<br />
'cot'],{});<br />
<br />
brd.createElement('text',[<br />
function(){return -0.2+(p0.X()+p6.X())*0.5;},<br />
function(){return (p0.Y()+p6.Y())*0.5;},<br />
'csc'],{});<br />
<br />
brd.createElement('text',[<br />
function(){return (p0.X()+p5.X())*0.5;},<br />
function(){return (p0.Y()+p5.Y())*0.5;},<br />
'sec'],{});<br />
</jsxgraph><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]<br />
[[Category:Calculus]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Bounding_box&diff=5930
Bounding box
2013-01-31T11:27:08Z
<p>Michael: </p>
<hr />
<div>The bounding box defines the viewport of the board, i.e. the portion of the <math>\mathbb{R}^2</math> that is shown. The JavaScript code <br />
<source lang="javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], keepaspectratio: true, axis:true});<br />
</source><br />
sets the vertical and horizontal units and the position of the origin such that<br />
the upper left corner of the drawing panel has position (-5,10) and the lower right<br />
corner of the drawing panel has position (5,-2).<br />
<html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], keepaspectratio: true, axis:true});<br />
</script><br />
</html><br />
The source code of the page looks like this:<br />
<source lang="xml"><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px;"></div><br />
<script type="text/javascript"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], axis:true});<br />
</script><br />
</source><br />
<br />
[[Category:Examples]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Parametric_curve_plotter&diff=5929
Parametric curve plotter
2013-01-31T11:23:13Z
<p>Michael: </p>
<hr />
<div><html><br />
<p><br />
<textarea cols=60 rows=4 id="eingabe">function x(t) {return Math.cos(t); };<br />
function y(t) {return Math.sin(t); };</textarea><br /><br />
<input type="button" value="plot" onClick="plot()"><br />
<input type="button" value="clear all" onClick="clearAll()"><br />
</p><br />
</html><br />
<jsxgraph width="500" height="500"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});<br />
a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});<br />
b = board.createElement('slider', [[0,-2],[3,-2],[0,1,4*Math.PI]], {style:6, name:'b'});<br />
function plot(){<br />
eval(document.getElementById("eingabe").value);<br />
graph = board.createElement('curve', [<br />
x,y, <br />
function(){return a.Value();}, <br />
function(){return b.Value();}<br />
], <br />
{strokeColor:'red', strokeWidth:2}<br />
);<br />
board.update();<br />
} <br />
<br />
function clearAll() { <br />
JXG.JSXGraph.freeBoard(board);<br />
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-5, 5, 5, -5]});<br />
a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});<br />
b = board.createElement('slider', [[0,-2],[3,-2],[0,1,4*Math.PI]], {style:6, name:'b'});<br />
}<br />
<br />
plot();<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});<br />
a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});<br />
b = board.createElement('slider', [[0,-2],[3,-2],[0,1,4*Math.PI]], {style:6, name:'b'});<br />
function plot(){<br />
eval(document.getElementById("eingabe").value);<br />
graph = board.createElement('curve', [<br />
x,y, <br />
function(){return a.Value();}, <br />
function(){return b.Value();}<br />
], <br />
{strokeColor:'red', strokeWidth:2}<br />
);<br />
board.update();<br />
} <br />
<br />
function clearAll() { <br />
JXG.JSXGraph.freeBoard(board);<br />
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-5, 5, 5, -5]});<br />
a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});<br />
b = board.createElement('slider', [[0,-2],[3,-2],[0,1,4*Math.PI]], {style:6, name:'b'});<br />
}<br />
<br />
plot();<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]<br />
[[Category:Curves]]</div>
Michael
https://jsxgraph.org/wiki/index.php?title=Polar_curve_plotter&diff=5928
Polar curve plotter
2013-01-31T11:22:54Z
<p>Michael: </p>
<hr />
<div><html><br />
<p><br />
<textarea cols=60 rows=4 id="eingabe">function r(t) {return 0.2*t; };<br />
</textarea><br /><br />
<input type="button" value="plot" onClick="plot()"><br />
<input type="button" value="clear all" onClick="clearAll()"><br />
</p><br />
</html><br />
<jsxgraph width="500" height="500"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});<br />
a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});<br />
b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'});<br />
function plot(){<br />
eval(document.getElementById("eingabe").value);<br />
graph = board.createElement('curve', [<br />
r, [0,0], <br />
function(){return a.Value();}, <br />
function(){return b.Value();}<br />
], <br />
{curveType:'polar',strokeColor:'red', strokeWidth:2}<br />
);<br />
board.update();<br />
} <br />
<br />
function clearAll() { <br />
JXG.JSXGraph.freeBoard(board);<br />
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-5, 5, 5, -5]});<br />
a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});<br />
b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'});<br />
}<br />
<br />
plot();<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});<br />
a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});<br />
b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'});<br />
function plot(){<br />
eval(document.getElementById("eingabe").value);<br />
graph = board.createElement('curve', [<br />
r, [0,0], <br />
function(){return a.Value();}, <br />
function(){return b.Value();}<br />
], <br />
{curveType:'polar',strokeColor:'red', strokeWidth:2}<br />
);<br />
board.update();<br />
} <br />
<br />
function clearAll() { <br />
JXG.JSXGraph.freeBoard(board);<br />
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-5, 5, 5, -5]});<br />
a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});<br />
b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'});<br />
}<br />
<br />
plot();<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]<br />
[[Category:Curves]]</div>
Michael