When displaying values in a table, I like to use color to visually indicate whether the number is high or low. When displaying data on a webpage, it was trivial for us to use the jquery-heatcolor library to dynamically add color on-the-fly. This is an older library and the project's webpage disappeared and only the JS scripts were migrated to Github. I reported the lack of demo/documentation back in 2020 and finally scraped it from Archive.org, cleaned it up and shared it as a GIST.
When generating a PDF, a non-JS approach is required so I converted the JS library to a ColdFusion UDF (back in the mid-2000's) and am just now finally sharing it hopes that it will benefit others. Enjoy!
Source Code:
https://gist.github.com/JamoCA/3220867aaa5e56917221c07d0dadfdd4
<!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> |
Top comments (2)
Thanks for resurrecting this, James and sharing. Sounds like it could be useful. I looked at the example code with axe DevTools, the colors chosen for some cells have some minimum contrast accessibility issue between background and foreground, but that could be easily fixed.
On websites, I've used a JS library that auto-adjusts the contrast or delegate this effect to a short dedicated cell for visualization purposes.
CFML-wise, I've used the "colorContrast" UDF below when JS isn't available, but it only returns white or black HEX codes based on a HEX color argument.
If you want the text to "pop", another option would be to use CSS
text-shadow
to add a slight shadow or glow so that the text is better contrasted against a blackened silhouette.