Link to home
Start Free TrialLog in
Avatar of mattjp88
mattjp88Flag for United States of America

asked on

javascript scatter plot??

does anyone know a script that will plot cordinates on a graph??  the inputs bust be in text boxes.  if you know a web site that offers this function.

thanks,
Matt :-)
Avatar of bhnguyen_11
bhnguyen_11
I've used www.quickmath.com before...it's not JavaScript though, but pretty cool...
Avatar of kasandra
kasandra
Sorry, turns out those weren't scatter graphs.

This one:
http://www.js-examples.com/example/?ex=827&mode=0

Draws a scatter graph using a text input, but only takes a single value, not a coordinate. It's not exactly what you want, but may be a good starting point?
Avatar of mattjp88
mattjp88
Flag of United States of America image

ASKER

thanks kasandra,  but thats not what im looking for.  what i want is a script that will plot points like i would want to plot (2,3) on the graph.  now that i think of it it doesnt have to be javascript.  it could be any other language but it has to have inputs as textboxes.  

thanx,
Matt :-)
Avatar of mattjp88
mattjp88
Flag of United States of America image

ASKER

what i thought of is to have a div on my page that has a grey background.  i will have 20 inputs.  10 x and 10 y.  the grey div is located 400 down from the top and 300 from the left.  i also have 10 div's on my page that has an image on it that will be the plot marker.  here is the script that i came up with but it doesnt work.  can you find my error.  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 5.50.4134.100" name=GENERATOR>
<SCRIPT>
function plotit() {
var cor1x=document.frm1.cor1x.value;
var cor1y=document.frm1.cor1y.value;
var cor2x=document.frm1.cor2x.value;
var cor2y=document.frm1.cor2y.value;
var cor3x=document.frm1.cor3x.value;
var cor3y=document.frm1.cor3y.value;
var cor4x=document.frm1.cor4x.value;
var cor4y=document.frm1.cor4y.value;
var cor5x=document.frm1.cor5x.value;
var cor5y=document.frm1.cor5y.value;
var num1=400;
var num2=297;
var plot1y=(num1 - cor1y);
var plot1x=(num2 + cor1x);
document.all.plot1.style.top= plot1y;
document.all.plot1.style.left= plot1x;
document.all.plot1.style.visibility= "visible"
}
</SCRIPT>
</HEAD>
<BODY>
<form name=frm1>
<input NAME=cor1x TYPE="Text" SIZE=3>
<input NAME=cor1y TYPE="Text" SIZE=3><br>
<input NAME=cor2x TYPE="Text" SIZE=3>
<input NAME=cor2y TYPE="Text" SIZE=3><br>
<input NAME=cor3x TYPE="Text" SIZE=3>
<input NAME=cor3y TYPE="Text" SIZE=3><br>
<input NAME=cor4x TYPE="Text" SIZE=3>
<input NAME=cor4y TYPE="Text" SIZE=3><br>
<input NAME=cor5x TYPE="Text" SIZE=3>
<input NAME=cor5y TYPE="Text" SIZE=3><br>
<input TYPE="Button" value=plot onclick="plotit()">
</form>


<DIV id=grey
style="Z-INDEX: 0; LEFT: 300px; WIDTH: 400px; POSITION: absolute; TOP: 10px; HEIGHT: 400px; BACKGROUND-COLOR: gray"></DIV>
<div id=plot1 STYLE="visibility: hidden; POSITION: absolute">
o
</div>
<div id=plot2 STYLE="visibility: hidden; POSITION: absolute">
o
</div>
<div id=plot3 STYLE="visibility: hidden; POSITION: absolute">
o
</div>
<div id=plot4 STYLE="visibility: hidden; POSITION: absolute">
o
</div>
<div id=plot5 STYLE="visibility: hidden; POSITION: absolute">
o
</div>

</BODY></HTML>

feel free to ask any more questions

thanx,
Matt :-)
ASKER CERTIFIED SOLUTION
Avatar of kasandra
kasandra
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of mattjp88
mattjp88
Flag of United States of America image

ASKER

thanx kasandra,

i have one more question.  do you know hoq to draw a line in html or any other web language.  like i want to draw a line from 100px , 100px from the top left to 200px , 200px.  like a graph?

if ya answer this i will give ya more points

thanx,
Matt :-)
Avatar of mattjp88
mattjp88
Flag of United States of America image

ASKER

actually alls i want to know is how to draw a line in html or javascript or some other web language

thanx,
Matt
Avatar of kasandra
kasandra
Hi Matt,

I can't think of any specific way to do it in html or javascript, apart from using a series of dots (eg fullstops). I haven't found a way to draw a solid, angled line using javascript.

cheers,
kasandra
Avatar of mattjp88
mattjp88
Flag of United States of America image

ASKER

thanks,  i found how to do the line thing.  it isnt a solid line.  here is the script if ur interested.  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>

<script type="text/javascript">
var line = function(x1,y1,x2,y2,inc) {
     var distx = x2 - x1;
     var disty = y2 - y1;
     var N = Math.floor(Math.sqrt(distx*distx + disty*disty)/inc);
     var a = getNormalizedAngle(x1,y1,x2,y2);
     var dx = inc * Math.cos(a);
     var dy = -inc * Math.sin(a);
     var path = [];
     for (var i=0;i<=N;i++) {
          path[i*2] = Math.round(x1 +  i*dx);
          path[i*2+1] = Math.round(y1 + i*dy);
     }
     if (path[i*2-2] != x2 || path[i*2-1] != y2) {
          path[i*2] = x2;
          path[i*2+1] = y2;
     }
     j=0;
     xcor=[],ycor=[];
     for(i=0; i<path.length; i+=2)
     {
          xcor[j]=path[i];
          ycor[j]=path[i+1];
          j++;
     }
     for(i=0; i<xcor.length; ++i){
     if(i==0||i==xcor.length-1){
     document.body.insertAdjacentHTML("beforeEnd","<div style=\"position:absolute;width:5px;height"
     +":5px;clip:rect(0,5,5,0);left:"+xcor[i]+"px;top:"+ycor[i]+"px;background-color:"
     +"d\"><\/div>")
     }
     else{
     document.body.insertAdjacentHTML("beforeEnd","<div style=\"position:absolute;width:3px;height"
     +":3px;clip:rect(0,2,2,0);left:"+xcor[i]+"px;top:"+ycor[i]+"px;background-color:black"
     +"\">.<\/div>")
     }
     }
};
getNormalizedAngle = function(x1,y1,x2,y2) {
     var distx = Math.abs(x1-x2);
     var disty = Math.abs(y1-y2);
     if (distx==0 && disty==0) angle = 0;
     else if (distx==0) angle = Math.PI/2;
     else angle = Math.atan(disty/distx);
     if (x1<x2) {
          if (y1<y2) angle = Math.PI*2-angle;
     }
     else {
          if (y1<y2) angle = Math.PI+angle;
          else angle = Math.PI-angle;
     }
     return angle;
};

function plotit() {
var cor1x=document.frm1.cor1x.value * 2;
var cor1y=document.frm1.cor1y.value * 2;
var cor2x=document.frm1.cor2x.value * 2;
var cor2y=document.frm1.cor2y.value * 2;
var cor3x=document.frm1.cor3x.value * 2;
var cor3y=document.frm1.cor3y.value * 2;
var cor4x=document.frm1.cor4x.value * 2;
var cor4y=document.frm1.cor4y.value * 2;
var cor5x=document.frm1.cor5x.value * 2;
var cor5y=document.frm1.cor5y.value * 2;
var cor6x=document.frm1.cor6x.value * 2;
var cor6y=document.frm1.cor6y.value * 2;
var cor7x=document.frm1.cor7x.value * 2;
var cor7y=document.frm1.cor7y.value * 2;
var cor8x=document.frm1.cor8x.value * 2;
var cor8y=document.frm1.cor8y.value * 2;
var cor9x=document.frm1.cor9x.value * 2;
var cor9y=document.frm1.cor9y.value * 2;
var cor10x=document.frm1.cor10x.value * 2;
var cor10y=document.frm1.cor10y.value * 2;
var num1=400;
var num2=297;
var plot1y=(num1 - cor1y);
var plot1x=(parseInt(num2) + parseInt(cor1x));
document.getElementById("plot1").style.top= plot1y;
document.getElementById("plot1").style.left= plot1x;
document.getElementById("plot1").style.visibility= "visible"


var plot2y=(num1 - cor2y);
var plot2x=(parseInt(num2) + parseInt(cor2x));
document.getElementById("plot2").style.top= plot2y;
document.getElementById("plot2").style.left= plot2x;
document.getElementById("plot2").style.visibility= "visible"


var plot3y=(num1 - cor3y);
var plot3x=(parseInt(num2) + parseInt(cor3x));
document.getElementById("plot3").style.top= plot3y;
document.getElementById("plot3").style.left= plot3x;
document.getElementById("plot3").style.visibility= "visible"


var plot4y=(num1 - cor4y);
var plot4x=(parseInt(num2) + parseInt(cor4x));
document.getElementById("plot4").style.top= plot4y;
document.getElementById("plot4").style.left= plot4x;
document.getElementById("plot4").style.visibility= "visible"


var plot5y=(num1 - cor5y);
var plot5x=(parseInt(num2) + parseInt(cor5x));
document.getElementById("plot5").style.top= plot5y;
document.getElementById("plot5").style.left= plot5x;
document.getElementById("plot5").style.visibility= "visible"


var plot6y=(num1 - cor6y);
var plot6x=(parseInt(num2) + parseInt(cor6x));
document.getElementById("plot6").style.top= plot6y;
document.getElementById("plot6").style.left= plot6x;
document.getElementById("plot6").style.visibility= "visible"


var plot7y=(num1 - cor7y);
var plot7x=(parseInt(num2) + parseInt(cor7x));
document.getElementById("plot7").style.top= plot7y;
document.getElementById("plot7").style.left= plot7x;
document.getElementById("plot7").style.visibility= "visible"


var plot8y=(num1 - cor8y);
var plot8x=(parseInt(num2) + parseInt(cor8x));
document.getElementById("plot8").style.top= plot8y;
document.getElementById("plot8").style.left= plot8x;
document.getElementById("plot8").style.visibility= "visible"


var plot9y=(num1 - cor9y);
var plot9x=(parseInt(num2) + parseInt(cor9x));
document.getElementById("plot9").style.top= plot9y;
document.getElementById("plot9").style.left= plot9x;
document.getElementById("plot9").style.visibility= "visible"


var plot10y=(num1 - cor10y);
var plot10x=(parseInt(num2) + parseInt(cor10x));
document.getElementById("plot10").style.top= plot10y;
document.getElementById("plot10").style.left= plot10x;
document.getElementById("plot10").style.visibility= "visible"

var plot1xcor=document.getElementById("plot1").style.top.split('px').join('');
var plot1ycor=document.getElementById("plot1").style.left.split('px').join('');

var plot2xcor=document.getElementById("plot2").style.top.split('px').join('');
var plot2ycor=document.getElementById("plot2").style.left.split('px').join('');

var plot3xcor=document.getElementById("plot3").style.top.split('px').join('');
var plot3ycor=document.getElementById("plot3").style.left.split('px').join('');

var plot4xcor=document.getElementById("plot4").style.top.split('px').join('');
var plot4ycor=document.getElementById("plot4").style.left.split('px').join('');

var plot5xcor=document.getElementById("plot5").style.top.split('px').join('');
var plot5ycor=document.getElementById("plot5").style.left.split('px').join('');

var plot6xcor=document.getElementById("plot6").style.top.split('px').join('');
var plot6ycor=document.getElementById("plot6").style.left.split('px').join('');

var plot7xcor=document.getElementById("plot7").style.top.split('px').join('');
var plot7ycor=document.getElementById("plot7").style.left.split('px').join('');

var plot8xcor=document.getElementById("plot8").style.top.split('px').join('');
var plot8ycor=document.getElementById("plot8").style.left.split('px').join('');

var plot9xcor=document.getElementById("plot9").style.top.split('px').join('');
var plot9ycor=document.getElementById("plot9").style.left.split('px').join('');

var plot10xcor=document.getElementById("plot10").style.top.split('px').join('');
var plot10ycor=document.getElementById("plot10").style.left.split('px').join('');


}
</script>

</head>
<body>
<form name="frm1">
<input name="cor1x" type="text" size="3" VALUE=10>
<input name="cor1y" type="text" size="3" VALUE=10><br>
<input name="cor2x" type="text" size="3" VALUE=20>
<input name="cor2y" type="text" size="3" VALUE=20><br>
<input name="cor3x" type="text" size="3" VALUE=30>
<input name="cor3y" type="text" size="3" VALUE=30><br>
<input name="cor4x" type="text" size="3" VALUE=40>
<input name="cor4y" type="text" size="3" VALUE=40><br>
<input name="cor5x" type="text" size="3" VALUE=50>
<input name="cor5y" type="text" size="3" VALUE=50><br>
<input name="cor6x" type="text" size="3" VALUE=60>
<input name="cor6y" type="text" size="3" VALUE=60><br>
<input name="cor7x" type="text" size="3" VALUE=70>
<input name="cor7y" type="text" size="3" VALUE=70><br>
<input name="cor8x" type="text" size="3" VALUE=80>
<input name="cor8y" type="text" size="3" VALUE=80><br>
<input name="cor9x" type="text" size="3" VALUE=90>
<input name="cor9y" type="text" size="3" VALUE=90><br>
<input name="cor10x" type="text" size="3" VALUE=100>
<input name="cor10y" type="text" size="3" VALUE=100><br>
<input type="button" value="plot" onclick="plotit();"><br>
<input type="button" value="draw" onclick="line(10,50,100,150,1);"><br>
</form>


<div id="grey"
style="z-index: 0; left: 300px; width: 400px; position: absolute; top: 10px; height: 400px; background-color: gray;"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="plot1" style="visibility: hidden; position: absolute;">
o
</div>
<div id="plot2" style="visibility: hidden; position: absolute;">
o
</div>
<div id="plot3" style="visibility: hidden; position: absolute;">
o
</div>
<div id="plot4" style="visibility: hidden; position: absolute;">
o
</div>
<div id="plot5" style="visibility: hidden; position: absolute;">
o
</div>
<div id="plot6" style="visibility: hidden; position: absolute;">
o
</div>
<div id="plot7" style="visibility: hidden; position: absolute;">
o
</div>
<div id="plot8" style="visibility: hidden; position: absolute;">
o
</div>
<div id="plot9" style="visibility: hidden; position: absolute;">
o
</div>
<div id="plot10" style="visibility: hidden; position: absolute;">
o
</div>

</body>
</html>


thanks again