Dynamic bar chart - Revision history

A WASSERMANN at 12:42, 12 March 2020

2020-03-12T12:42:41Z

← Older revision		Revision as of 12:42, 12 March 2020
Line 61:		Line 61:
	width:0.8,		width:0.8,
	labels:f,		labels:f,
	~~colorArray~~: colors,		colors: colors,
	shadow:true		shadow:true
	});		});

A WASSERMANN at 12:24, 12 March 2020

2020-03-12T12:24:33Z

← Older revision		Revision as of 12:24, 12 March 2020
Line 14:		Line 14:
	function(){return (s.Value()*3.5).toFixed(2);},		function(){return (s.Value()*3.5).toFixed(2);},
	function(){return (s.Value()*2).toFixed(2);},		function(){return (s.Value()*2).toFixed(2);},
	function(){return (s.Value()*(-1.25)).toFixed(2);}		function(){return (s.Value()*(-1.25)).toFixed(2);
	];		}];
	var colors = ['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'];		var colors = ['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'];

	var chart = board.create('chart', [f], {		var chart = board.create('chart', [f], {
	chartStyle:'bar',		chartStyle:'bar',
Line 23:		Line 24:
	colorArray: colors,		colorArray: colors,
	shadow:true		shadow:true
	});		});

	var leg = board.create('legend', [10, 8.5], {labels: f, colorArray: colors});		var leg = board.create('legend', [10, 8.5], {labels: f, colorArray: colors});
	var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
			var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
	var chart2 = board.create('chart', dataArr, {chartStyle:'line,point'});		var chart2 = board.create('chart', dataArr, {chartStyle:'line,point'});
	chart2[0].setProperty('strokeColor:black','strokeWidth:2','shadow:true');		chart2[0].setProperty('strokeColor:black','strokeWidth:2','shadow:true');

A WASSERMANN at 12:22, 12 March 2020

2020-03-12T12:22:35Z

← Older revision		Revision as of 12:22, 12 March 2020
Line 3:		Line 3:
	board.suspendUpdate();		board.suspendUpdate();

	var s = board.~~createElement~~('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});		var s = board.create('slider', [[1,8],[4,8],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
	var f = [function(){return (s.Value()*4.5).toFixed(2);},		var f = [function(){return (s.Value()*4.5).toFixed(2);},
	function(){return (s.Value()*(-1)).toFixed(2);},		function(){return (s.Value()*(-1)).toFixed(2);},
Line 17:		Line 17:
	];		];
	var colors = ['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'];		var colors = ['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'];
	var chart = board.~~createElement~~('chart', [f],		var chart = board.create('chart', [f], {
	{chartStyle:'bar', width:0.8, labels:f,		chartStyle:'bar',
	colorArray:colors, shadow:true});		width:0.8,
			labels:f,
			colorArray: colors,
			shadow:true
			});

	var leg = board.create('legend', [1, 8], {labels: f, colorArray: colors});		var leg = board.create('legend', [10, 8.5], {labels: f, colorArray: colors});
	var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];		var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
	var chart2 = board.~~createElement~~('chart', dataArr, {chartStyle:'line,point'});		var chart2 = board.create('chart', dataArr, {chartStyle:'line,point'});
	chart2[0].setProperty('strokeColor:black','strokeWidth:2','shadow:true');		chart2[0].setProperty('strokeColor:black','strokeWidth:2','shadow:true');
	for(var i=0; i<11;i++) {		for (var i=0; i<11;i++) {
	chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:2});		chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:2});
	}		}
Line 34:		Line 38:

	<source lang="javascript">		<source lang="javascript">
	board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1, 9, 13, -3], axis:true}});		board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1, 9, 13, -3], axis:true});
	board.suspendUpdate();		board.suspendUpdate();

	var s = board.~~createElement~~('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});		var s = board.create('slider', [[1,8],[4,8],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
	var f = [function(){return (s.Value()*4.5).toFixed(2);},		var f = [function(){return (s.Value()*4.5).toFixed(2);},
	function(){return (s.Value()*(-1)).toFixed(2);},		function(){return (s.Value()*(-1)).toFixed(2);},
Line 50:		Line 54:
	function(){return (s.Value()*(-1.25)).toFixed(2);}		function(){return (s.Value()*(-1.25)).toFixed(2);}
	];		];
	var ~~chart~~ = ~~board.createElement('chart', [f],~~		var colors = ['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'];
	~~{chartStyle:'bar', width:0.8, labels:f,~~		var chart = board.create('chart', [f], {
	~~colorArray:~~['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'], shadow:true});		chartStyle:'bar',
			width:0.8,
			labels:f,
			colorArray: colors,
			shadow:true
			});

			var leg = board.create('legend', [10, 8.5], {labels: f, colorArray: colors});
	var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];		var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
	var chart2 = board.~~createElement~~('chart', dataArr, {chartStyle:'line,point'});		var chart2 = board.create('chart', dataArr, {chartStyle:'line,point'});
	chart2[0].setProperty('strokeColor:black','strokeWidth:2','shadow:true');		chart2[0].setProperty('strokeColor:black','strokeWidth:2','shadow:true');
	for(var i=0; i<11;i++) {		for (var i=0; i<11;i++) {
	chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:2});		chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:2});
	}		}
	board.unsuspendUpdate();		board.unsuspendUpdate();</source>
	</source>

	[[Category:Examples]]		[[Category:Examples]]
	[[Category:Charts]]		[[Category:Charts]]

A WASSERMANN at 12:19, 12 March 2020

2020-03-12T12:19:46Z

← Older revision		Revision as of 12:19, 12 March 2020
Line 16:		Line 16:
	function(){return (s.Value()*(-1.25)).toFixed(2);}		function(){return (s.Value()*(-1.25)).toFixed(2);}
	];		];
			var colors = ['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'];
	var chart = board.createElement('chart', [f],		var chart = board.createElement('chart', [f],
	{chartStyle:'bar', width:0.8, labels:f,		{chartStyle:'bar', width:0.8, labels:f,
	colorArray:~~['#8E1B77'~~,'~~#BE1679~~',~~'#DC1765'~~,~~'#DA2130'~~,~~'#DB311B','#DF4917','#E36317'~~,~~'#E87F1A','#F1B112','#FCF302','#C1E212'], shadow~~:~~true~~});		colorArray:colors, shadow:true});

			var leg = board.create('legend', [1, 8], {labels: f, colorArray: colors});
	var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];		var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
	var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});		var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});

A WASSERMANN at 16:24, 20 February 2013

2013-02-20T16:24:13Z

← Older revision		Revision as of 16:24, 20 February 2013
Line 24:		Line 24:
	chart2[0].setProperty('strokeColor:black','strokeWidth:2','shadow:true');		chart2[0].setProperty('strokeColor:black','strokeWidth:2','shadow:true');
	for(var i=0; i<11;i++) {		for(var i=0; i<11;i++) {
	chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:'2'});		chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:2});
	}		}
	board.unsuspendUpdate();		board.unsuspendUpdate();
Line 56:		Line 56:
	chart2[0].setProperty('strokeColor:black','strokeWidth:2','shadow:true');		chart2[0].setProperty('strokeColor:black','strokeWidth:2','shadow:true');
	for(var i=0; i<11;i++) {		for(var i=0; i<11;i++) {
	chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:'2'});		chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:2});
	}		}
	board.unsuspendUpdate();		board.unsuspendUpdate();

A WASSERMANN at 16:50, 14 January 2012

2012-01-14T16:50:14Z

← Older revision		Revision as of 16:50, 14 January 2012
Line 22:		Line 22:
	var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];		var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
	var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});		var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});
	chart2[0].setProperty('strokeColor:black','strokeWidth:~~2pt~~','shadow:true');		chart2[0].setProperty('strokeColor:black','strokeWidth:2','shadow:true');
	for(var i=0; i<11;i++) {		for(var i=0; i<11;i++) {
	chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:'~~2pt~~'});		chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:'2'});
	}		}
	board.unsuspendUpdate();		board.unsuspendUpdate();
Line 54:		Line 54:
	var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];		var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
	var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});		var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});
	chart2[0].setProperty('strokeColor:black','strokeWidth:~~2pt~~','shadow:true');		chart2[0].setProperty('strokeColor:black','strokeWidth:2','shadow:true');
	for(var i=0; i<11;i++) {		for(var i=0; i<11;i++) {
	chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:'~~2pt~~'});		chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:'2'});
	}		}
	board.unsuspendUpdate();		board.unsuspendUpdate();

Michael at 13:46, 7 June 2011

2011-06-07T13:46:03Z

← Older revision		Revision as of 13:46, 7 June 2011
Line 1:		Line 1:
	<jsxgraph width="700" height="600" box="box">		<jsxgraph width="700" height="600" box="box">
	board = JXG.JSXGraph.initBoard('box', {~~originX~~: 50, ~~originY: 450~~, ~~unitX: 50~~, ~~unitY: 50~~, axis:true});		board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1, 9, 13, -3], axis:true});
	board.suspendUpdate();		board.suspendUpdate();

Line 31:		Line 31:
	===The JavaScript code===		===The JavaScript code===

	<source lang="~~xml">~~		<source lang="javascript">
	~~<jsxgraph width="700" height="600" box="box~~">		board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1, 9, 13, -3], axis:true}});
	board = JXG.JSXGraph.initBoard('box', {~~originX~~: 50, ~~originY: 450~~, ~~unitX: 50~~, ~~unitY: 50~~, axis:true});
	board.suspendUpdate();		board.suspendUpdate();

Line 60:		Line 59:
	}		}
	board.unsuspendUpdate();		board.unsuspendUpdate();
	~~</jsxgraph>~~
	</source>		</source>

	[[Category:Examples]]		[[Category:Examples]]
	[[Category:Charts]]		[[Category:Charts]]

A WASSERMANN at 13:50, 13 January 2010

2010-01-13T13:50:35Z

← Older revision		Revision as of 13:50, 13 January 2010
Line 14:		Line 14:
	function(){return (s.Value()*3.5).toFixed(2);},		function(){return (s.Value()*3.5).toFixed(2);},
	function(){return (s.Value()*2).toFixed(2);},		function(){return (s.Value()*2).toFixed(2);},
	function(){return (s.Value()*(-1.25)).toFixed(2);},		function(){return (s.Value()*(-1.25)).toFixed(2);}
	];		];
	var chart = board.createElement('chart', [f],		var chart = board.createElement('chart', [f],
Line 47:		Line 47:
	function(){return (s.Value()*3.5).toFixed(2);},		function(){return (s.Value()*3.5).toFixed(2);},
	function(){return (s.Value()*2).toFixed(2);},		function(){return (s.Value()*2).toFixed(2);},
	function(){return (s.Value()*(-1.25)).toFixed(2);},		function(){return (s.Value()*(-1.25)).toFixed(2);}
	];		];
	var chart = board.createElement('chart', [f],		var chart = board.createElement('chart', [f],

A WASSERMANN at 15:47, 28 September 2009

2009-09-28T15:47:02Z

← Older revision		Revision as of 15:47, 28 September 2009
Line 18:		Line 18:
	var chart = board.createElement('chart', [f],		var chart = board.createElement('chart', [f],
	{chartStyle:'bar', width:0.8, labels:f,		{chartStyle:'bar', width:0.8, labels:f,
	colorArray:['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212']});		colorArray:['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'], shadow:true});

	var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];		var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
Line 51:		Line 51:
	var chart = board.createElement('chart', [f],		var chart = board.createElement('chart', [f],
	{chartStyle:'bar', width:0.8, labels:f,		{chartStyle:'bar', width:0.8, labels:f,
	colorArray:['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212']});		colorArray:['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'], shadow:true});

	var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];		var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];

A WASSERMANN at 15:46, 28 September 2009

2009-09-28T15:46:37Z

← Older revision		Revision as of 15:46, 28 September 2009
Line 33:		Line 33:
	<source lang="xml">		<source lang="xml">
	<jsxgraph width="700" height="600" box="box">		<jsxgraph width="700" height="600" box="box">
	board = JXG.JSXGraph.initBoard('box', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:~~false~~});		board = JXG.JSXGraph.initBoard('box', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:true});
	board.suspendUpdate();		board.suspendUpdate();
	~~board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});~~
	~~board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});~~

	var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});		var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
	var f = [function(){return ~~this.board.round~~(s.Value()*4.5,2);},		var f = [function(){return (s.Value()*4.5).toFixed(2);},
	function(){return ~~this.board.round~~(s.Value()*(-1),2);},		function(){return (s.Value()*(-1)).toFixed(2);},
	function(){return ~~this.board.round~~(s.Value()*3,2);},		function(){return (s.Value()*3).toFixed(2);},
	function(){return ~~this.board.round~~(s.Value()*2,2);},		function(){return (s.Value()*2).toFixed(2);},
	function(){return ~~this.board.round~~(s.Value()*(-0.5),2);},		function(){return (s.Value()*(-0.5)).toFixed(2);},
	function(){return ~~this.board.round~~(s.Value()*5.5,2);},		function(){return (s.Value()*5.5).toFixed(2);},
	function(){return ~~this.board.round~~(s.Value()*2.5,2);},		function(){return (s.Value()*2.5).toFixed(2);},
	function(){return ~~this.board.round~~(s.Value()*(-0.75),2);},		function(){return (s.Value()*(-0.75)).toFixed(2);},
	function(){return ~~this.board.round~~(s.Value()*(3.5),2);},		function(){return (s.Value()*3.5).toFixed(2);},
	function(){return ~~this.board.round~~(s.Value()*(2),2);},		function(){return (s.Value()*2).toFixed(2);},
	function(){return ~~this.board.round~~(s.Value()*(-1.25),2);}		function(){return (s.Value()*(-1.25)).toFixed(2);},
	];		];
	var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f~~});~~		var chart = board.createElement('chart', [f],
	~~chart~~[~~0][0].setProperty(~~'~~fillColor:~~#8E1B77');		{chartStyle:'bar', width:0.8, labels:f,
	~~chart[0][1].setProperty(~~'~~fillColor:~~#BE1679');		colorArray:['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212']});
	~~chart[0][2].setProperty(~~'~~fillColor:~~#DC1765');
	~~chart[0][3].setProperty(~~'~~fillColor:~~#DA2130');
	~~chart[0][4].setProperty(~~'~~fillColor:~~#DB311B');
	~~chart[0][5].setProperty(~~'~~fillColor:~~#DF4917');
	~~chart[0][6].setProperty(~~'~~fillColor:~~#E36317');
	~~chart[0][7].setProperty(~~'~~fillColor:~~#E87F1A');
	~~chart[0][8].setProperty(~~'~~fillColor:~~#F1B112');
	~~chart[0][9].setProperty(~~'~~fillColor:~~#FCF302');
	~~chart[0][10].setProperty(~~'~~fillColor:~~#C1E212');

	var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];		var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
	var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});		var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});
	chart2[0].setProperty('strokeColor:black','strokeWidth:2pt');		chart2[0].setProperty('strokeColor:black','strokeWidth:2pt','shadow:true');
	for(var i=0; i<11;i++) {		for(var i=0; i<11;i++) {
	chart2[1][i].setProperty('strokeColor:black','fillColor:white','~~style~~:9','strokeWidth:2pt');		chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:'2pt'});
	}		}
	board.unsuspendUpdate();		board.unsuspendUpdate();

	</jsxgraph>		</jsxgraph>
	</source>		</source>