Spline chart with special highlight - Revision history

Michael at 15:00, 17 January 2012

2012-01-17T15:00:42Z

← Older revision		Revision as of 15:00, 17 January 2012
Line 118:		Line 118:
	</source>		</source>

	[[Category:~~Examples]]~~		[[Category:Austragungsstueberl]]
	~~[[Category:Charts~~]]

A WASSERMANN at 18:28, 14 January 2012

2012-01-14T18:28:10Z

Michael at 13:57, 8 June 2011

2011-06-08T13:57:54Z

← Older revision		Revision as of 13:57, 8 June 2011
Line 2:		Line 2:

	<jsxgraph width="600" height="600">		<jsxgraph width="600" height="600">
	var board = JXG.JSXGraph.initBoard('jxgbox', {~~originX~~: 50, ~~originY: 500~~, ~~unitX: 50~~, ~~unitY: 50~~});		var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2]});
	board.suspendUpdate();		board.suspendUpdate();
	var dataArr = [[0,1,2,3,4,5,6,7,8,9,10], [4,1,3,2,5,7,1.5,2,4.5,8,5]];		var dataArr = [[0,1,2,3,4,5,6,7,8,9,10], [4,1,3,2,5,7,1.5,2,4.5,8,5]];
Line 8:		Line 8:
	var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});		var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});
	var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});		var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});
	chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px'~~,shadow:true~~});		chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px'});
	board.unsuspendUpdate();		board.unsuspendUpdate();
	var i, animate;		var i, animate;
	for(i=0; i<chart[1].length; i++) {		for(i=0; i<chart[1].length; i++) {
	chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px'~~,shadow:true~~});		chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px'});
	chart[1][i].highlight = function() {		chart[1][i].highlight = function() {
	var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;		var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;
Line 60:		Line 60:

	===JavaScript code to produce this chart===		===JavaScript code to produce this chart===
	<source lang="~~xml">~~		<source lang="javascript">
	~~<jsxgraph width="600" height="600~~">		var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2]});
	var board = JXG.JSXGraph.initBoard('jxgbox', {~~originX~~: 50, ~~originY: 500~~, ~~unitX: 50~~, ~~unitY: 50~~});
	board.suspendUpdate();		board.suspendUpdate();
	var dataArr = [[0,1,2,3,4,5,6,7,8,9,10], [4,1,3,2,5,7,1.5,2,4.5,8,5]];		var dataArr = [[0,1,2,3,4,5,6,7,8,9,10], [4,1,3,2,5,7,1.5,2,4.5,8,5]];
Line 68:		Line 67:
	var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});		var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});
	var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});		var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});
	chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px'~~,shadow:false~~});		chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px'});
	board.unsuspendUpdate();		board.unsuspendUpdate();
	var i, animate;		var i, animate;
	for(i=0; i<chart[1].length; i++) {		for(i=0; i<chart[1].length; i++) {
	chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px'~~,shadow:false~~});		chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px'});
	chart[1][i].highlight = function() {		chart[1][i].highlight = function() {
	var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;		var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;
Line 117:		Line 116:
	}		}
	}		}
	~~</jsxgraph>~~
	</source>		</source>

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

A WASSERMANN at 09:10, 3 August 2010

2010-08-03T09:10:02Z

← Older revision		Revision as of 09:10, 3 August 2010
Line 8:		Line 8:
	var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});		var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});
	var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});		var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});
	chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:~~false~~});		chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});
	board.unsuspendUpdate();		board.unsuspendUpdate();
	var i, animate;		var i, animate;
	for(i=0; i<chart[1].length; i++) {		for(i=0; i<chart[1].length; i++) {
	chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:~~false~~});		chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:true});
	chart[1][i].highlight = function() {		chart[1][i].highlight = function() {
	var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;		var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;

A WASSERMANN at 09:03, 3 August 2010

2010-08-03T09:03:35Z

A WASSERMANN at 09:02, 3 August 2010

2010-08-03T09:02:27Z

Show changes

A WASSERMANN at 08:56, 3 August 2010

2010-08-03T08:56:03Z

← Older revision		Revision as of 08:56, 3 August 2010
Line 7:		Line 7:
	var axisx = board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});		var axisx = board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
	var axisy = board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});		var axisy = board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
	var chart = board.createElement('chart', dataArr, {chartStyle:'line~~,spline~~,point',labels:dataArr});		var chart = board.createElement('chart', dataArr, {chartStyle:'line,point',labels:dataArr});
	//chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});		//chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});
	board.unsuspendUpdate();		board.unsuspendUpdate();

A WASSERMANN at 08:53, 3 August 2010

2010-08-03T08:53:13Z

← Older revision		Revision as of 08:53, 3 August 2010
Line 7:		Line 7:
	var axisx = board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});		var axisx = board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
	var axisy = board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});		var axisy = board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
	var chart = board.createElement('chart', dataArr, {chartStyle:'~~radar~~,point',labels:dataArr});		var chart = board.createElement('chart', dataArr, {chartStyle:'line,spline,point',labels:dataArr});
	//chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});		//chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});
	board.unsuspendUpdate();		board.unsuspendUpdate();

A WASSERMANN at 08:52, 3 August 2010

2010-08-03T08:52:55Z

← Older revision		Revision as of 08:52, 3 August 2010
Line 7:		Line 7:
	var axisx = board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});		var axisx = board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
	var axisy = board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});		var axisy = board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
	var chart = board.createElement('chart', dataArr, {chartStyle:'~~fit~~,point',labels:dataArr});		var chart = board.createElement('chart', dataArr, {chartStyle:'radar,point',labels:dataArr});
	//chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});		//chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});
	board.unsuspendUpdate();		board.unsuspendUpdate();

A WASSERMANN at 08:52, 3 August 2010

2010-08-03T08:52:33Z

← Older revision		Revision as of 08:52, 3 August 2010
Line 7:		Line 7:
	var axisx = board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});		var axisx = board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
	var axisy = board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});		var axisy = board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
	var chart = board.createElement('chart', dataArr, {chartStyle:'~~spline~~,point',labels:dataArr});		var chart = board.createElement('chart', dataArr, {chartStyle:'fit,point',labels:dataArr});
	//chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});		//chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});
	board.unsuspendUpdate();		board.unsuspendUpdate();

← Older revision		Revision as of 18:28, 14 January 2012
Line 8:		Line 8:
	var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});		var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});
	var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});		var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});
	chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:~~'3px'~~});		chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:3});
	board.unsuspendUpdate();		board.unsuspendUpdate();
	var i, animate;		var i, animate;
	for(i=0; i<chart[1].length; i++) {		for(i=0; i<chart[1].length; i++) {
	chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:~~'3px'~~});		chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:3});
	chart[1][i].highlight = function() {		chart[1][i].highlight = function() {
	var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;		var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;
Line 67:		Line 67:
	var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});		var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});
	var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});		var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});
	chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:~~'3px'~~});		chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:3});
	board.unsuspendUpdate();		board.unsuspendUpdate();
	var i, animate;		var i, animate;
	for(i=0; i<chart[1].length; i++) {		for(i=0; i<chart[1].length; i++) {
	chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:~~'3px'~~});		chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:3});
	chart[1][i].highlight = function() {		chart[1][i].highlight = function() {
	var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;		var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;

← Older revision		Revision as of 09:03, 3 August 2010
Line 7:		Line 7:
	var axisx = board.create('axis', [[0,0], [1,0]], {strokeColor:'black'});		var axisx = board.create('axis', [[0,0], [1,0]], {strokeColor:'black'});
	var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});		var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});
	var chart = board.create('chart', dataArr, {chartStyle:'~~line~~,point',labels:dataArr});		var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});
	chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:false});		chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:false});
	board.unsuspendUpdate();		board.unsuspendUpdate();
	var i, animate;		var i, animate;
	for(i=0; i<chart[1].length; i++) {		for(i=0; i<chart[1].length; i++) {
	~~//chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:true});~~
	chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:false});		chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:false});
	chart[1][i].highlight = function() {		chart[1][i].highlight = function() {
Line 68:		Line 67:
	var axisx = board.create('axis', [[0,0], [1,0]], {strokeColor:'black'});		var axisx = board.create('axis', [[0,0], [1,0]], {strokeColor:'black'});
	var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});		var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});
	var chart = board.create('chart', dataArr, {chartStyle:'~~line~~,point',labels:dataArr});		var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});
	chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:false});		chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:false});
	board.unsuspendUpdate();		board.unsuspendUpdate();
	var i, animate;		var i, animate;
	for(i=0; i<chart[1].length; i++) {		for(i=0; i<chart[1].length; i++) {
	~~//chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:true});~~
	chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:false});		chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:false});
	chart[1][i].highlight = function() {		chart[1][i].highlight = function() {