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>

<td></td>

</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>

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

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>

<cfelseif s eq slope>

<b>x</b>

<cfelseif x eq a1 and y eq b1>

<b>o</b>

<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!!!

--->

About This Tutorial

Discuss This Tutorial

Advertisement