ColdFusion In Context: XY Graphs in a Graphing Calculator

You've seen bargraphs created by feeding numbers to large memory arrays and then by representing those arrays with stretched images or dynamic table backgrounds. However, this "big ol' matrix" approach to coding can get you into trouble when reality meets resource limits. There's another approach that doesn't require a "big ol' matrix" in memory, gives results now, and might provide insight you can use down the road when you begin to build and call java routines on the server to display graphs to the user.

Instead of building an array and then populating it with sparse data, you can mark a drawing with the data points as you create it. This technique is used to create two graphing calculators: one that handles a single complex expression and one that uses a different color for each of two complex expressions. Along the way, you'll use nested cfoops and stretch simple images to paint XY graphs.

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= [The original tip used .bmp images, but although more tools were available to create with them, they proved difficult for Netscape browsers to render.]