HeatColor UDF (based on jQuery library)

#coldfusion #jquery

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.5local.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>

view raw HeatColor.cfm hosted with ❤ by GitHub

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (2)

Pawel Czarnota • Sep 30 '24

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.

James Moberg • Oct 7 '24 • Edited

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.

public string function colorContrast(string color="") output=false hint="Returns black or white hex color based on passed color" {
    if (len(trim(arguments.color)) neq 6) return '000000';
    local.intRed = inputbasen(mid(arguments.color, 1, 1 ), 16);
    local.intGreen = inputbasen(mid(arguments.color, 3, 1 ),16);
    local.intBlue = inputbasen(mid(arguments.color, 5, 1 ),16);
    if ((local.intGreen gt 9) or ((local.intRed + local.intGreen + local.intBlue) gt 30)) {
        return "000000";
    }else {
        return "ffffff";
    }
}

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.

DEV Community

HeatColor UDF (based on jQuery library)

The Next Generation Developer Platform

Top comments (2)

Create up to 10 Postgres Databases on Neon's free plan.

Read next

"Revolutionizing Spatial Analysis: New SAR Models for Crime Data Insights"

25 Senior Developer Tips to Boost .NET Productivity

To be "Microservice" or not to be? - (2B || !2B) 💡

Data oriented python

Okay