ColdFusion Tips and Tutorials

I. Comments:

Please go Rate me at these to links... Thanks
http://www.scriptsearch.com/details/2249.html

http://www.idea247.com/cgi-bin/links/rate.cgi?ID=322

Been very busy....

Keep Coding,
Nathan Stanford
President/CEO
C.F. Concepts, Inc.
http://www.coldfusionmonthly.com
http://www.cftipsplus.com

If you have suggestions for articles send them to us.
If you would like to write for cftipsplus.com
send us an email to:

admin@cftipsplus.com

IF YOU WANT TO BE AN AUTHOR SEND IN YOUR COLDFUSION TIPS.

Remember this is a great way to get your name known in the
ColdFusion Community.

Visit this site. If you have plans to get training here is a company that provides Advanced, Intensive ColdFusion Training. Check them out.

http://www.coldfusiontraining.com/index.cfm?ref=cftipsplus

Monthly access to new articles written by industry-leading ColdFusion experts. A fully-functional application that accompanies each issue.

Full access to all issues, past and present (with a one year paid subscription). The chance to be seen in our "Community Spotlight" corner, which showcases new writers and emerging talent

Overview.
To make these calculators, you'll create simple images with whatever tools you have on hand, define the input, make a form that calls itself to pass the expressions to be graphed, and create a block of nested cfloops that have no white space between the tags of which it consists.

Make Images for Points and Background.
You could do the job with just two or three one-pixel drawings (one for each color), but you can cover the same ground with fewer image tags if you use multi-colored images. br.gif has a blue cell followed by a red cell right next to it: [blue-red]. bg.gif has a blue cell followed by a green cell [blue-green]. b.gif has one blue cell that will be stretch to take the place of two or more as needed. In these examples, blue images are used for the background. In a slightly different approach, you might use a clear gif for places where you don't want a point and let a background color or image show through for added impact.

Images paste together nicely into a large rectangle. You can even use a line break to start a new line. Just don't put any space between the tags that produce the images and don't mix text and images on the same line. Try putting a few images of the same size side-by-side on a line and then allow space between the tags. When you do this, you'll see why they have to be jammed together (even though it makes the code in the display block hard to read).

When you put a few rows of images together, you'll notice that it doesn't look good to let "points" touch on the diagonal; they look like crepe paper streamers instead of lines. To avoid this effect in these examples, each row that may contain points is followed by a row that does not (so that only alternate rows have points), and the images (blue-red, blue-green, or blue-blue consist of color pairs to keep adjacent points on the same row from touching (so that only alternate columns have points). The image fill is not complete for equations representing two-dimensional solids, but the meaning is clear.

Define the Input
Each calculator can be handled by one form. The input variables are defined (for when the form hasn't fired yet) and then the form is used to fill them.
For the one-expression calculator, define one field. The sample expression shows that the field is intended to accept ColdFusion operators such as "is" and "or".

<cfif not isDefined("form.test")>
<cfset test="(x-2)/2 + 1 is y or x-8 is y">
<cfelse>
<cfset test="#form.test#">
</cfif>

For the two-expression calculator, add a variable for one more field. The familiar equation for a circle is less familiar when an exponent is not used, but ColdFusion doesn't like it when the number being raised to an exponent might be zero.

<cfif not isDefined("form.test2")>
<cfset test2="(x-15)*(x-15) + (y-7)*(y-7) is 25">
<cfelse>
<cfset test2="#form.test2#">
</cfif>

Make a Form
The one-input calculator's form looks like this.

<cfform name="graph" action="grapha.cfm" method="post">
<cfinput type="text" name="test" value="#test#" size="62" maxlength="60">
<input type="submit" name="" value="Submit">
</cfform>

The two-input calculator's form looks like this. Notice that the form action is different (so you can have two different calculators). Otherwise, the only difference between this form and the previous one is the additional input field.

<cfform name="graph" action="graphb.cfm" method="post">
<cfinput type="text" name="test" value="#test#" size="63" maxlength="60">
<cfinput type="text" name="test2" value="#test2#" size="63" maxlength="60">
<input type="submit" name="" value="Submit">
</cfform>

Display the Graph
The graph is generated by nested cfloops. Because the vertical direction is being painted from the top down, it loops backwards from the maximum value to 1. The horizontal direction is being painted forwards (from left to right); so, it loops forwards from 1 to its maximum. Once the outer cfloop opens, no spaces or line breaks are allowed between tags until the outer cfloop closes. (Otherwise, you won't like the checkerboard effect.) For each horizontal row, points are painted with br.gif, places where not point is found are painted with b.gif, and a spacer row consisting of only b.gif (stretched to the graph's entire width) is added.

<cfset hmax=50>
<cfset vmax=20>
<cfloop index="y" from="#vmax#" to="1" step="-1"><cfloop index="x" from="1" to="#hmax#" step="1"><cfif evaluate(test)><img src="br.gif" width="9" height="5"><cfelse><img src="b.gif" width="9" height="5"></cfif></cfloop><br><img src="b.gif" width="450" height="5"><br></cfloop>

Try the first calculator out by creating the images and then copying the single-image definition, form, and graphing block into a single file; this example calls it grapha.cfm. If the output has gaps, review what you've copied. If there are gaps or line breaks between tags in the graphing block, remove them.

Then try the second calculator, graphb.cfm. Here is its graphing block. The only difference is the addition of bg.gif to use a different color for the points of the second expression as needed.

<cfset hmax=50>
<cfset vmax=20>
<cfloop index="y" from="#vmax#" to="1" step="-1"><cfloop index="x" from="1" to="#hmax#" step="1"><cfif evaluate(test)><img src="br.gif" width="9" height="5"><cfelseif evaluate(test2)><img src="bg.gif" width="9" height="5"><cfelse><img src="b.gif" width="9" height="5"></cfif></cfloop><br><img src="b.gif" width="450" height="5"><br></cfloop>

Learn from Bar Charts
Can you make pie charts this way? The number of image tags needed for the resolution to make the rounded edges of a pie chart look good would seem to be too large for a client connection. I'd wait, and use logic like this in java where you can actually create a pie chart image on the fly and send that to the client. Of course, not all ColdFusion hosts let you use the "cfobject" tag needed to facilitate this connection; so, this avenue may not be open to you.
However, if you absolutely have to show proportions, try using a single bar which contains many colors: one for each portion being represented. The proportion will show even more clearly than with a pie chart and will take up less screen real estate.

Extensions
If this XY graph is used to display points from a database, it needs to be self-scaling and cries out for axis marks. Look at examples of ColdFusion bargraphs on the Internet to see how to do the scaling. To add the axes, plan to use images for tickmarks instead of text. If the text is a little off, it may not be noticeable if the tickmarks are widely spaced, precisely placed images. Cascading style sheets may even help in this endeavor. In the meantime, you've created an impressive tool with very little code. Just the shape of a graph can tell you a good deal about the relationships that produced it.

=Marty=