HostMySite.Com is sponsoring this tutorial, please visit their site today!

A plot to plot a line by: Anang A Phatak

[Download in PDF Format] [Download in FlashPaper Format]

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^st Point Co-ordinates (x₁,y₁)<br>
X: <cfinput type="Text" name="xa1" validate="integer" required="Yes">
Y: <cfinput type="Text" name="yb1" validate="integer" required="Yes">
<br>

2^nd Point Co-ordinates (x₂,y₂)<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!!!
--->

HostMySite.Com is sponsoring this tutorial, please visit their site today!

Please rate this tutorial:

Post a new comment on this tutorial
post a new comment on this particular tutorial
Your Name:
Your Email:
Comment Title:
Comments:
Key Phrase: