Plot data with slider - Revision history

A WASSERMANN at 09:03, 12 April 2014

2014-04-12T09:03:49Z

← Older revision		Revision as of 09:03, 12 April 2014
Line 1:		Line 1:
			In the first window, the curve can be manipulated by a slider.
	<jsxgraph width="600" height="250" box="box1">		<jsxgraph width="600" height="250" box="box1">
			// This is the original plot data.
	var plotData = [		var plotData = [
	[0, 1, 2, 3, 4, 5, 6, 7],		[0, 1, 2, 3, 4, 5, 6, 7],
Line 8:		Line 10:
	brd1.defaultAxes.y.setAttribute({withLabel: true, name:'u'});		brd1.defaultAxes.y.setAttribute({withLabel: true, name:'u'});

	var mu = brd1.create('slider', [[2.5,30], [5,30], [0, 1, 1]], {name:'μ'});		// Slider between 0 and 1, initially set to 0.8
			var mu = brd1.create('slider', [[2.5,30], [5,30], [0, 0.8, 1]], {name:'μ'});

			// The original data is plotted
	var plot = brd1.create('curve', plotData, {type:'plot'});		var plot = brd1.create('curve', plotData, {type:'plot'});

			// The update routine of the plot is overwritten.
			// The plot data is manipulated by the value of the slider
	plot.updateDataArray = function() {		plot.updateDataArray = function() {
	var i, len = plotData[1].length;		var i, len = plotData[1].length;
Line 20:		Line 27:
	};		};
	</jsxgraph>		</jsxgraph>
			The first window controls the point in the second window.
	<jsxgraph width="600" height="250" box="box2">		<jsxgraph width="600" height="250" box="box2">
	var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[0,50,1.4,-10], axis:true,		var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[0,50,1.4,-10], axis:true,
	keepaspectratio:false, showClearTraces:true});		keepaspectratio:false, showClearTraces:true});

			// This point depends on the data in brd1.
	var p = brd2.create('point', [		var p = brd2.create('point', [
	function() { return mu.Value();},		function() { return mu.Value();},
Line 36:		Line 44:
	{trace: true, name:'\|\|u\|\|_2'});		{trace: true, name:'\|\|u\|\|_2'});

			// Connect brd1 and brd2.
	brd1.addChild(brd2);		brd1.addChild(brd2);
	</jsxgraph>		</jsxgraph>

	===The JavaScript code===		===The JavaScript code===
			Code for the first window:
			<source lang="javascript">
			// This is the original plot data.
			var plotData = [
			[0, 1, 2, 3, 4, 5, 6, 7],
			[40, -1, 1, -40, -40, 1, 1, 40]
			];

			var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[0,50,8,-50], axis:true, keepaspectratio:false});
			brd1.defaultAxes.y.setAttribute({withLabel: true, name:'u'});

			// Slider between 0 and 1, initially set to 0.8
			var mu = brd1.create('slider', [[2.5,30], [5,30], [0, 0.8, 1]], {name:'μ'});

			// The original data is plotted
			var plot = brd1.create('curve', plotData, {type:'plot'});

			// The update routine of the plot is overwritten.
			// The plot data is manipulated by the value of the slider
			plot.updateDataArray = function() {
			var i, len = plotData[1].length;

			this.dataY = [];
			for (i = 0; i < len; i++) {
			this.dataY[i] = plotData[1][i] * Math.asin(mu.Value());
			}
			};
			</source>
			Code for the second window:
	<source lang="javascript">		<source lang="javascript">
			var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[0,50,1.4,-10], axis:true,
			keepaspectratio:false, showClearTraces:true});

			// This point depends on the data in brd1.
			var p = brd2.create('point', [
			function() { return mu.Value();},
			function() {
			var i = 0; len = plot.dataY.length, s = 0;
			for (i = 0; i < len; i++) {
			s += plot.dataY[i] * plot.dataY[i];
			}

			return Math.sqrt(s) / 5; }],
			{trace: true, name:'\|\|u\|\|_2'});

			// Connect brd1 and brd2.
			brd1.addChild(brd2);
	</source>		</source>

	[[Category:Examples]]		[[Category:Examples]]
	[[Category:Calculus]]		[[Category:Calculus]]

A WASSERMANN at 08:58, 12 April 2014

2014-04-12T08:58:20Z

← Older revision		Revision as of 08:58, 12 April 2014
Line 6:		Line 6:

	var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[0,50,8,-50], axis:true, keepaspectratio:false});		var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[0,50,8,-50], axis:true, keepaspectratio:false});
	brd1.~~defaultaxes~~.y.~~setProperty~~({withLabel: true, name:'u'});		brd1.defaultAxes.y.setAttribute({withLabel: true, name:'u'});

	var mu = brd1.create('slider', [[2.5,30], [5,30], [0, 1, 1]], {name:'μ'});		var mu = brd1.create('slider', [[2.5,30], [5,30], [0, 1, 1]], {name:'μ'});

A WASSERMANN at 08:57, 12 April 2014

2014-04-12T08:57:53Z

← Older revision		Revision as of 08:57, 12 April 2014
Line 6:		Line 6:

	var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[0,50,8,-50], axis:true, keepaspectratio:false});		var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[0,50,8,-50], axis:true, keepaspectratio:false});
	brd1.defaultaxes.Y.setProperty({withLabel: true, name:'u'};		brd1.defaultaxes.y.setProperty({withLabel: true, name:'u'});

	var mu = brd1.create('slider', [[2.5,30], [5,30], [0, 1, 1]], {name:'μ'});		var mu = brd1.create('slider', [[2.5,30], [5,30], [0, 1, 1]], {name:'μ'});

A WASSERMANN at 08:56, 12 April 2014

2014-04-12T08:56:30Z

← Older revision		Revision as of 08:56, 12 April 2014
Line 6:		Line 6:

	var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[0,50,8,-50], axis:true, keepaspectratio:false});		var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[0,50,8,-50], axis:true, keepaspectratio:false});
			brd1.defaultaxes.Y.setProperty({withLabel: true, name:'u'};

	var mu = brd1.create('slider', [[2.5,30], [5,30], [0, 1, 1]], {name:'μ'});		var mu = brd1.create('slider', [[2.5,30], [5,30], [0, 1, 1]], {name:'μ'});

A WASSERMANN at 08:54, 12 April 2014

2014-04-12T08:54:53Z

← Older revision		Revision as of 08:54, 12 April 2014
Line 21:		Line 21:

	<jsxgraph width="600" height="250" box="box2">		<jsxgraph width="600" height="250" box="box2">
	var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[0,50,1.4,-3], axis:true,		var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[0,50,1.4,-10], axis:true,
	keepaspectratio:false, showClearTraces:true});		keepaspectratio:false, showClearTraces:true});

A WASSERMANN at 08:54, 12 April 2014

2014-04-12T08:54:29Z

← Older revision		Revision as of 08:54, 12 April 2014
Line 21:		Line 21:

	<jsxgraph width="600" height="250" box="box2">		<jsxgraph width="600" height="250" box="box2">
	var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[0,50,1.4,-1], axis:true,		var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[0,50,1.4,-3], axis:true,
	keepaspectratio:false, showClearTraces:true});		keepaspectratio:false, showClearTraces:true});

A WASSERMANN at 08:52, 12 April 2014

2014-04-12T08:52:51Z

← Older revision		Revision as of 08:52, 12 April 2014
Line 15:		Line 15:
	this.dataY = [];		this.dataY = [];
	for (i = 0; i < len; i++) {		for (i = 0; i < len; i++) {
	this.dataY[i] = plotData[1][i] * Math.~~sin~~(mu.Value());		this.dataY[i] = plotData[1][i] * Math.asin(mu.Value());
	}		}
	};		};
Line 32:		Line 32:
	}		}

	return Math.sqrt(s); }],		return Math.sqrt(s) / 5; }],
	{trace: true, name:'\|\|u\|\|_2'});		{trace: true, name:'\|\|u\|\|_2'});

A WASSERMANN at 08:52, 12 April 2014

2014-04-12T08:52:12Z

← Older revision		Revision as of 08:52, 12 April 2014
Line 15:		Line 15:
	this.dataY = [];		this.dataY = [];
	for (i = 0; i < len; i++) {		for (i = 0; i < len; i++) {
	this.dataY[i] = plotData[1][i] * mu.Value();		this.dataY[i] = plotData[1][i] * Math.sin(mu.Value());
	}		}
	};		};

A WASSERMANN at 08:50, 12 April 2014

2014-04-12T08:50:47Z

← Older revision		Revision as of 08:50, 12 April 2014
Line 26:		Line 26:
	var p = brd2.create('point', [		var p = brd2.create('point', [
	function() { return mu.Value();},		function() { return mu.Value();},
	function() { return 1; }],		function() {
	{trace: true});		var i = 0; len = plot.dataY.length, s = 0;
			for (i = 0; i < len; i++) {
			s += plot.dataY[i] * plot.dataY[i];
			}

			return Math.sqrt(s); }],
			{trace: true, name:'\|\|u\|\|_2'});

A WASSERMANN at 08:47, 12 April 2014

2014-04-12T08:47:31Z

← Older revision		Revision as of 08:47, 12 April 2014
Line 21:		Line 21:

	<jsxgraph width="600" height="250" box="box2">		<jsxgraph width="600" height="250" box="box2">
	var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[0,50,1,-1], axis:true,		var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[0,50,1.4,-1], axis:true,
	keepaspectratio:false});		keepaspectratio:false, showClearTraces:true});

	var p = brd2.create('point', [ function() { return mu.Value();}, function() { return 1; }]);		var p = brd2.create('point', [
			function() { return mu.Value();},
			function() { return 1; }],
			{trace: true});