The Problem

Recently, while working on my ETF Screener website I had the need to color code a list of values by their rank within a list. On ETFtable.com, for each sortable column on the table I also have a rank property on all values in the column. I originally did this because it speeds up client-side sorting (plain integer arrays sort a little faster than decimal arrays – especially when there are some nulls among the decimal array).

Well, I recently decided I wanted to color code each cell where a rank matters. This way when a user sorts by one column, he/she can also see a visual indicator of how other columns would place in a sort as well. This is really helpful when you have technical indicator columns that represent different timelines – you can quickly see if an ETF (or whatever you are comparing) is trending on short, intermediate, and longer-term timelines.

What I needed was a way to take a rank range – say 1 to 100 – and get a color representing a given value in that range.

The Solution

Firstly, I needed to determine what parameters would be needed. Obviously I need a minimum rank number and a maximum rank number. Then I needed to specify the range of colors. So my signature for the function that would build and hold the list of colors for each rank number would look like this:

RankToColorConverter = function(numberMin, numberMax, colorMin, colorMax)

Now, how can I determine what color will go with each rank number in the range given? The hard part (or atleast what I thought could be difficult) was determining what colors belong between the colorMin and colorMax colors. To do this right we really need to break the color up into its individual Red, Green, and Blue parts and get a numeric representation of each. Getting the numeric for each involves converting Hexadecimal value to integer.

It turns out that Javascript’s parseInt function does this already. And conveniently the number object’s toString function does as well. The function signatures are below:

parseInt(string[, radix])

number.toString( [radix] )

The optional radix param specifies the base (base 10, hexadecimal, etc.) to use. (Interestingly, while researching this I came across articles where developers actually wrote functions with long switch cases to convert to and from hexadecimal – horray for them.) So, to get the Red part of the minimum color and convert that to an integer I just need this:

var rMin = parseInt(this.colorMin.substr(0, 2), 16);

My full implementation code as well as an example of it’s usage for a rank of 1 to 100 where I want to go from Red to White and then to Green is below. My next release of my ETF Screener will make use of this. Ooooh, pretty colors…

The Code

   1: RankToColorConverter = function(numberMin, numberMax, colorMin, colorMax) {

   2:     this.numberMin = new Number(numberMin);

   3:     this.numberMax = new Number(numberMax);

   4:     this.colorMin = new String(colorMin).replace("#", "");

   5:     this.colorMax = new String(colorMax).replace("#", "");

   6:     this.colors = [];

   7:     this.build();

   8: };

   9: RankToColorConverter.prototype.build = function() {

  10:     var numberRange = this.numberMax - this.numberMin,

  11:         rMin = parseInt(this.colorMin.substr(0, 2), 16),

  12:         rMax = parseInt(this.colorMax.substr(0, 2), 16),

  13:         gMin = parseInt(this.colorMin.substr(2, 2), 16),

  14:         gMax = parseInt(this.colorMax.substr(2, 2), 16),

  15:         bMin = parseInt(this.colorMin.substr(4, 2), 16),

  16:         bMax = parseInt(this.colorMax.substr(4, 2), 16),

  17:         r, g, b, factor;

  18:     for (var i = this.numberMin; i <= this.numberMax; i++) {

  19:         factor = ((i - this.numberMin) / numberRange);

  20:         this.colors[i] = {

  21:             r: Math.round(((rMax - rMin) * factor) + rMin),

  22:             g: Math.round(((gMax - gMin) * factor) + gMin),

  23:             b: Math.round(((bMax - bMin) * factor) + bMin)

  24:         };

  25:     }

  26: };

  27: RankToColorConverter.prototype.getHexColor = function(rankNum) {

  28:     return "#" +

  29:                 this.colors[rankNum].r.toString(16) +

  30:                 this.colors[rankNum].g.toString(16) +

  31:                 this.colors[rankNum].b.toString(16);

  32: };

   1: ETFTable.ui.downRankToColorConverter = new ETFTable.ui.RankToColorConverter(1, 50, "#E76161", "#FFFFFF");

   2: ETFTable.ui.upRankToColorConverter = new ETFTable.ui.RankToColorConverter(51, 100, "#FFFFFF", "#61E761");

Enjoy!!

Update

I’ve got the site now using this: