javascript scatter plot??

mattjp88
mattjp88 used Ask the Experts™
on
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 :-)
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I've used www.quickmath.com before...it's not JavaScript though, but pretty cool...

Commented:
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?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
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 :-)

Author

Commented:
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 :-)
Commented:
I've tweaked your code - it now works in DOM browsers (I changed the document.all to getElementById):

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

<script type="text/javascript">
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=(parseInt(num2) + parseInt(cor1x));
document.getElementById("plot1").style.top= plot1y;
document.getElementById("plot1").style.left= plot1x;
document.getElementById("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>

The major problem I found was the x coordinate - it was using + to concatenate the 2 strings, so you needed to use parseInt to force both values to be recognised as integers. I also tidied up a few other things - adding "" around all attribute values, changed all upper case to lower case.

;) kasandra

Author

Commented:
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 :-)

Author

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

thanx,
Matt

Commented:
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

Author

Commented:
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial