Time series - Revision history

Michael at 07:35, 9 June 2011

2011-06-09T07:35:22Z

← Older revision		Revision as of 07:35, 9 June 2011
Line 33:		Line 33:
	</jsxgraph>		</jsxgraph>
	====JavaScript code====		====JavaScript code====
	<source lang="~~xml~~">		<source lang="javascript">
	~~<jsxgraph width="700" height="400">~~		brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-6, 150, 64, -50]});
	brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-6, 150, 64, -50]});

	var inputString = document.getElementById('inputData').value; // Read the data as string		var inputString = document.getElementById('inputData').value; // Read the data as string
	inputString = inputString.replace(/^\s+/, '').replace(/\s+$/, ''); // Remove leading and trailing whitespace		inputString = inputString.replace(/^\s+/, '').replace(/\s+$/, ''); // Remove leading and trailing whitespace
	var lines=inputString.split('\n'); // Split into lines		var lines=inputString.split('\n'); // Split into lines
	var x = [];		var x = [];
	var y = [];		var y = [];
	var startDate;		var startDate;
	for (var i=0;i<lines.length;i++) {		for (var i=0;i<lines.length;i++) {
	var c = lines[i].split(' : ');		var c = lines[i].split(' : ');
	var d = c[0].split('-');		var d = c[0].split('-');
	var v = parseFloat(c[1].replace(/,+/,'.')); // Change 126,5 to 126.5		var v = parseFloat(c[1].replace(/,+/,'.')); // Change 126,5 to 126.5
	var date = new Date(d[0],d[1],d[2]); // Split the date into Year, Month, Day		var date = new Date(d[0],d[1],d[2]); // Split the date into Year, Month, Day
	if (i==0) { startDate = new Date(d[0],d[1],d[2]); } // Keep the first date in memory		if (i==0) { startDate = new Date(d[0],d[1],d[2]); } // Keep the first date in memory
	x[i] = (date.getTime()-startDate.getTime())/ ( 1000.060.060.0*24.0 ); // The x coordinate of a value is the number of days from the first entry		x[i] = (date.getTime()-startDate.getTime())/ ( 1000.060.060.0*24.0 ); // The x coordinate of a value is the number of days from the first entry
	y[i] = v;		y[i] = v;

	}		}
	var plot = brd.create('curve', [x,y], {strokeColor:'red'});		var plot = brd.create('curve', [x,y], {strokeColor:'red'});
	~~</jsxgraph>~~
	</source>		</source>

Line 102:		Line 100:
	</jsxgraph>		</jsxgraph>
	====JavaScript code====		====JavaScript code====
	<source lang="~~xml~~">		<source lang="javascript">
	~~<jsxgraph width="700" height="400" box="jxgbox2">~~		brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]});
	brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]});		var xax = brd2.create('axis',[[0,85],[1,85]]);
	var xax = brd2.create('axis',[[0,85],[1,85]]);		var yax = brd2.create('axis',[[0,0],[0,1]]);
	var yax = brd2.create('axis',[[0,0],[0,1]]);

	inputString = document.getElementById('inputData').value; // Read the data as string		inputString = document.getElementById('inputData').value; // Read the data as string
	inputString = inputString.replace(/^\s+/, '').replace(/\s+$/, ''); // Remove leading and trailing whitespace		inputString = inputString.replace(/^\s+/, '').replace(/\s+$/, ''); // Remove leading and trailing whitespace
	var lines=inputString.split('\n'); // Split into lines		var lines=inputString.split('\n'); // Split into lines
	var p, x1, y1;		var p, x1, y1;
	var x = [];		var x = [];
	var y = [];		var y = [];
	var points = [];		var points = [];

	points.push(brd2.create('point', [0,85], {visible:false, name:'', fixed:true}));		points.push(brd2.create('point', [0,85], {visible:false, name:'', fixed:true}));
	var startDate;		var startDate;
	for (var i=0;i<lines.length;i++) {		for (var i=0;i<lines.length;i++) {
	var c = lines[i].split(' : ');		var c = lines[i].split(' : ');
	var d = c[0].split('-');		var d = c[0].split('-');
	var v = parseFloat(c[1].replace(/,+/,'.')); // Change 126,5 to 126.5		var v = parseFloat(c[1].replace(/,+/,'.')); // Change 126,5 to 126.5
	var date = new Date(d[0],d[1],d[2]); // Split the date into Year, Month, Day		var date = new Date(d[0],d[1],d[2]); // Split the date into Year, Month, Day
	if (i==0) { startDate = new Date(d[0],d[1],d[2]); } // Keep the first date in memory		if (i==0) { startDate = new Date(d[0],d[1],d[2]); } // Keep the first date in memory
	x1 = (date.getTime()-startDate.getTime())/ ( 1000.060.060.0*24.0 ); // The x coordinate of a value is the number of days from the first entry		x1 = (date.getTime()-startDate.getTime())/ ( 1000.060.060.0*24.0 ); // The x coordinate of a value is the number of days from the first entry
	y1 = v;		y1 = v;
	p = brd2.create('point', [x1,y1],		p = brd2.create('point', [x1,y1],
	{strokeWidth:2, strokeColor:'#ffffff',		{strokeWidth:2, strokeColor:'#ffffff',
	highlightStrokeColor:'#0077cc', fillColor:'#0077cc',		highlightStrokeColor:'#0077cc', fillColor:'#0077cc',
	highlightFillColor:'#0077cc', size:4, name:'', fixed:true});		highlightFillColor:'#0077cc', size:4, name:'', fixed:true});
	points.push(p);		points.push(p);
	x.push(x1);		x.push(x1);
	y.push(y1);		y.push(y1);

	}		}
	points.push(brd2.create('point', [x1,85], {visible:false, name:'', fixed:true}));		points.push(brd2.create('point', [x1,85], {visible:false, name:'', fixed:true}));

	// Filled area. We need two additional points [start,0] and [end,0]		// Filled area. We need two additional points [start,0] and [end,0]
	brd2.create('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});		brd2.create('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});

	// Curve:		// Curve:
	brd2.create('curve', [x,y],		brd2.create('curve', [x,y],
	{strokeWidth:3, strokeColor:'#0077cc',		{strokeWidth:3, strokeColor:'#0077cc',
	highlightStrokeColor:'#0077cc'}		highlightStrokeColor:'#0077cc'}
	);		);
	~~</jsxgraph>~~
	</source>		</source>

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

Michael at 07:33, 9 June 2011

2011-06-09T07:33:55Z

← Older revision		Revision as of 07:33, 9 June 2011
Line 12:		Line 12:
	===Simple style===		===Simple style===
	<jsxgraph width="700" height="400">		<jsxgraph width="700" height="400">
	brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, ~~originX~~: 60, ~~originY: 300~~, ~~unitX: 10~~, ~~unitY: 2~~});		brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-6, 150, 64, -50]});

	var inputString = document.getElementById('inputData').value; // Read the data as string		var inputString = document.getElementById('inputData').value; // Read the data as string
Line 30:		Line 30:

	}		}
	var plot = brd.~~createElement~~('curve', [x,y], {strokeColor:'red'});		var plot = brd.create('curve', [x,y], {strokeColor:'red'});
	</jsxgraph>		</jsxgraph>
	====JavaScript code====		====JavaScript code====
	<source lang="xml">		<source lang="xml">
	<jsxgraph width="700" height="400">		<jsxgraph width="700" height="400">
	brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, ~~originX~~: 60, ~~originY: 300~~, ~~unitX: 10~~, ~~unitY: 2~~});		brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-6, 150, 64, -50]});

	var inputString = document.getElementById('inputData').value; // Read the data as string		var inputString = document.getElementById('inputData').value; // Read the data as string
Line 53:		Line 53:

	}		}
	var plot = brd.~~createElement~~('curve', [x,y], {strokeColor:'red'});		var plot = brd.create('curve', [x,y], {strokeColor:'red'});
	</jsxgraph>		</jsxgraph>
	</source>		</source>
Line 60:		Line 60:
	<jsxgraph width="700" height="400" box="jxgbox2">		<jsxgraph width="700" height="400" box="jxgbox2">
	brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]});		brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]});
	var xax = brd2.~~createElement~~('axis',[[0,85],[1,85]]);		var xax = brd2.create('axis',[[0,85],[1,85]]);
	var yax = brd2.~~createElement~~('axis',[[0,0],[0,1]]);		var yax = brd2.create('axis',[[0,0],[0,1]]);

	inputString = document.getElementById('inputData').value; // Read the data as string		inputString = document.getElementById('inputData').value; // Read the data as string
Line 71:		Line 71:
	var points = [];		var points = [];

	points.push(brd2.~~createElement~~('point', [0,85], {visible:false, name:'', fixed:true}));		points.push(brd2.create('point', [0,85], {visible:false, name:'', fixed:true}));
	var startDate;		var startDate;
	for (var i=0;i<lines.length;i++) {		for (var i=0;i<lines.length;i++) {
Line 81:		Line 81:
	x1 = (date.getTime()-startDate.getTime())/ ( 1000.060.060.0*24.0 ); // The x coordinate of a value is the number of days from the first entry		x1 = (date.getTime()-startDate.getTime())/ ( 1000.060.060.0*24.0 ); // The x coordinate of a value is the number of days from the first entry
	y1 = v;		y1 = v;
	p = brd2.~~createElement~~('point', [x1,y1],		p = brd2.create('point', [x1,y1],
	{strokeWidth:2, strokeColor:'#ffffff',		{strokeWidth:2, strokeColor:'#ffffff',
	highlightStrokeColor:'#0077cc', fillColor:'#0077cc',		highlightStrokeColor:'#0077cc', fillColor:'#0077cc',
	highlightFillColor:'#0077cc', ~~style~~:6, name:'', fixed:true});		highlightFillColor:'#0077cc', size:4, name:'', fixed:true});
	points.push(p);		points.push(p);
	x.push(x1);		x.push(x1);
Line 90:		Line 90:

	}		}
	points.push(brd2.~~createElement~~('point', [x1,85], {visible:false, name:'', fixed:true}));		points.push(brd2.create('point', [x1,85], {visible:false, name:'', fixed:true}));

	// Filled area. We need two additional points [start,85] and [end,85]		// Filled area. We need two additional points [start,85] and [end,85]
	brd2.~~createElement~~('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});		brd2.create('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});

	// Curve:		// Curve:
	brd2.~~createElement~~('curve', [x,y],		brd2.create('curve', [x,y],
	{strokeWidth:3, strokeColor:'#0077cc',		{strokeWidth:3, strokeColor:'#0077cc',
	highlightStrokeColor:'#0077cc'}		highlightStrokeColor:'#0077cc'}
Line 105:		Line 105:
	<jsxgraph width="700" height="400" box="jxgbox2">		<jsxgraph width="700" height="400" box="jxgbox2">
	brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]});		brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]});
	var xax = brd2.~~createElement~~('axis',[[0,85],[1,85]]);		var xax = brd2.create('axis',[[0,85],[1,85]]);
	var yax = brd2.~~createElement~~('axis',[[0,0],[0,1]]);		var yax = brd2.create('axis',[[0,0],[0,1]]);

	inputString = document.getElementById('inputData').value; // Read the data as string		inputString = document.getElementById('inputData').value; // Read the data as string
Line 116:		Line 116:
	var points = [];		var points = [];

	points.push(brd2.~~createElement~~('point', [0,85], {visible:false, name:'', fixed:true}));		points.push(brd2.create('point', [0,85], {visible:false, name:'', fixed:true}));
	var startDate;		var startDate;
	for (var i=0;i<lines.length;i++) {		for (var i=0;i<lines.length;i++) {
Line 126:		Line 126:
	x1 = (date.getTime()-startDate.getTime())/ ( 1000.060.060.0*24.0 ); // The x coordinate of a value is the number of days from the first entry		x1 = (date.getTime()-startDate.getTime())/ ( 1000.060.060.0*24.0 ); // The x coordinate of a value is the number of days from the first entry
	y1 = v;		y1 = v;
	p = brd2.~~createElement~~('point', [x1,y1],		p = brd2.create('point', [x1,y1],
	{strokeWidth:2, strokeColor:'#ffffff',		{strokeWidth:2, strokeColor:'#ffffff',
	highlightStrokeColor:'#0077cc', fillColor:'#0077cc',		highlightStrokeColor:'#0077cc', fillColor:'#0077cc',
	highlightFillColor:'#0077cc', ~~style~~:6, name:'', fixed:true});		highlightFillColor:'#0077cc', size:4, name:'', fixed:true});
	points.push(p);		points.push(p);
	x.push(x1);		x.push(x1);
Line 135:		Line 135:

	}		}
	points.push(brd2.~~createElement~~('point', [x1,85], {visible:false, name:'', fixed:true}));		points.push(brd2.create('point', [x1,85], {visible:false, name:'', fixed:true}));

	// Filled area. We need two additional points [start,0] and [end,0]		// Filled area. We need two additional points [start,0] and [end,0]
	brd2.~~createElement~~('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});		brd2.create('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});

	// Curve:		// Curve:
	brd2.~~createElement~~('curve', [x,y],		brd2.create('curve', [x,y],
	{strokeWidth:3, strokeColor:'#0077cc',		{strokeWidth:3, strokeColor:'#0077cc',
	highlightStrokeColor:'#0077cc'}		highlightStrokeColor:'#0077cc'}

A WASSERMANN at 12:25, 29 June 2009

2009-06-29T12:25:10Z

← Older revision		Revision as of 12:25, 29 June 2009
Line 59:		Line 59:
	===Time series - Google style===		===Time series - Google style===
	<jsxgraph width="700" height="400" box="jxgbox2">		<jsxgraph width="700" height="400" box="jxgbox2">
	brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,~~135~~,60,80]});		brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]});
	var xax = brd2.createElement('axis',[[0,85],[1,85]]);		var xax = brd2.createElement('axis',[[0,85],[1,85]]);
	var yax = brd2.createElement('axis',[[0,0],[0,1]]);		var yax = brd2.createElement('axis',[[0,0],[0,1]]);
Line 104:		Line 104:
	<source lang="xml">		<source lang="xml">
	<jsxgraph width="700" height="400" box="jxgbox2">		<jsxgraph width="700" height="400" box="jxgbox2">
	brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,~~135~~,60,80]});		brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]});
	var xax = brd2.createElement('axis',[[0,85],[1,85]]);		var xax = brd2.createElement('axis',[[0,85],[1,85]]);
	var yax = brd2.createElement('axis',[[0,0],[0,1]]);		var yax = brd2.createElement('axis',[[0,0],[0,1]]);

A WASSERMANN at 12:24, 29 June 2009

2009-06-29T12:24:28Z

← Older revision		Revision as of 12:24, 29 June 2009
Line 59:		Line 59:
	===Time series - Google style===		===Time series - Google style===
	<jsxgraph width="700" height="400" box="jxgbox2">		<jsxgraph width="700" height="400" box="jxgbox2">
	brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,~~140~~,60,80]});		brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,135,60,80]});
	var xax = brd2.createElement('axis',[[0,85],[1,85]]);		var xax = brd2.createElement('axis',[[0,85],[1,85]]);
	var yax = brd2.createElement('axis',[[0,0],[0,1]]);		var yax = brd2.createElement('axis',[[0,0],[0,1]]);
Line 104:		Line 104:
	<source lang="xml">		<source lang="xml">
	<jsxgraph width="700" height="400" box="jxgbox2">		<jsxgraph width="700" height="400" box="jxgbox2">
	brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,~~140~~,60,80]});		brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,135,60,80]});
	var xax = brd2.createElement('axis',[[0,85],[1,85]]);		var xax = brd2.createElement('axis',[[0,85],[1,85]]);
	var yax = brd2.createElement('axis',[[0,0],[0,1]]);		var yax = brd2.createElement('axis',[[0,0],[0,1]]);

A WASSERMANN at 12:23, 29 June 2009

2009-06-29T12:23:54Z

← Older revision		Revision as of 12:23, 29 June 2009
Line 59:		Line 59:
	===Time series - Google style===		===Time series - Google style===
	<jsxgraph width="700" height="400" box="jxgbox2">		<jsxgraph width="700" height="400" box="jxgbox2">
	brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,140,65,80]});		brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,140,60,80]});
	var xax = brd2.createElement('axis',[[0,85],[1,85]]);		var xax = brd2.createElement('axis',[[0,85],[1,85]]);
	var yax = brd2.createElement('axis',[[0,0],[0,1]]);		var yax = brd2.createElement('axis',[[0,0],[0,1]]);
Line 104:		Line 104:
	<source lang="xml">		<source lang="xml">
	<jsxgraph width="700" height="400" box="jxgbox2">		<jsxgraph width="700" height="400" box="jxgbox2">
	~~var height = 400;~~		brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,140,60,80]});
	~~var unitY = height/(130-80);~~
	~~var originY = unitY*130;~~

	brd2 = JXG.JSXGraph.initBoard('jxgbox2', {~~originX~~: 60, ~~originY: originY~~, ~~unitX: 10~~, ~~unitY: unitY~~});
	var xax = brd2.createElement('axis',[[0,85],[1,85]]);		var xax = brd2.createElement('axis',[[0,85],[1,85]]);
	var yax = brd2.createElement('axis',[[0,0],[0,1]]);		var yax = brd2.createElement('axis',[[0,0],[0,1]]);

A WASSERMANN at 12:23, 29 June 2009

2009-06-29T12:23:28Z

← Older revision		Revision as of 12:23, 29 June 2009
Line 59:		Line 59:
	===Time series - Google style===		===Time series - Google style===
	<jsxgraph width="700" height="400" box="jxgbox2">		<jsxgraph width="700" height="400" box="jxgbox2">
	brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox[-5,140,65,80]});		brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,140,65,80]});
	var xax = brd2.createElement('axis',[[0,85],[1,85]]);		var xax = brd2.createElement('axis',[[0,85],[1,85]]);
	var yax = brd2.createElement('axis',[[0,0],[0,1]]);		var yax = brd2.createElement('axis',[[0,0],[0,1]]);

A WASSERMANN at 12:23, 29 June 2009

2009-06-29T12:23:18Z

← Older revision		Revision as of 12:23, 29 June 2009
Line 59:		Line 59:
	===Time series - Google style===		===Time series - Google style===
	<jsxgraph width="700" height="400" box="jxgbox2">		<jsxgraph width="700" height="400" box="jxgbox2">
	~~var height = 400;~~		brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox[-5,140,65,80]});
	~~var unitY = height/(130-80);~~
	~~var originY = unitY*130;~~

	brd2 = JXG.JSXGraph.initBoard('jxgbox2', {~~originX: 60~~, ~~originY: originY~~, ~~unitX: 10~~, ~~unitY: unitY~~});
	var xax = brd2.createElement('axis',[[0,85],[1,85]]);		var xax = brd2.createElement('axis',[[0,85],[1,85]]);
	var yax = brd2.createElement('axis',[[0,0],[0,1]]);		var yax = brd2.createElement('axis',[[0,0],[0,1]]);

A WASSERMANN at 17:51, 22 June 2009

2009-06-22T17:51:14Z

← Older revision		Revision as of 17:51, 22 June 2009
Line 146:		Line 146:

	// Filled area. We need two additional points [start,0] and [end,0]		// Filled area. We need two additional points [start,0] and [end,0]
	brd2.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'});		brd2.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});

	// Curve:		// Curve:

A WASSERMANN at 17:50, 22 June 2009

2009-06-22T17:50:49Z

← Older revision		Revision as of 17:50, 22 June 2009
Line 97:		Line 97:

	// Filled area. We need two additional points [start,85] and [end,85]		// Filled area. We need two additional points [start,85] and [end,85]
	brd2.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'});		brd2.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});

	// Curve:		// Curve:

A WASSERMANN at 17:50, 22 June 2009

2009-06-22T17:50:16Z

← Older revision		Revision as of 17:50, 22 June 2009
Line 75:		Line 75:
	var points = [];		var points = [];

	points.push(brd2.createElement('point', [0,0], {visible:false, name:'', fixed:true}));		points.push(brd2.createElement('point', [0,85], {visible:false, name:'', fixed:true}));
	var startDate;		var startDate;
	for (var i=0;i<lines.length;i++) {		for (var i=0;i<lines.length;i++) {
Line 94:		Line 94:

	}		}
	points.push(brd2.createElement('point', [x1,0], {visible:false, name:'', fixed:true}));		points.push(brd2.createElement('point', [x1,85], {visible:false, name:'', fixed:true}));

	// Filled area. We need two additional points [start,0] and [end,0]		// Filled area. We need two additional points [start,85] and [end,85]
	brd2.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'});		brd2.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'});

Line 124:		Line 124:
	var points = [];		var points = [];

	points.push(brd2.createElement('point', [0,0], {visible:false, name:'', fixed:true}));		points.push(brd2.createElement('point', [0,85], {visible:false, name:'', fixed:true}));
	var startDate;		var startDate;
	for (var i=0;i<lines.length;i++) {		for (var i=0;i<lines.length;i++) {
Line 143:		Line 143:

	}		}
	points.push(brd2.createElement('point', [x1,0], {visible:false, name:'', fixed:true}));		points.push(brd2.createElement('point', [x1,85], {visible:false, name:'', fixed:true}));

	// Filled area. We need two additional points [start,0] and [end,0]		// Filled area. We need two additional points [start,0] and [end,0]