Server Time:
Sunday May 11 2008 08:05 PM  
Your Time:
  
HostMySite.Com is sponsoring this tutorial, please visit their site today!
This tutorial is sponsored by HostMySite.Com - ColdFusion Hosting

A plot to plot a line
by: Anang A Phatak
Email this tutorial to a friend Display Printer Friendly Format
[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<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!!!
--->


Date added: Thu. May 6, 2004
Posted by: Anang A Phatak | Views: 7507 | Tested Platforms: CF4 | Difficulty: Intermediate
Categories Listed: ColdFusion & Flash

HostMySite.Com is sponsoring this tutorial, please visit their site today!
This tutorial is sponsored by HostMySite.Com - ColdFusion Hosting

This author's other tutorials:
Breaking down your query results into pages (Paging Tutorial) Part-II
This is an extension to my last tutorial "Breaking down your query results into pages (Paging Tutorial)" which is posted here on www.easycfm.com In the last tutorial, you could retrieve a dataset with a <cfquery>, then use a technique to seperate the results over several pages. It simply ; - took the total "recordCount" - divided that with the "number of records per page" - then displayed the number of pages at the bottom of the table. This is a little more sophisticated than that. Read on... - Date added: Wed. January 11, 2006
Getting ColdFusion Studio for Linux
I like using HomeSite+ for windows, and I am getting used to Dreamweaver Mx. But I still need something just as good for Linux. For some reason, I couldnt get "wine and Dreamweaver Mx" to work. So I "Googled" a bit and stumbled upon Eclipse and cfEclipse. Here is how to set it up. - Date added: Wed. May 25, 2005
Dynamic textbox and progress bar for your pages
The principle of this tutorial is similar to "Dynamic time and date for your pages" tutorial. Except that this one generates messages, and that one updated time. Read on, you will get the hang of it.... - Date added: Thu. May 19, 2005
ColdFusion MX 6.1 Installation on Linux (Ubuntu -- Hoary Hedgehog)
I have tried hoards of websites on how to install coldfusion on Fedora Core 3 with apache webserver. For some reason the connectors always failed. I had "Ubuntu" on my laptop, basically because "acpi" suspend/hibernate actually works. I decided I might try to install CF there to find out what was going wrong. Surprisingly everything worked like a charm. Make sure you use "apt-get install apache2" before you try this. BEST OF LUCK .... - Date added: Tue. May 10, 2005
Dynamic time and date for your pages
Have you seen the "www.EasyCFM" page closely? On the main page, top right, there is a place for time, and top left a place for day-date. Ever wonder how Pablo does it ? This is not a ColdFusion tutorial. Its JavaScript. - Date added: Wed. January 5, 2005

Additional Tutorials:
· A DataSet just like VB.Net

· Breaking down your query results into pages (Paging Tutorial)

· A Mp3 Streaming Server

· Automatically Query To CFM

· Advanced Calculator

· A random password generator

· Automatic Form Generator
Please rate this tutorial:
5 Stars 4 Stars 3 Stars 2 Stars 1 Stars
Post a new comment on this tutorial
post a new comment on this particular tutorial
Your Name:
Your Email:
Comment Title:
Comments:
Key Phrase:
 
Skyscrapper Banner Advertisement
Daily Razor - ColdFusion Hosting

You are 1 of 621 active sessions! | Privacy | Company
Copyright © 2002 EasyCFM.Com, LLC. (Easy ColdFusion Tutorials) All Rights Reserved
All other trademarks and copyrights are the property of their respective holders.
ColdFusion Hosting ColdFusion Hosting
ADD TO:
Blink
Del.icio.us
Digg
Furl
Google
Simpy
Spurl
Y! MyWeb