JamoCA · January 21, 2026 16:30
diff --git a/HeatColor.cfm b/HeatColor.cfm
 <!DOCTYPE html>
 <html lang="en"><head>
 <meta charset="utf-8">
 <title>ColdFusion HeatColor UDF Demo</title>
 <link rel="STYLESHEET" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.0/css/theme.blue.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.0/js/jquery.tablesorter.min.js"></script>
 <script>
 $(function(){
 	$('#myTable').tablesorter();
 });
 </script>
 <!--- 2024-09-24 ColdFusion HeatColor UDF Demo
 GIST: https://gist.github.com/JamoCA/3220867aaa5e56917221c07d0dadfdd4
 BLOG: https://dev.to/gamesover/heatcolor-udf-based-on-jquery-library-d5c
 TWEET: https://x.com/gamesover/status/1839035629218443300
 --->
 </head>

 <body>

 	<h1>ColdFusion HeatColor UDF Demo</h1>

 	<p>Inspired by the <a href="https://github.com/joshuanathanson/jquery-heatcolor">jQuery-heatcolor</a> library.</p>

 	<cfscript>
 	/**
 	* HeatColor - Converts a numeric value to a heat map color
 	* Ported from jQuery HeatColor plugin by Josh Nathanson
 	*
 	* @param value      The numeric value to convert to a color
 	* @param minVal     The minimum value in the range (default: 0)
 	* @param maxVal     The maximum value in the range (default: 100)
 	* @param colorStyle Color style: "roygbiv" or "greentored" (default: "roygbiv")
 	* @param lightness  Lightness adjustment 0-1 (default: 0)
 	* @param reverseOrder Reverse the color mapping (default: false)
 	* @return Hex color string (e.g., "#FF5500")
 	*/
 	public string function heatColor(
 		required numeric value,
 		numeric minVal = 0,
 		numeric maxVal = 100,
 		string colorStyle = "roygbiv",
 		numeric lightness = 0,
 		boolean reverseOrder = false
 	) {
 		var mn = arguments.minVal;
 		var mx = arguments.maxVal;

 		// Handle reverse order
 		if (arguments.reverseOrder) {
 			mn = arguments.maxVal;
 			mx = arguments.minVal;
 		}

 		// Clamp value to range
 		var curval = arguments.value;
 		if (!arguments.reverseOrder) {
 			if (curval lt mn) curval = mn;
 			if (curval gt mx) curval = mx;
 		} else {
 			if (curval gt mn) curval = mn;
 			if (curval lt mx) curval = mx;
 		}

 		// Value between 0 and 1
 		var position = (mn eq mx) ? 0.5 : (curval - mn) / (mx - mn);

 		// Calculate shift based on color style
 		// This adds 0.5 at the top to get red, and limits the bottom at x=1.7 to get purple
 		var shft = 0;
 		if (arguments.colorStyle eq "roygbiv") {
 			shft = 0.5 * position + 1.7 * (1 - position);
 		} else {
 			shft = position + 0.2 + 5.5 * (1 - position);
 		}

 		// Scale will be multiplied by the cos(x) + 1
 		// (value from 0 to 2) so it comes up to a max of 255
 		var scale = 128;

 		// Period is 2Pi
 		var period = 2 * pi();

 		// x is place along x axis of cosine wave
 		var x = shft + position * period;

 		// Shift to negative if greentored
 		if (arguments.colorStyle neq "roygbiv") {
 			x = -x;
 		}

 		// Calculate raw RGB values using cosine wave
 		var rRaw = floor((cos(x) + 1) * scale);
 		var gRaw = floor((cos(x + pi() / 2) + 1) * scale);
 		var bRaw = floor((cos(x + pi()) + 1) * scale);

 		// Process each component: adjust lightness and convert to hex
 		var r = floor(rRaw + lightness * (256 - rRaw));
 		var g = floor(gRaw + lightness * (256 - gRaw));
 		var b = floor(bRaw + lightness * (256 - bRaw));

 		// Clamp to valid range
 		if (r gt 255) r = 255;
 		if (g gt 255) g = 255;
 		if (b gt 255) b = 255;
 		if (r lt 0) r = 0;
 		if (g lt 0) g = 0;
 		if (b lt 0) b = 0;

 		// Convert to hex strings
 		var rHex = formatBaseN(r, 16);
 		var gHex = formatBaseN(g, 16);
 		var bHex = formatBaseN(b, 16);

 		// Pad single characters with leading zero
 		if (len(rHex) eq 1) rHex = "0" & rHex;
 		if (len(gHex) eq 1) gHex = "0" & gHex;
 		if (len(bHex) eq 1) bHex = "0" & bHex;

 		return lcase("##" & rHex & gHex & bHex);
 	}


 	// pre-configuration
 	colorStyle = "greentored"; // Use "greentored" or "roygbiv"
 	lightness = 0;
 	reverseOrder = false;

 	</cfscript>


 	<table id="myTable" class="tablesorter-blue">
 		<thead>
 			<tr><th>Row</th><th>Count</th><th>Sum</th><th>Avg</th></tr>
 		</thead>
 		<tbody>
 			<cfoutput>
 				<cfloop from="1" to="15" index="thisRow">
 					<cfset C = randrange(20,300)>
 					<cfset S = randrange(200,3000)>
 					<cfset A = numberformat((S/C)*100, "999.00")>
 					<tr>
 						<td>#ThisRow#</td>
 						<td style="background-color:#heatColor(C, 20, 300, colorStyle, lightness, reverseOrder)#">#C#</td>
 						<td style="background-color:#heatColor(S, 200, 3000, colorStyle, lightness, reverseOrder)#">#S#</td>
 						<td style="background-color:#heatColor(A, 100, 15000, colorStyle, lightness, reverseOrder)#">#A#</td>
 					</tr>
 				</cfloop>
 			</cfoutput>
 		</tbody>
 	</table>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en"><head>
	<meta charset="utf-8">
	<title>ColdFusion HeatColor UDF Demo</title>
	<link rel="STYLESHEET" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.0/css/theme.blue.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.0/js/jquery.tablesorter.min.js"></script>
	<script>
	$(function(){
	$('#myTable').tablesorter();
	});
	</script>
	<!--- 2024-09-24 ColdFusion HeatColor UDF Demo
	GIST: https://gist.github.com/JamoCA/3220867aaa5e56917221c07d0dadfdd4
	BLOG: https://dev.to/gamesover/heatcolor-udf-based-on-jquery-library-d5c
	TWEET: https://x.com/gamesover/status/1839035629218443300
	--->
	</head>

	<body>

	<h1>ColdFusion HeatColor UDF Demo</h1>

	<p>Inspired by the <a href="https://github.com/joshuanathanson/jquery-heatcolor">jQuery-heatcolor</a> library.</p>

	<cfscript>
	/**
	* HeatColor - Converts a numeric value to a heat map color
	* Ported from jQuery HeatColor plugin by Josh Nathanson
	*
	* @param value The numeric value to convert to a color
	* @param minVal The minimum value in the range (default: 0)
	* @param maxVal The maximum value in the range (default: 100)
	* @param colorStyle Color style: "roygbiv" or "greentored" (default: "roygbiv")
	* @param lightness Lightness adjustment 0-1 (default: 0)
	* @param reverseOrder Reverse the color mapping (default: false)
	* @return Hex color string (e.g., "#FF5500")
	*/
	public string function heatColor(
	required numeric value,
	numeric minVal = 0,
	numeric maxVal = 100,
	string colorStyle = "roygbiv",
	numeric lightness = 0,
	boolean reverseOrder = false
	) {
	var mn = arguments.minVal;
	var mx = arguments.maxVal;

	// Handle reverse order
	if (arguments.reverseOrder) {
	mn = arguments.maxVal;
	mx = arguments.minVal;
	}

	// Clamp value to range
	var curval = arguments.value;
	if (!arguments.reverseOrder) {
	if (curval lt mn) curval = mn;
	if (curval gt mx) curval = mx;
	} else {
	if (curval gt mn) curval = mn;
	if (curval lt mx) curval = mx;
	}

	// Value between 0 and 1
	var position = (mn eq mx) ? 0.5 : (curval - mn) / (mx - mn);

	// Calculate shift based on color style
	// This adds 0.5 at the top to get red, and limits the bottom at x=1.7 to get purple
	var shft = 0;
	if (arguments.colorStyle eq "roygbiv") {
	shft = 0.5 * position + 1.7 * (1 - position);
	} else {
	shft = position + 0.2 + 5.5 * (1 - position);
	}

	// Scale will be multiplied by the cos(x) + 1
	// (value from 0 to 2) so it comes up to a max of 255
	var scale = 128;

	// Period is 2Pi
	var period = 2 * pi();

	// x is place along x axis of cosine wave
	var x = shft + position * period;

	// Shift to negative if greentored
	if (arguments.colorStyle neq "roygbiv") {
	x = -x;
	}

	// Calculate raw RGB values using cosine wave
	var rRaw = floor((cos(x) + 1) * scale);
	var gRaw = floor((cos(x + pi() / 2) + 1) * scale);
	var bRaw = floor((cos(x + pi()) + 1) * scale);

	// Process each component: adjust lightness and convert to hex
	var r = floor(rRaw + lightness * (256 - rRaw));
	var g = floor(gRaw + lightness * (256 - gRaw));
	var b = floor(bRaw + lightness * (256 - bRaw));

	// Clamp to valid range
	if (r gt 255) r = 255;
	if (g gt 255) g = 255;
	if (b gt 255) b = 255;
	if (r lt 0) r = 0;
	if (g lt 0) g = 0;
	if (b lt 0) b = 0;

	// Convert to hex strings
	var rHex = formatBaseN(r, 16);
	var gHex = formatBaseN(g, 16);
	var bHex = formatBaseN(b, 16);

	// Pad single characters with leading zero
	if (len(rHex) eq 1) rHex = "0" & rHex;
	if (len(gHex) eq 1) gHex = "0" & gHex;
	if (len(bHex) eq 1) bHex = "0" & bHex;

	return lcase("##" & rHex & gHex & bHex);
	}


	// pre-configuration
	colorStyle = "greentored"; // Use "greentored" or "roygbiv"
	lightness = 0;
	reverseOrder = false;

	</cfscript>


	<table id="myTable" class="tablesorter-blue">
	<thead>
	<tr><th>Row</th><th>Count</th><th>Sum</th><th>Avg</th></tr>
	</thead>
	<tbody>
	<cfoutput>
	<cfloop from="1" to="15" index="thisRow">
	<cfset C = randrange(20,300)>
	<cfset S = randrange(200,3000)>
	<cfset A = numberformat((S/C)*100, "999.00")>
	<tr>
	<td>#ThisRow#</td>
	<td style="background-color:#heatColor(C, 20, 300, colorStyle, lightness, reverseOrder)#">#C#</td>
	<td style="background-color:#heatColor(S, 200, 3000, colorStyle, lightness, reverseOrder)#">#S#</td>
	<td style="background-color:#heatColor(A, 100, 15000, colorStyle, lightness, reverseOrder)#">#A#</td>
	</tr>
	</cfloop>
	</cfoutput>
	</tbody>
	</table>

	</body>
	</html>
No results found