Data plot: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
| (20 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<jsxgraph width=" | <jsxgraph width="700" height="500"> | ||
var color = ['blue','red',' | var color = ['blue','red','magenta', 'green', 'black','yellow']; | ||
var nr = 0; | var nr = 0; | ||
var maxX = 0.0; | var maxX = 0.0; | ||
var maxY = 0.0; | var maxY = 0.0; | ||
var minY = 100000.0; | |||
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[- | var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-1,5000,25,-400],axis:true}); | ||
var plotData = function() { | var plotData = function() { | ||
| Line 11: | Line 12: | ||
var t = document.getElementById('in_data').value; | var t = document.getElementById('in_data').value; | ||
var data = t.split('\n'); | var data = t.split('\n'); | ||
for (i=0;i<data.length;i++) { | for (i=0;i<data.length-1;i++) { | ||
d = data[i].split(';'); | d = data[i].split(';'); | ||
x[i] = d[ | x[i] = d[0]*1.0; | ||
y[i] = d[ | y[i] = d[1]*1.0; | ||
if (x[i]>maxX) maxX = x[i]; | if (x[i]>maxX) maxX = x[i]; | ||
if (y[i]>maxY) maxY = y[i]; | if (y[i]>maxY) maxY = y[i]; | ||
if (y[i]<minY) minY = y[i]; | |||
} | } | ||
brd.setBoundingBox([- | brd.setBoundingBox([-1,maxY*1.01,maxX*1.05,minY*0.95]); | ||
var c = brd.create('curve',[x,y],{strokeColor:color[nr%color.length]}); | var c = brd.create('curve',[x,y],{strokeColor:color[nr%color.length]}); | ||
nr++; | nr++; | ||
brd.update(); | brd.update(); | ||
} | }; | ||
var | |||
var clearBoard = function() { | |||
JXG.JSXGraph.freeBoard(brd); | JXG.JSXGraph.freeBoard(brd); | ||
brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-100,5000, | brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-100,5000,25,-400],axis:true}); | ||
maxX = 0.0; | maxX = 0.0; | ||
maxY = 0.0; | maxY = 0.0; | ||
} | }; | ||
var clearInput = function() { | var clearInput = function() { | ||
document.getElementById('in_data').value = ''; | document.getElementById('in_data').value = ''; | ||
} | }; | ||
</jsxgraph> | </jsxgraph> | ||
<html> | <html> | ||
<form> | <form> | ||
<input type="button" value="plot data" onClick="plotData()"> | |||
<input type="button" value="clear input" onClick="clearInput()"> | <input type="button" value="clear input" onClick="clearInput()"> | ||
<input type="button" value=" | <input type="button" value="clear all" onClick="clearBoard()"><br> | ||
< | Spalte 1: y-Koordinate, Spalte 2: x-Koordinate | ||
<textarea id="in_data" cols=20 rows=15> | <textarea id="in_data" cols=20 rows=15> | ||
1 ; 7612 | |||
2 ; 7632 | |||
3 ; 7640 | |||
4 ; 7634 | |||
5 ; 7616 | |||
6 ; 7607 | |||
7 ; 7623 | |||
8 ; 7639 | |||
9 ; 7635 | |||
10 ; 7619 | |||
11 ; 7606 | |||
12 ; 7612 | |||
13 ; 7633 | |||
14 ; 7641 | |||
15 ; 7637 | |||
16 ; 7619 | |||
17 ; 7617 | |||
18 ; 6673 | |||
19 ; 7642 | |||
20 ; 7653 | |||
</textarea> | </textarea> | ||
</form> | </form> | ||
</html> | </html> | ||
[[Category:Examples]] | |||
[[Category:Charts]] | |||
