assembleBarGraph ( theList )

assembleBarGraph is a recursive Custom Function based on a clever Web Viewer's example

Average rating: 3.8 (50 votes) Log in to vote

Edward Souza
Nossoestudio Som & Imagem, ltd
n/a

Sample input:

Jan 87 00f & ¶ &
Feb 187 C0C0C0 & ¶ &
Mar 222 00FF00

Sample output:

Jan

Feb

187

Mar

222

Function definition: (Copy & paste into FileMaker's Edit Custom Function window)

/*
assembleBarGraph ( theList )

v.0.03ß

assembleBarGraph is a recursive Custom Function based on a clever Web Viewer's example named "Live Bar Graph", written by Mr. Bruce Robertson, and posted at http://www.briandunning.com/wv/21. His example inteligently draws Bar Charts using only HTML data scheme.

Mr. Robertson explained; "The data protocol supports entering complete HTML into the URL address field ... you can have a live, calculated HTML that displays instantly in Web Viewer with NO SCRIPTS and NO FILE EXPORT."

Since I favor using FileMaker native tools and functions whenever possible -- and rely on plugins or external applications only when it is utterly necessary -- I decided to give "Live Bar Graph" example a deeper look, and realized its code could be generated from a recursive CF.

HTML Structure
--------------

Mr. Robertson's Web Viewer Example code is based on a table cell block that repeats 12 times (each repetition represents a month), and carries two more variables and a calculation result, as seen bellow:

<tr><td width=500><table><tr>
	<td width = 80>January</td>	// Month
	<td width =30 align=right>87</td> //"87" is a value assigned to Month
	<td width =87 bgcolor=00f> </td> //"00f" is the bar color
	<td width =213> </td> //"213" is the result of (300 - value)
</tr></table></td></tr> 

If you analyze another cell, you'll see the same structure:

<tr><td width=500><table><tr>
	<td width = 80>September</td>	// Month
	<td width =30 align=right>99</td> //"99" is a value assigned to Month
	<td width =99 bgcolor=800000> </td>//"800000" is the bar color
	<td width =201> </td>"201" is the result of (300 - value)
</tr></table></td></tr>

Since there is a defined pattern in the code, it can be generated with the use of recursion. Further, if the three variables are stored as a value in a list, they may be parsed into their proper places.


The Custom Function
-------------------

Since this CF specifically generates data for HTML bar charts and is based on "Live Bar Graph" Web Viewer example, its usage is rather strict:

1. it requires a CR-separated list;

2. each list value has to hold three strings -- text, number, and hexa color code -- separated either by commas or semi-colons or (one) blank spaces. For example:
Jan 87 00f
Feb;187;C0C0C0
Mar,222,00FF00

3. this CF may be used directly inside a Web Viewer object, or reside in a calculation field. If the latter is used, please set its "storage options" to "unstored";

4. this CF needs two HTML declarations to work properly: one before the CF is called, and other after. They are,

4a. the "before CF" declaration - 
"data:text/html,<html>" & ¶ & "<body>" & ¶ & "<table border=0 padding=2>" & ¶ &

4b. the "after CF" declaration - 
& ¶ & "</table>" & ¶ & "</body>" & ¶ & "</html>";

note: I tried to compile these declarations into the code itself using the "Evaluate" function, but it did not work as expected.

5. if the instructions above are followed, the CF shall function without flaws. 


Final Considerations
--------------------

• This CF has been written using FileMaker Pro Advanced 10.0v3 and tested on Macintosh only; hence I don't garantee it will work on the Windows platform;
• This CF is simple, yet it offers a lot of room for improvemen, thus feel free to refine it to your needs;
• My gratitude to Mr. Robertson for sharing his "Live Bar Graph" Web Viewer example; also to many developers from this and other communities who writes elegant and useful code.


© 2010 Edward Souza, based on Bruce Robertson's code
*/


/* the following HTML code shall be copied and pasted before the CF itself:
"data:text/html,<html>" & ¶ & "<body>" & ¶ & "<table border=0 padding=2>" & ¶ &
*/

Let ( 
	[ 

	curVle = GetValue ( theList ; 1 ); 
	curCnt = ValueCount ( theList ); 

	blockHdr = "<tr><td width=500><table><tr>"; 
	vleL = LeftWords ( curVle ; 1 ); 
	vleM = MiddleWords ( curVle ; 2 ; 1 ); 
	vleR = RightWords ( curVle; 1 ); 
	vleFn = 300 - ( GetAsNumber ( vleM ) ); 
	expL = "<td width = 80>" & vleL & "</td>"; 
	expM = "<td width =30 align=right>" & vleM & "</td>"; 
	expR = "<td width =" & vleM & " bgcolor=" & vleR & "> </td>"; 
	expFn = "<td width =" & vleFn & "> </td>"; 
	blockFtr = "</td></tr></table></td></tr>"; 
	expRes = blockHdr & ¶ & expL & ¶ & expM & ¶ & expR & ¶ & expFn & ¶ & blockFtr & ¶

	]; 

	Case ( 
		curCnt > 1; 
		expRes & assembleBarGraph ( RightValues ( theList ; curCnt - 1 ) ); 

		expRes 
	) 
)

/* the following HTML code shall be copied and pasted after the CF itself:
& ¶ & "</table>" & ¶ & "</body>" & ¶ & "</html>"
*/

assembleBarGraph is a recursive Custom Function based on a clever Web Viewer's example named "Live Bar Graph", written by Mr. Bruce Robertson, and posted at http://www.briandunning.com/wv/21. His example inteligently draws Bar Charts using only HTML data scheme.

Mr. Robertson explained; "The data protocol supports entering complete HTML into the URL address field ... you can have a live, calculated HTML that displays instantly in Web Viewer with NO SCRIPTS and NO FILE EXPORT."

Since I favor using FileMaker native tools and functions whenever possible -- and rely on plugins or external applications only when it is utterly necessary -- I decided to give Mr. Robertson's example a deeper look, and realized its code could be generated from a recursive CF.

Please read the short text that precedes the code itself for instructions.

Comments

		Bruce Robertson Sep 17, 2010
Thanks! Small problem - missing closing ">" character for td in expR and expFn.

		Edward Souza, Victoria, BC, CA Sep 17, 2010
Hello, Mr. Robertson, Thanks for pointing out the "small" problem; I have already corrected it, together with other "minor" grammatical errors. :-) Your WebViewer example is really great; once again, thanks for sharing it. Cheers

Note: these functions are not guaranteed or supported by BrianDunning.com. Please contact the individual developer with any questions or problems.

assembleBarGraph ( theList )

Comments

Support this website.

Support this website.