I had no work one day due to a worm attack on
our servers, thus a plot to plot a line on a graph was hatched in my empty mind.
These files show you, how to plot a line using 3 tools, Loop, table and text
Recall the Cartesian co-ordinate system; a line segment has 2 points with a
starting point at (x1,y1)
and an ending point at (x2,y2).

This form asks you for those two points in your Cartesian system.
I have limited my systems from -20 to +20 on the X- and Y- Axes, as you will see
on the next page.
INDEX.CFM (or call it anything you want): This is the page the hatches the plot!
<cfform action="plot.cfm"
method="POST"
enablecab="Yes" name="plot">
1<sup>st</sup> Point
Co-ordinates (x<sub>1</sub>,y<sub>1</sub>)<br>
X: <cfinput type="Text"
name="xa1"
validate="integer"
required="Yes">
Y: <cfinput type="Text"
name="yb1" validate="integer"
required="Yes">
<br>
2<sup>nd</sup> Point
Co-ordinates (x<sub>2</sub>,y<sub>2</sub>)<br>
X: <cfinput type="Text"
name="xa2" validate="integer"
required="Yes">
Y: <cfinput type="Text"
name="yb2" validate="integer"
required="Yes"><br>
<hr>
<input type="submit"
name="Plot" value="Plot
It">
</cfform>
PLOT.CFM (Where the plot is executed)
<cfset xp = 20>
<cfset yp = 20>
The above 2 cfset statements set positive side
extents (xp is x-postive and yp means y-positive). I have set them to 20. But
for a finer graph you can increase or decrease them or let user control them via
a form.
<cfset x0=0>
<cfset y0 = 0>
The above 2 cfset statements set the origin at
0,0
<cfset xn=-#xp#>
<cfset yn=-#yp#>
The above 2 cfset statements set the negative
extents. Just because I wanted to make this graph look square with origin at the
center or where the diagonals meet.
<cfset a1 = '#form.xa1#'>
<cfset b1 = '#form.yb1#'>
<cfset a2 =
'#form.xa2#'>
<cfset b2 = '#form.yb2#'>
The above 4 cfset statements use the numbers
provided to them from the form on index.cfm !
<cfset run = (#a2#)-(#a1#)>
<cfset rise = (#b2#)-(#b1#)>
This is how you calculate slope of a line. Given 2 point on a Cartesian
co-ordinate system, slope is (y2-y1)/(x2-x1). Denominator cannot be 0, or
we get an error. In case it is then there is ?no slope to that line?. We can
still plot the line, or points through which segment starts and ends.
<cfif run neq 0>
<cfset slope = (#rise#/#run#)>
<cfelse>
<cfset slope=''>
</cfif>
The above statements just calculate the slope and output the result below;
Slope = <cfoutput>#slope#</cfoutput>
Once that?s done, I wanted to plot this line without using arrays or making it
too complex.
One thing to be understood is how a table tag is compiled. Inside a <table> tag,
you specify rows 1st (this is your Y-Axis) and then the columns (X-Axis) in each
row.
Second thing to be noted is, for a good graph, you have to control the size of
each square on your graph. So we resort to stylesheets thus;
<!---
<td style="width:15px;height:15px;font-size:10px;" align="center" valign="middle">
--- >
A simple table tag will have a structure like;
<table>
<tr> <!--- y-axis --- >
<td></td> <!--- x-axis --- >
</tr>
</table>
So loop <tr> (in my case) form +20 to ?20. Not that
the step is ?1.
Because each column is defined after each row, nest another loop or
<td> and loop it from -20 to +20 and let step be
default =1. Your graph is ready!
<table>
<cfloop index="y"
from="#yp#" to="#yn#"
step='-1'>
<tr bgcolor="efefef"
style="border-width:1px; border-style:thin;">
<cfloop index="x"
from="#xn#" to="#xp#"
step='1'>
<cfset x_cords =x-y>
<cfset y_cords =y-x>
<!--- This is how you set co-ordinates to appear in the
center of your graph --- >
<cfset ptx = x-a1>
<cfset pty = y-b1>
<cfif ptx gt
0 or ptx
lt 0>
<cfset s = pty/ptx>
<cfelse>
<cfset s=0>
</cfif>
<!--- if you use x as index of loop for x-axis, and
subtract first point x1 (in my case a1), you will get some number for ?some
run?. The if statements below, output ?x? for every point where the ?some run?
is equal to actual run calculated above for (a2-a1). And if you use Y for the
index and subtract point y1, you will get ?some rise?. Again out put a character
(x in my case) for if conditions are suitable. You could have used X2 and Y2 (or
a2 and b2) instead of the x1 and y1. and flipped number is subtraction to B2-Y
or A2-X. The principal is the same.
Say the Y loop outputs 1st point = 20 and you specified a1 = 10 and a2 = 20,
then;
B2-B1 = 10 And Y-B1= 10
So common point, output an X in that cell. Simple?
--- >
<td style="width:15px;height:15px;font-size:10px;"
align="center" valign="middle">
<cfif x_cords eq x>
<cfoutput>
#x_cords#
</cfoutput>
<cfelseif y_cords eq y>
<cfoutput>
#y_cords#
</cfoutput>
<!--- The above statements output x and
y axes and scale them--->
<cfelseif rise eq 0>
<!--- Recall from above, if
rise is 0 then slope is 0 --- >
<cfelseif s eq slope>
<b>x</b>
<!--- This is your line made up of
all Xs --- >
<cfelseif x eq a1
and y eq b1>
<b>o</b>
<!--- I used an O for start and end
points--- >
<cfelseif x eq a2
and y eq b2>
<b>o</b>
</cfif>
</td>
</cfloop>
</tr>
</cfloop>
</table>
<!---
I have noticed great plots for slopes with 1 to 1.5 and their (-)ve
counterparts. Lines with no slope plots in just 2 points. Here is an example of
a great plot with points A (5,-8) and B(-8,5), with slope ?1 (obviously). But
you can play with the extents of the graphs and origins to get a plot.
The next time our servers are down I am going to try to plot curves and
ultimately try to get an Edge-worth box to plot. If you get to it first, let me
in on your plot!!!
--->