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

Top comments (2)

Pawel Czarnota • Sep 30

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 • 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)

Top comments (2)

Read next

Small AI Models Outperform Giants in Grading Language Tasks, New Study Shows

New AI Pattern-Matching Method Simplifies and Improves Data Generation

AI Safety Breakthrough: 80% Smaller Models Match Full Performance in Harmful Content Detection

How I start typescript.