<!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>
public string function heatColor(numeric num, numeric minVal=1, numeric maxVal=100, string colorStyle="greentored", numeric lightness=0, boolean reverseOrder=false) output=false hint="Generates heat colors based on min, max & current values" {
local.x = 0;
local.shft = 0;
local.position = 0;
if (arguments.reverseOrder){
local.x = arguments.minVal;
arguments.minVal = arguments.maxVal;
arguments.maxVal = local.x;
}
arguments.lightness = (arguments.lightness gte 0 && arguments.lightness lt 1) ? arguments.lightness : 0;
local.position = (arguments.num - arguments.minVal) / (arguments.maxVal - arguments.minVal);
if (arguments.colorStyle eq 'roygbiv') {
local.shft = 0.5*local.position + 1.7*(1-local.position);
} else {
local.shft = local.position + 0.2 + 5.5*(1-local.position);
}
local.x = local.shft + local.position * (2*pi());
if (arguments.colorStyle neq 'roygbiv') local.x = local.x * -1;
local.r = int((cos(local.x) + 1) * 128);
local.r = ucase(formatbasen(int(local.r + arguments.lightness * (256 - local.r)),16));
if (len(local.r) eq 1) local.r = "0" & local.r;
local.g = int((cos(local.x+pi()/2) + 1) * 128);
local.g = ucase(formatbasen(int(local.g + arguments.lightness * (256 - local.g)),16));
if (len(local.g) eq 1) local.g = "0" & local.g;
local.b = int((cos(local.x+pi()) + 1) * 128);
local.b = ucase(formatbasen(int(local.b + arguments.lightness * (256 - local.b)),16));
if (len(local.b) eq 1) local.b = "0" & local.b;
return '##' & local.r & local.g & local.b;
}
// 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>